Tailwind CSS: Hướng dẫn 3 cách thiết lập Tailwind chi tiết

Nội dung chính

Tailwind CSS là gì?
Khi nào nên sử dụng Tailwind?
Ưu điểm của Tailwind
Nhược điểm của Tailwind
3 cách thiết lập Tailwind CSS chi tiết
Tailwind và Bootstrap có gì khác nhau?
Top các plugin Tailwind CSS thường dùng
Các câu hỏi thường gặp về Tailwind CSS
Tổng kết

Tailwind CSS được đánh giá là một giải pháp tuyệt vời dành cho các Front-end Developer quen thuộc với CSS, đặc biệt là những người muốn tăng tốc quá trình tạo và thiết kế về lâu dài. Vậy Tailwind CSS là gì, giúp ích như thế nào và có phù hợp với người mới không? Nếu bạn đang tìm hiểu về Tailwind CSS, đây chính là bài viết dành riêng cho bạn.

Đọc bài viết này để hiểu rõ hơn:

Tailwind CSS là gì?
Khi nào nên sử dụng Tailwind CSS?
Ưu điểm và nhược điểm của Tailwind CSS
Cách thiết lập Tailwind CSS
Tailwind CSS và Bootstrap có gì khác nhau?

Tailwind CSS là gì?

Tailwind CSS là một framework CSS theo hướng tiện ích, được thiết kế để giúp người dùng tạo các ứng dụng web nhanh hơn và dễ dàng hơn.

Tailwind cung cấp một bộ các lớp CSS được đặt tên theo chức năng của chúng, cho phép bạn kiểm soát trực tiếp các khía cạnh như bố cục, màu sắc, khoảng cách, kiểu chữ và bóng đổ mà không cần viết CSS tùy chỉnh.

Đọc thêm: CSS là gì? Hướng dẫn sử dụng hiệu quả CSS để thiết kế web

Khi nào nên sử dụng Tailwind?

Giao diện người dùng (UI) có độ tùy chỉnh cao: Tailwind cho phép bạn dễ dàng xây dựng các thiết kế website độc đáo. Bạn có thể sử dụng nhiều công cụ nhỏ của nó để làm cho trang web trông hoàn hảo, mà không bị giới hạn bởi các style được tạo sẵn.
Ứng dụng web tương tác: Đối với các ứng dụng web cần các tính năng tương tác thú vị hoặc hoạt ảnh, Tailwind CSS là lựa chọn phù hợp. Nó có các công cụ đặc biệt để tạo các phản hồi tương tác với người dùng, chẳng hạn thay đổi hiệu ứng khi bạn di chuột qua chúng.
Khi muốn thử nghiệm nhiều ý tưởng trang web mới: Nếu bạn thuộc một nhóm nhỏ cần nhanh chóng thử nghiệm các ý tưởng mới, Tailwind CSS có thể giúp ích. Bạn sẽ không mất thời gian để tạo các style mới từ đầu.
Khi trang web cần độ chính xác tuyệt đối: Khi dự án của bạn cần trông chính xác như bản thiết kế, Tailwind là lựa chọn phù hợp. Nó cung cấp cho bạn các công cụ để đảm bảo mọi thứ đều hoàn hảo, cho đến từng chi tiết nhỏ nhất.
Kiểm soát chi tiết: Đối với những người thực sự muốn kiểm soát mọi phần trong giao diện trang web của mình, Tailwind CSS cung cấp nhiều tùy chỉnh. Bạn có thể tinh chỉnh hầu hết mọi thứ để phù hợp với tầm nhìn của mình.

Nói tóm lại, Tailwind CSS hoạt động tốt nhất khi bạn muốn sáng tạo và kiểm soát thiết kế trang web của mình. Nó đặc biệt hữu ích cho các thiết kế độc đáo, các tính năng tương tác và các dự án mà giao diện là điểm quan trọng nhất.

Ưu điểm của Tailwind

Giảm thiểu viết CSS tùy chỉnh

