Hướng dẫn sử dụng Tailwind CSS: Cẩm nang thực hành toàn diện, từ cơ bản đến nâng cao

Tailwind CSS là gì?

Tailwind CSS là một framework CSS theo nguyên tắc “Utility-First” (tức là tập trung vào các công cụ hữu ích, chức năng cơ bản trước tiên). Nó cung cấp một loạt các lớp CSS ở cấp độ thấp, có chức năng đơn lẻ, có thể được kết hợp trực tiếp trong HTML (hoặc JSX, các mẫu Vue, v.v.) để nhanh chóng xây dựng giao diện người dùng tùy chỉnh. Khác với các framework như Bootstrap – những framework cung cấp sẵn các thành phần như nút bấm, card, v.v. – Tailwind CSS không cung cấp bất kỳ thành phần nào có sẵn sàng sử dụng ngay; thay vào đó, nó cung cấp một bộ công cụ cơ bản để bạn tự xây dựng bất kỳ thiết kế nào mình cần.

Phương pháp ưu tiên tính hữu dụng này có nghĩa là các nhà phát triển không cần phải viết mã CSS tùy chỉnh cho các thành phần (components) nữa, cũng không cần phải thường xuyên chuyển đổi giữa các tệp HTML và CSS. Bằng cách áp dụng trực tiếp một loạt các quy tắc thiết kế trong HTML… text-blue-600、p-4、bg-gray-100 Bằng cách sử dụng các lớp (classes) tương ứng, bạn có thể thiết lập màu văn bản, độ dày đường viền (padding) và màu nền (background color). Điều này giúp nâng cao đáng kể hiệu quả phát triển, đồng thời giúp kết hợp chặt chẽ giữa phong cách trình bày (style) và cấu trúc nội dung (structure), từ đó làm giảm k

Triết lý thiết kế cốt lõi của Tailwind CSS là “những ràng buộc tạo nên sự tự do”. Bằng cách sử dụng một bộ quy tắc được thiết kế cẩn thận về khoảng cách, màu sắc, kích thước phông chữ và các yếu tố khác theo một hệ thống thiết kế nhất quán, Tailwind CSS đảm bảo tính nhất quán trong thiết kế của dự án nhưng vẫn giữ được tính linh hoạt. Các nhà phát triển có thể tạo ra những thiết kế độc đáo dựa trên những ràng buộc đã được định nghĩa sẵn này, mà không cần lo lắng về việc các phong cách thiết kế sẽ lan rộng một cách không kiểm soát được.

Làm thế nào để bắt đầu sử dụng Tailwind CSS

Có nhiều cách để tích hợp Tailwind CSS vào dự án của bạn. Cách được khuyến nghị nhất là cài đặt nó dưới dạng một plugin cho PostCSS, vì điều này sẽ giúp bạn tận dụng tối đa các tính năng tối ưu hóa mà Tailwind cung cấp.

Cài đặt thông qua npm hoặc yarn.

Trước tiên, hãy sử dụng công cụ quản lý gói (package manager) để khởi tạo dự án và cài đặt Tailwind CSS cùng các phụ thuộc của nó. Lệnh cốt lõi để thực hiện việc này là… tailwindcss、postcss 和 autoprefixer。

npm install -D tailwindcss postcss autoprefixer

Sau khi quá trình cài đặt hoàn tất, hãy chạy các lệnh sau để tạo các tệp cấu hình cho Tailwind CSS và PostCSS. npx tailwindcss init -p Sẽ được tạo ra cùng lúc. tailwind.config.js 和 postcss.config.js Tệp.

npx tailwindcss init -p

Cấu hình đường dẫn mẫu