Với Tailwind, bạn có thể style các thành phần bằng cách áp dụng trực tiếp các lớp được xây dựng sẵn vào HTML. Bằng cách sử dụng các lớp tiện ích này, bạn có thể xây dựng các thiết kế tùy chỉnh mà không cần viết CSS.

Giữ cho file CSS gọn nhẹ

Nếu không có framework như Tailwind, bạn phải liên tục viết CSS khi thêm các tính năng và thành phần mới. Kết quả là các file CSS sẽ ngày càng lớn và nặng hơn. Bằng cách sử dụng các tiện ích như flexbox, padding của Tailwind, hầu hết các style đều có thể tái sử dụng.

Không cần nghĩ ra tên lớp

Khi dùng Tailwind, bạn sẽ chọn các lớp từ một hệ thống thiết kế được định sẵn. Điều đó có nghĩa là bạn không cần phải suy nghĩ để chọn ra tên lớp “hoàn hảo” cho các style và thành phần nhất định hoặc ghi nhớ những tên lớp phức tạp như sidebar-inner-wrapper.

Thay đổi an toàn hơn

Với cách tiếp cận truyền thống, nếu bạn thay đổi CSS rất có thể một phần nào đó trên trang web sẽ bị lỗi. Tuy nhiên với Tailwind, các lớp tiện ích trong HTML là cục bộ, nhờ đó mà bạn không làm thay đổi những phần khác trên trang web.

Tính đáp ứng và bảo mật

Với các lớp dựng sẵn của Tailwind, bạn có thể thiết kế bố cục trực tiếp trong một file HTML. Điều này biến Tailwind thành một framework CSS đáp ứng cao, thân thiện với thiết bị di động.

Xây dựng các ứng dụng web có khả năng đáp ứng

Tailwind CSS bao gồm các lớp tích hợp sẵn để tạo các giao diện đáp ứng. Bạn không cần phải viết thêm CSS để điều chỉnh giao diện cho các thiết bị khác nhau.

Tương thích với các thư viện JavaScript phổ biến

Tailwind CSS tương thích với các thư viện JavaScript phổ biến như React, Vue.js và Angular.

Kiểm soát hoàn toàn đối với giao diện người dùng

Tailwind CSS cung cấp cho bạn sự linh hoạt cao để tạo giao diện tùy chỉnh theo ý muốn. Bạn không bị giới hạn bởi các thành phần được thiết kế sẵn như trong các framework CSS khác.

Nhược điểm của Tailwind

Quá trình đánh dấu (markup) trở nên dài dòng

Không giống như các framework CSS khác, Tailwind hoạt động bằng cách trộn lẫn các quy tắc kiểu dáng trực tiếp vào các file HTML. Mặc dù điều này có lợi cho những người không quen thuộc với CSS nhưng nó cũng đi ngược lại nguyên tắc “phân tách mối quan tâm” (separation of concerns) trong lập trình, làm cho quá trình đánh dấu (markup) trở nên dài dòng.

Cần nhiều thời gian để học tập

Do Tailwind CSS có nhiều lớp tiện ích tích hợp nên thời gian để học tập và thành thạo là rất dài. Ngay cả với các developer giàu kinh nghiệm, việc sử dụng và tận dụng tối đa các lớp dựng sẵn cũng có thể là một thách thức.

Thiếu các thành phần quan trọng

Không giống như Bulma và Bootstrap, Tailwind không cung cấp nhiều thành phần giao diện (UI) quan trọng. Điều này có nghĩa là bạn phải tự thêm các tính năng như header, button và thanh điều hướng cho các ứng dụng web.

Chưa có nhiều tài liệu để học tập

Mặc dù tài liệu tham khảo về Tailwind CSS đã bổ sung các video và tài liệu hướng dẫn, nhưng vẫn chưa đầy đủ như các đối thủ cạnh tranh như Bootstrap.

Kích thước bundle lớn

Tailwind CSS có thể có bundle lớn hơn so với các framework CSS khác, ảnh hưởng đến hiệu suất trang web, đặc biệt trên mạng chậm.

Bảo trì khó khăn

Việc bảo trì các ứng dụng web được xây dựng bằng Tailwind CSS có thể khó khăn hơn do markup có thể trở nên dài dòng và khó đọc.

3 cách thiết lập Tailwind CSS chi tiết

Cách thiết lập Tailwind CSS với công cụ Tailwind CLI

Tailwind CLI là một công cụ dòng lệnh giúp bạn dễ dàng cài đặt, cấu hình và sử dụng Tailwind CSS trong dự án. Tailwind CLI có sẵn dưới dạng tệp thực thi độc lập (standalone executable), bạn có thể dùng nó mà không cần cài đặt Node.js. Các bước thiết lập như sau:

Cài đặt Tailwind CSS: Sử dụng npm để cài đặt tailwindcss và khởi tạo tập tin cấu hình tailwind.config.js.

Terminal

> npm install -D tailwindcss

> npx tailwindcss init

Cấu hình đường dẫn đến template: Thêm đường dẫn đến tất cả tệp mẫu trong tệp tailwind.config.js của bạn.

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./src/**/*.{html,js}"],

  theme: {

    extend: {},

  },

  plugins: [],

}

Thêm Directive Tailwind vào CSS: Thêm chỉ thị @tailwind cho từng lớp của Tailwind vào tệp CSS chính của bạn.

src/input.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Bắt đầu quá trình xây dựng Tailwind CLI: Chạy công cụ CLI để quét các tệp mẫu của bạn để tìm lớp và xây dựng CSS của bạn.

Terminal

> npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Bắt đầu sử dụng Tailwind trong HTML: Thêm tệp CSS đã biên dịch của bạn vào <head> và bắt đầu sử dụng các lớp tiện ích của Tailwind để tạo kiểu cho nội dung.

src/index.html

<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="./output.css" rel="stylesheet">

</head>

<body>

  <h1 class="text-3xl font-bold underline">

    Hello world!

  </h1>

</body>

</html>

Cách thiết lập Tailwind CSS với PostCSS

Cài đặt Tailwind CSS làm plugin PostCSS là cách liền mạch nhất để tích hợp nó với các công cụ xây dựng như webpack, Rollup, Vite và Parcel. Các bước thiết lập như sau:

Cài đặt CSS Tailwind: Cài đặt tailwindcss và các phần phụ thuộc ngang hàng thông qua npm, rồi tạo tệp tailwind.config.js của bạn.

Terminal

> npm install -D tailwindcss postcss autoprefixer

> npx tailwindcss init

Thêm Tailwind vào cấu hình PostCSS: Thêm tailwindcss và autoprefixer vào tệp postcss.config.js hoặc bất cứ nơi nào PostCSS được định cấu hình trong dự án của bạn.

postcss.config.js

module.exports = {

  plugins: {

    tailwindcss: {},

    autoprefixer: {},

  }

}

Định cấu hình đường dẫn mẫu: Thêm đường dẫn đến tất cả các tệp mẫu trong tệp tailwind.config.js của bạn.

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: ["./src/**/*.{html,js}"],

  theme: {

    extend: { },

  },

  plugins: [ ],

}

Thêm các lệnh Tailwind vào CSS: Thêm chỉ thị @tailwind cho từng lớp của Tailwind vào tệp CSS chính của bạn.

main.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Bắt đầu quá trình xây dựng: Chạy quy trình xây dựng của bạn bằng npm run dev hoặc bất kỳ lệnh nào được định cấu hình trong tệp pack.json.

Terminal

> npm run dev

Bắt đầu sử dụng Tailwind trong HTML của bạn: Đảm bảo CSS đã biên dịch của bạn được đưa vào <head> (Framework của bạn có thể xử lý việc này cho bạn), sau đó bắt đầu sử dụng các lớp tiện ích của Tailwind để tạo kiểu cho nội dung.

index.html

<!doctype html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link href="/dist/main.css" rel="stylesheet">

</head>

<body>

  <h1 class="text-3xl font-bold underline">

    Hello world!

  </h1>

</body>

</html>

Cách thiết lập Tailwind CSS với Create React App