Đã được tạo ra. tailwind.config.js Trong tệp tin đó, bạn cần thực hiện các thiết lập (cấu hình) cần thiết. content Bạn cần chỉ định các tệp cần được quét để Tailwind tìm kiếm tên các lớp (classes) trong đó. Những tệp này thường bao gồm HTML, JavaScript, JSX hoặc Vue của bạn. Điều này rất quan trọng vì Tailwind sử dụng một cơ chế có tên “PurgeCSS” (trong phiên bản sản xuất) để loại bỏ tất cả các đoạn CSS không được sử dụng, từ đó tạo ra tệp định dạng CSS có kích thước nhỏ nhất có thể.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Lệnh nhập định dạng (Import Style Command)

Trong tệp CSS chính của bạn (ví dụ src/styles.css 或 src/index.css), hãy sử dụng @tailwind Các lệnh này được sử dụng để đưa các định dạng kiểu (styles) cốt lõi của Tailwind vào ứng dụng.

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Sau đó, hãy thêm tệp CSS này vào tệp nhập môn (entry file) của dự án của bạn. Sau khi hoàn thành các bước trên, bạn có thể bắt đầu sử dụng các lớp hữu ích (utility classes) của Tailwind trong HTML.

Các lớp hữu ích cốt lõi và các mô hình thường được sử dụng (Core Practical Classes and Common Patterns)

Các tên lớp trong Tailwind CSS có tính ngữ nghĩa cao và dễ dự đoán, tuân theo một mô hình đặt tên đơn giản: thuộc tính – giá trị (hoặc thuộc tính – điểm đánh dấu – giá trị).

Layout and Spacing

Đây là nhóm lớp được sử dụng phổ biến nhất. Ví dụ,flex Dùng để thiết lập bố cục các khối linh hoạt (elastic boxes).p-4 biểu thị padding: 1remSử dụng lề m-*Sử dụng khoảng đệm bên trong p-*Các con số thường tương ứng với một hệ thống khoảng cách được thu nhỏ theo tỷ lệ nhất định (ví dụ: 0, 1, 2, 4, 6).

<div class="flex justify-between items-center p-4">
  <div class="ml-2">bên trái</div>
  <div class="mr-2">bên phải</div>
</div>

Màu sắc và nền (Color and Background)