Create React App là một công cụ dòng lệnh được sử dụng để tạo các ứng dụng React mới. Nó được tạo ra và duy trì bởi đội ngũ React của Facebook. Bạn có thể thiết lập Tailwind CSS với công cụ này theo các bước sau:

Tạo dự án của bạn: Bắt đầu bằng cách tạo một dự án React mới với Create React App v5.0+ nếu bạn chưa thiết lập dự án nào.

Terminal

> npx create-react-app my-project

> cd my-project

Cài đặt CSS Tailwind: Cài đặt tailwindcss qua npm, sau đó chạy lệnh init để tạo tệp tailwind.config.js.

Terminal

> npm install -D tailwindcss

> npx tailwindcss init

Định cấu hình đường dẫn mẫu: Thêm đường dẫn đến tất cả tệp mẫu trong tệp tailwind.config.js của bạn.

tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: [

    "./src/**/*.{js,jsx,ts,tsx}",

  ],

  theme: {

    extend: { },

  },

  plugins: [ ],

}

Thêm các lệnh Tailwind vào CSS: Thêm lệnh @tailwind cho từng lớp của Tailwind vào tệp ./src/index.css của bạn.

index.css

@tailwind base;

@tailwind components;

@tailwind utilities;

Bắt đầu quá trình xây dựng: Chạy quá trình xây dựng của bạn với npm run start.

Terminal

> npm run start

Bắt đầu sử dụng Tailwind trong dự án: Bắt đầu sử dụng các lớp tiện ích của Tailwind để tạo kiểu cho nội dung của bạn.

App.js

export default function App( ) {

  return (

    <h1 className="text-3xl font-bold underline">

      Hello world!

    </h1>

  )

}

Tailwind và Bootstrap có gì khác nhau?

Bootstrap là một bộ công cụ mã nguồn mở miễn phí, được sử dụng để thiết kế giao diện người dùng (UI) cho các trang web. Framework này bao gồm các thành phần HTML, CSS và JavaScript được tạo sẵn.

Với chức năng gần như tương tự nhau, vậy Tailwind và Bootstrap có điểm gì khác nhau?

Tính năng	Bootstrap	Tailwind CSS
Tính linh hoạt	Cung cấp các thành phần sẵn có.	Cho phép tinh chỉnh và thay đổi mọi thứ một cách tự do.
Hiệu suất	Có thể tạo ra CSS bundle lớn hơn do bao gồm nhiều thành phần UI được thiết kế sẵn.	Có thể tạo ra CSS bundle nhỏ hơn so với Bootstrap, dẫn đến hiệu suất trang web tốt hơn.
Thời gian học tập	Dễ dàng cho người mới bắt đầu.	Cần nhiều thời gian học tập hơn.
Lợi ích học tập	Làm quen với các thành phần sẵn có.	Học cách sử dụng các kiểu nhỏ, có thể tái sử dụng trong toàn bộ thiết kế.
Tài liệu học tập	Có nhiều tài liệu hướng dẫn, video hướng dẫn, khóa học trực tuyến miễn phí và trả phí.	Cộng đồng đang phát triển nhanh chóng nhưng tài liệu hướng dẫn chính thức và các nguồn tài nguyên học tập có thể hạn chế hơn so với Bootstrap. Tuy nhiên, có nhiều bài viết, video, khoá học do cộng đồng tạo ra để hỗ trợ bạn.
Templates và Themes	Nhiều thiết kế sẵn bao gồm miễn phí và trả phí.	Số lượng template và theme ít hơn, nhưng bạn có thể dễ dàng tạo giao diện tùy chỉnh theo ý muốn.
Plugin và Extension	Có các công cụ bổ sung cho nhiều tính năng hơn như lịch, trình chiếu và hoạt ảnh.	Cộng đồng đang phát triển các plugin và extension mới nhưng số lượng vẫn hạn chế so với Bootstrap. Tuy nhiên, bạn có thể sử dụng các JavaScript khác để bổ sung chức năng cho ứng dụng của mình.
Công cụ tích hợp	Tương thích tốt với jQuery và các công cụ hiện đại như React và Angular.	Tương thích tốt với PostCSS và các công cụ JavaScript.
Tương thích trình duyệt	Lựa chọn tốt hơn nếu bạn cần trang web hoạt động trên các trình duyệt cũ.	Tập trung vào các trình duyệt hiện đại, nhưng vẫn tương thích tốt với hầu hết trình duyệt phổ biến.

Nhìn chung, framework tốt nhất sẽ là sự kết hợp hài hòa giữa tính linh hoạt và dễ dàng sử dụng, tùy thuộc vào nhu cầu mà bạn có thể đưa ra những lựa chọn phù hợp.

Nếu bạn cần tạo website nhanh chóng, chẳng hạn phiên bản thử nghiệm đơn giản cho ý tưởng, Bootstrap có thể là lựa chọn phù hợp.
Nếu bạn đang xây dựng website cần giao diện đặc biệt hoặc có các tính năng phức tạp, Tailwind CSS có thể cung cấp cho bạn nhiều tùy chọn hơn.
Nếu trang web cần đảm bảo tương thích trên tất cả trình duyệt, bạn có thể chọn Bootstrap làm công cụ hỗ trợ.
Nếu bạn thực sự giỏi CSS và thích kiểm soát mọi chi tiết nhỏ, Tailwind CSS cho phép bạn làm điều đó.

Top các plugin Tailwind CSS thường dùng

Plugin là một cách để mở rộng chức năng của Tailwind bằng cách thêm các kiểu mới hoặc sửa đổi các kiểu hiện có.

Tailwind CSS cung cấp một số plugin chính thức, bao gồm Typography, Forms, Aspect Ratio và Container Queries:

Typography: Plugin này cung cấp các lớp tiện ích cho việc tạo văn bản đẹp và dễ đọc.
Forms: Plugin này cung cấp các lớp tiện ích cho việc tạo các biểu mẫu HTML đẹp và dễ sử dụng.
Aspect Ratio: Plugin này cung cấp các lớp tiện ích cho việc tạo các yếu tố có tỷ lệ khung hình cố định.
Container Queries: Plugin này cung cấp các lớp tiện ích cho việc tạo các bố cục đáp ứng dựa trên kích thước của vùng chứa.

Ngoài các plugin chính thức, còn có rất nhiều plugin do cộng đồng tạo ra có sẵn cho Tailwind CSS. Một số plugin phổ biến bao gồm:

DaisyUI: DaisyUI là một bộ sưu tập các thành phần UI được xây dựng trên Tailwind CSS. Nó cung cấp một loạt các thành phần sẵn sàng sử dụng, chẳng hạn như nút, thẻ, biểu mẫu và bảng.
Tailwind CSS JIT: Tailwind CSS JIT là một trình biên dịch Just-in-time cho Tailwind CSS. Nó cho phép bạn tạo CSS tùy chỉnh cho dự án của mình mà không cần phải viết bất kỳ CSS nào.
Tailwind UI: Tailwind UI là một bộ sưu tập các thành phần UI được xây dựng trên Tailwind CSS. Nó cung cấp một loạt các thành phần sẵn sàng sử dụng, chẳng hạn như nút, thẻ, biểu mẫu và bảng.
Interlayer: Interlayer là một công cụ cho phép bạn sử dụng các lớp Tailwind CSS trong các dự án React, Vue và Svelte.
Tailwind Next: Tailwind Next là một cấu hình cho phép bạn sử dụng Tailwind CSS với Next.js.
Tailwind AlpineJS: Tailwind AlpineJS là một cấu hình cho phép bạn sử dụng Tailwind CSS với AlpineJS.

Các plugin này có thể được thêm vào dự án của bạn bằng cách cài đặt chúng với npm, sau đó thêm chúng vào tệp tailwind.config.js.

Các câu hỏi thường gặp về Tailwind CSS

Có thể thay đổi phông chữ cơ sở (font-family) trong cấu hình của Tailwind CSS không?

Có, bạn hoàn toàn có thể thay đổi font chữ cơ sở trong cấu hình Tailwind. Để điều chỉnh theo ý muốn, bạn hãy truy cập và thay đổi trong phần “theme” của tệp cấu hình (tailwind.config.js).