Bạn có thể dễ dàng thiết lập màu sắc của văn bản, màu nền và màu viền. Hệ thống màu sắc cung cấp một bảng màu đa dạng, chẳng hạn như… text-blue-500、bg-gray-100、border-red-300Số càng lớn, màu sắc thường càng đậm (ví dụ:blue-100 Rất nông.blue-900 Rất sâu.

Thiết kế đáp ứng

Tailwind sử dụng chiến lược ưu tiên thiết kế cho thiết bị di động (mobile-first). Tất cả các lớp (classes) hữu ích trong Tailwind đều được thiết kế sẵn dành cho thiết bị di động. Nếu bạn muốn thêm phong cách (styles) cho màn hình lớn hơn, bạn cần thêm tiền tố “breakpoint” trước tên lớp đó. Ví dụ: md:、lg:Điều này giúp việc xây dựng các giao diện có khả năng thích ứng với nhiều thiết bị khác nhau trở nên cực kỳ đơn giản.

<div class="text-base md:text-lg lg:text-xl">
  Đoạn văn này sẽ hiển thị ở kích thước cơ bản trên điện thoại, lớn hơn trên máy tính bảng, và còn lớn hơn nữa trên máy tính để bàn.
</div>

Trạng thái như khi người dùng di chuột qua (hover), trạng thái khi đối tượng nhận được sự chú ý (focus), v.v.

Bằng cách thêm tiền tố biểu thị trạng thái, bạn có thể thiết lập kiểu dáng cho các trạng thái khác nhau của một phần tử. Ví dụ,hover:bg-blue-600 Màu nền sẽ thay đổi khi con trỏ chuột được di chuyển đến vị trí đó.focus:ring-2 Một đường viền hình vòng sẽ được thêm vào khi phần tử nhận được sự chú ý (focus).

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

Kỹ thuật nâng cao và cấu hình tùy chỉnh

Sau khi nắm vững những kiến thức cơ bản, bạn có thể tận dụng hết tiềm năng của Tailwind bằng cách sử dụng một số kỹ thuật nâng cao và cấu hình tùy chỉnh.

Trích xuất lớp thành phần

Mặc dù nguyên tắc “tính hữu dụng là ưu tiên hàng đầu” là triết lý cốt lõi, nhưng để tránh việc phải lặp lại những danh sách lớp (class) dài trong HTML, bạn có thể sử dụng các công cụ hoặc kỹ thuật phù hợp. @apply Trong CSS, bạn có thể trích xuất và tái sử dụng các tổ hợp kiểu dáng phổ biến để tạo ra những “lớp thành phần” (component classes) riêng của mình.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Sau đó, trong HTML chỉ cần sử dụng class="btn-primary" vào phần tử HTML.

Hệ thống thiết kế tùy chỉnh

Tất cả các giá trị mặc định của Tailwind đều có thể được cấu hình. Bạn có thể thay đổi chúng bằng cách sửa đổi các tệp cấu hình tương ứng. tailwind.config.js Đối với các tệp tin, bạn có thể tự định nghĩa màu sắc, phông chữ, kích thước khoảng cách, các điểm dừng (breakpoints), v.v., để chúng hoàn toàn phù hợp với thương hiệu hoặc quy chuẩn thiết kế của bạn.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

Sau khi định nghĩa xong, bạn có thể sử dụng nó ngay. text-brand-blue 或 p-84 như vậy.

Sử dụng chế độ JIT

Từ phiên bản Tailwind CSS 2.1 trở đi, công nghệ Just-in-Time (JIT) đã được tích hợp. Công nghệ này sẽ tạo ra các đoạn CSS cần thiết một cách dinh hình khi bạn viết mã template, thay vì tạo trước một tệp CSS lớn chứa tất cả các lớp có thể xuất hiện. Điều này giúp cải thiện đáng kể hiệu năng và hỗ trợ một số tính năng mà không thể thực hiện được trong các phương thức truyền thống, chẳng hạn như việc sử dụng các giá trị biến thể một cách tự do.

Để kích hoạt chế độ JIT, bạn chỉ cần thực hiện theo các bước được hướng dẫn. tailwind.config.js thiết lập mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

Sau khi được kích hoạt, bạn thậm chí có thể sử dụng những công cụ như… w-[200px] 或 top-[-10px] Loại giá trị tùy ý như vậy mang lại sự linh hoạt rất lớn cho quá trình phát triển.

Tóm lại

Tailwind CSS đã thay đổi hoàn toàn cách các nhà phát triển front-end viết mã định dạng bằng phương pháp luận độc đáo và hiệu quả của mình. Nó di chuyển quá trình ra quyết định về định dạng từ các tệp CSS sang các thẻ HTML, và thông qua việc kết hợp nhiều lớp có chức năng đơn lẻ, Tailwind giúp tạo ra những giao diện có tính hiệu quả cao, nhất quán và có thể tùy chỉnh một cách sâu rộng. Từ việc cài đặt và thiết lập đơn giản, đến các lớp cốt lõi liên quan đến bố cục, màu sắc, tính phản ứng (responsive) và trạng thái (state), cho đến các tính năng nâng cao như tùy chỉnh, trích xuất thành các thành phần (components) và chế độ JIT (Just-In-Time compilation), Tailwind cung cấp một bộ công cụ mạnh mẽ và linh hoạt. Nó khuyến khích người dùng sáng tạo trong những khuôn khổ được thiết kế cẩn thận, vừa đảm bảo tính nhất quán trong thiết kế, vừa mang lại sự tự do tối đa cho các nhà phát triển – trở thành công cụ hữu ích cho việc thiết kế nguyên mẫu nhanh chóng và phát triển sản phẩm trên Web hiện đại.

FAQ 常见问题

Liệu Tailwind CSS có làm cho mã HTML trở nên phức tạp và nặng nề hơn không?

Đúng vậy, việc sử dụng Tailwind CSS sẽ thêm rất nhiều tên lớp (class names) vào các phần tử HTML, điều này có thể khiến mã HTML trở nên hơi rườm rà và khó đọc.

Tuy nhiên, sự “phức tạp” này là có cấu trúc và có thể dự đoán được; thực tế, nó đã chuyển gán phần phức tạp của các kiểu dáng (styles) từ CSS sang HTML – một ngôn ngữ dễ quản lý hơn. Điều quan trọng hơn nữa là, thông qua việc cấu hình… content Trong quá trình xây dựng ứng dụng, các công cụ sản xuất (build tools) sẽ loại bỏ tất cả các lớp CSS không được sử dụng; kết quả là tệp CSS được tạo ra thường nhỏ hơn nhiều so với những tệp CSS được viết thủ công hoặc sử dụng các thư viện thành phần (component libraries). Do đó, về mặt hiệu năng, các công cụ này lại mang lại lợi thế rõ rệt.

Làm thế nào để ghi đè hoặc sửa đổi kiểu mặc định của Tailwind?

Bạn có thể thay đổi các kiểu dáng mặc định theo nhiều cách khác nhau. Cách được khuyến nghị nhất là… tailwind.config.js phần theme.extend Bạn có thể mở rộng một phần của hệ thống để thêm các giá trị mới mà không ảnh hưởng đến các phần còn lại. Nếu bạn muốn thay thế hoàn toàn một khóa chủ đề (chẳng hạn như màu sắc), hãy thực hiện điều đó trực tiếp. theme Hãy định nghĩa lại nó. Ngoài ra, hãy sử dụng nó trước các lớp hữu dụng (practical classes). !important (chẳng hạn như !text-red-500Hoặc bạn có thể sử dụng các bộ lọc (selectors) có độ đặc hiệu cao hơn trong CSS để thực hiện việc ghi đè (override) các định dạng (styles).

Tailwind CSS phù hợp để sử dụng cùng với các framework frontend nào?

Tailwind CSS có thể tích hợp hoàn hảo với hầu hết các framework front-end hiện đại. Nó hỗ trợ trực tiếp các công cụ như React, Vue, Angular, Svelte, v.v. Bạn chỉ cần đảm bảo sử dụng đúng tên lớp (class names) trong mã template hoặc JSX của framework, và cấu hình PostCSS cùng Tailwind CSS trong quá trình xây dựng ứng dụng. Nhiều framework như Next.js, Vite thậm chí còn cung cấp các ví dụ hoặc plugin tích hợp sẵn với Tailwind CSS, giúp việc tích hợp trở nên dễ dàng hơn nữa.

Có phải việc sử dụng Tailwind CSS đồng nghĩa với việc từ bỏ việc viết mã CSS thủ công không?

Hoàn toàn không cần thiết. Tailwind CSS không loại trừ việc sử dụng CSS được viết thủ công; thay vào đó, nó bổ sung cho những đoạn CSS đó. Bạn vẫn có thể viết các tệp CSS tùy chỉnh trong dự án của mình. @apply Các chỉ thị trong Tailwind cho phép bạn tái sử dụng các lớp công cụ (tool classes) trong CSS tùy chỉnh của mình. Đối với những trường hợp cực kỳ đặc biệt, nơi các lớp thông thường không thể kết hợp được để tạo ra hiệu ứng mong muốn, hoặc khi cần sử dụng các tính năng CSS phức tạp (chẳng hạn như hoạt ảnh bằng khung chìa khóa – keyframe animations), việc viết mã CSS thủ công vẫn là cần thiết. Tailwind chỉ đơn giản cung cấp một cách hiệu quả hơn để xử lý hơn 90% nhu cầu về thiết kế trang web phổ biến trong các dự án.