Làm thế nào để tạo biểu mẫu bằng Tailwind CSS?

Tailwind CSS cung cấp Tailwind Forms như một plugin giúp thiết lập các kiểu form cơ bản. Bạn cũng có thể sử dụng các lớp tiện ích của Tailwind CSS để tạo form, bao gồm các lớp dễ dàng áp dụng cho nền, đường viền, đổ bóng,…

Bắt đầu bằng việc tạo element form và sử dụng lớp space-y-{n} để thêm khoảng cách dọc giữa các control của form.

Làm thế nào để định vị hai phần tử bên trái và bên phải bằng Tailwind?

Bạn có thể định vị các element sang trái và phải trong Tailwind CSS bằng cách sử dụng các lớp flex hoặc flow-root. Lớp flow-root giúp xóa nội dung nổi bên trong một container, đảm bảo cấu trúc bố cục phù hợp. Trong khi đó, lớp position cho phép kiểm soát chính xác vị trí của các element được định vị, cung cấp sự linh hoạt trong việc căn chỉnh.

Lưu ý: Lớp flow-root được thêm vào trong phiên bản nâng cấp, tức là v2.0 trở lên trong Tailwind. Nếu phiên bản của bạn không được cập nhật, bạn có thể dễ dàng thay thế flow-root bằng clearfix trong code của mình.

Cách tạo khoảng cách ngang và dọc giữa các element trong Tailwind CSS?

Tailwind CSS cung cấp các utility class để dễ dàng tạo khoảng cách ngang và dọc giữa các element.

Khoảng cách ngang: Sử dụng class space-x-{n}, thay {n} bằng giá trị mong muốn (ví dụ: space-x-4 để tạo khoảng cách ngang 4 đơn vị).
Khoảng cách dọc: Sử dụng class space-y-{n}, thay {n} bằng giá trị mong muốn (ví dụ: space-y-8 để tạo khoảng cách dọc 8 đơn vị).

Lưu ý: Các lớp tiện ích được đề cập ở trên được áp dụng cho các thành phần con (child elements).

Những trình duyệt nào hỗ trợ Tailwind CSS?

Các thành phần trong Tailwind UI được thiết kế để hoạt động trên các phiên bản mới nhất của tất cả trình duyệt chính gồm Chrome, Firefox, Safari, Edge,… không hỗ trợ Internet Explorer 11.

Tổng kết

Có thể thấy, Tailwind CSS là một công cụ hữu ích dành cho những nhà phát triển web. Với Tailwind, bạn có thể tạo một giao diện bắt mắt một cách nhanh chóng, chính xác, hơn nữa các tệp cũng có dung lượng nhẹ hơn so với nhiều Framework khác.

Để thiết lập và sử dụng Tailwind CSS, bạn có thể thực hiện theo 3 cách đã được hướng dẫn trong bài viết gồm: Thiết lập với Tailwind CLI; Thiết lập với Using CSS; Thiết lập với Create React App.

Tailwind CSS là gì?

Khi nào nên sử dụng Tailwind?

Ưu điểm của Tailwind

Nhược điểm của Tailwind

3 cách thiết lập Tailwind CSS chi tiết

Cách thiết lập Tailwind CSS với công cụ Tailwind CLI

Cách thiết lập Tailwind CSS với PostCSS

Cách thiết lập Tailwind CSS với Create React App

Tailwind và Bootstrap có gì khác nhau?

Top các plugin Tailwind CSS thường dùng

Các câu hỏi thường gặp về Tailwind CSS

Có thể thay đổi phông chữ cơ sở (font-family) trong cấu hình của Tailwind CSS không?

Làm thế nào để tạo biểu mẫu bằng Tailwind CSS?

Làm thế nào để định vị hai phần tử bên trái và bên phải bằng Tailwind?

Cách tạo khoảng cách ngang và dọc giữa các element trong Tailwind CSS?

Những trình duyệt nào hỗ trợ Tailwind CSS?

Tổng kết

Chia sẻ bài viết