Hướng dẫn tối thượng Tailwind CSS: Từ cơ bản đến thông thạo các kỹ thuật thực tế

Tailwind CSS là gì

Tailwind CSS là một framework CSS tập trung vào tính hữu dụng và khả năng tùy chỉnh cao. Nó cung cấp một bộ các lớp CSS ở cấp độ thấp, có thể được điều chỉnh để giúp bạn xây dựng nhanh chóng các giao diện người dùng tùy chỉnh trực tiếp trong HTML. Khác với các framework như Bootstrap hoặc Bulma – những framework cung cấp sẵn các thành phần được thiết kế sẵn (như nút bấm, card), Tailwind cung cấp những lớp CSS “nguyên tử” (atomic CSS classes); mỗi lớp thường chỉ tương ứng với một hoặc một nhóm thuộc tính CSS. Ví dụ:.text-center tương ứng với text-align: center;，.p-4 tương ứng với padding: 1rem;。

Khái niệm “loại hình chức năng” này có nghĩa là các nhà phát triển có thể kết hợp các lớp (classes) đơn lẻ lại với nhau để tạo ra bất kỳ kiểu dáng nào họ muốn, mà không cần phải viết mã CSS tùy chỉnh. Điều này giúp tăng tốc độ phát triển đáng kể và giữ cho bảng định kiểu (style sheet) gọn nhẹ, bởi vì công cụ xây dựng cuối cùng sẽ loại bỏ tất cả các lớp không được sử dụng thông qua quá trình “tối ưu hóa”.

Các khái niệm cốt lõi và nguyên lý hoạt động

Việc hiểu rõ các khái niệm cốt lõi của Tailwind CSS là chìa khóa để nắm bắt được esence (bản chất cốt lõi) của nó. Triết lý thiết kế của Tailwind CSS xoay quanh tính hữu dụng, khả năng kết hợp các thành phần với nhau (tính linh hoạt trong việc sử dụng các công cụ, component) và thiết k

Đọc thêm Thông thạo Tailwind CSS: Hướng dẫn thực tế từ cơ bản đến thực hành và các phương pháp hay nhất。

Triết lý thiết kế ưu tiên tính hữu dụng

“Practicality first” là nền tảng cơ bản của Tailwind CSS. Framework này cung cấp một số lượng lớn các lớp (classes) có độ chi tiết cao và chức năng đơn giản, chẳng hạn như… .bg-blue-500、.rounded-lg、.flexCác nhà phát triển kết hợp những lớp này giống như việc xếp các khối Lego lại với nhau để tạo ra các thành phần phức tạp. Phương pháp này giúp tránh được việc cần phải đặt tên cho mỗi thành phần một cách có ý nghĩa trong CSS truyền thống (chẳng hạn như…). .user-cardNhững phiền toái đó cũng được loại bỏ, đồng thời giảm bớt chi phí liên quan đến việc thay đổi bối cảnh (context switching) khi phải liên tục chuyển đổi giữa các tệp CSS và HTML.

Trợ lý xây dựng trang web WordPress.com

99.9991% Thời gian hoạt động + Khả năng chịu lỗi đa vùng, hỗ trợ 24/7, mua gói blog được miễn phí sử dụng AI xây dựng website

Miễn phí tên miền trong một năm

Truy cập Trợ lý Xây dựng Website WordPress.com →

Trợ lý Xây dựng Website UltaHost

900+ mẫu miễn phí, tùy chỉnh được, có được khả năng SEO cần thiết để tối ưu hóa khả năng hiển thị tìm kiếm của website

Ưu đãi 40%

Truy cập Trợ lý xây dựng trang web UltaHost →

Thiết kế đáp ứng và điểm ngắt

Tailwind có sẵn một hệ thống điểm đánh dấu (breakpoints) phản ứng tích hợp, cho phép bạn áp dụng các kiểu dáng (styles) phù hợp với các kích thước màn hình khác nhau một cách dễ dàng thông qua các tiền tố (prefixes) được đặt cho các lớp (classes). Các tiền tố điểm đánh dấu mặc đsm:、md:、lg:、xl:、2xl:。

Ví dụ, một phần tử có thể được xếp chồng lên nhau trên thiết bị di động nhưng được sắp xếp theo chiều ngang trên màn hình lớn; điều này có thể được thực hiện như sau:

<div class="flex flex-col md:flex-row">
  <div>Nội dung 1</div>
  <div>Nội dung 2</div>
</div>

Điều này có nghĩa là mặc định (trên nền tảng di động) là… flex-col(The vertical direction), on medium-sized screens.md:Trở thành 5 (hoặc cao hơn) flex-row(The horizontal direction.)

Configuration and Customization

Các cấu hình mặc định của Tailwind có thể được chỉnh sửa thông qua tệp `config.js` nằm trong thư mục gốc của dự án. tailwind.config.js Bạn có thể tùy chỉnh sâu rộng các tệp tin này. Trong những tệp tin này, bạn có thể thay đổi bảng màu, tỷ lệ khoảng cách, phông chữ, các giá trị điểm dừng (breakpoint), và thậm chí thêm các lớp (classes) hữu ích mới.

Đọc thêm Học Tailwind CSS: Xây dựng trang web hiện đại và responsive từ con số 0。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Sau khi được tùy chỉnh, bạn có thể sử dụng nó trong dự án của mình. .bg-brand-blue 和 .w-128 như vậy.

Sử dụng cơ bản và cài đặt

Trước khi bắt đầu sử dụng Tailwind, bạn cần tích hợp nó vào dự án của mình. Tailwind có thể được cài đặt theo nhiều cách khác nhau, nhưng phổ biến nhất là thông qua npm hoặc yarn.

Cài đặt bằng PostCSS (được khuyến nghị)

Đối với hầu hết các dự án front-end hiện đại (chẳng hạn như những dự án sử dụng Vite, Webpack), cách tích hợp hiệu quả nhất là thông qua PostCSS. Trước tiên, hãy cài đặt Tailwind và các phụ thuộc của nó bằng công cụ npm:

Trợ lý xây dựng trang web Bluehost

Cung cấp công cụ tạo website AI, hỗ trợ trò chuyện trực tuyến và điện thoại 24/7, tên miền miễn phí một năm, CDN miễn phí, thời gian hoạt động SLA 99.99%

Truy cập Bluehost

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Quá trình này sẽ cài đặt các gói cần thiết và tạo ra một thiết lập mặc định. tailwind.config.js Tệp cấu hình. Sau đó, bạn cần tạo một tệp cấu hình PostCSS (ví dụ như postcss.config.jsVà hãy thêm công cụ Tailwind vào hệ thống của bạn.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Tiếp theo, trong tệp CSS chính của bạn (ví dụ: src/styles.cssTrong đoạn mã này, các lệnh của Tailwind CSS được đưa vào để tùy chỉnh giao diện và thiết kế của ứng dụng.

@tailwind base;
@tailwind components;
@tailwind utilities;

Cuối cùng, hãy đảm bảo rằng PostCSS được xử lý đúng cách trong quy trình xây dựng dự án của bạn. Ví dụ, trong các dự án sử dụng Vite hoặc Webpack, PostCSS sẽ được tự động đọc và xử lý một cách tự động. postcss.config.js。

Đọc thêm Làm chủ Tailwind CSS: Hướng dẫn thực tế và các phương pháp hay nhất từ cơ bản đến nâng cao。

Sử dụng CDN để phát triển nguyên mẫu nhanh chóng

Đối với các nguyên mẫu nhanh, bản trình diễn, hoặc các tệp HTML đơn giản, bạn có thể sử dụng các liên kết CDN (Content Delivery Network). Chỉ cần thêm các liên kết CDN vào mã HTML của bạn là được. <head> Hãy thêm các liên kết sau vào một số phần nội dung:

<script src="https://cdn.tailwindcss.com"></script>

Cần lưu ý rằng phương thức sử dụng CDN (Content Delivery Network) không hỗ trợ các thiết lập tùy chỉnh và không thể được sử dụng cho mục đích đặc biệt (như cấu hình riêng biệt). @apply Đây là một tệp chứa các chỉ thị thiết kế (instructions) và tất cả các phong cách (styles) cần thiết; do đó, kích thước tệp khá lớn. Vì lý do này, việc sử dụng tệp này trong môi trường sản xuất (production environment) không được khuyến nghị.

hosting.com

SSL miễn phí, CDN Cloudflare, WAF, hơn 40 trung tâm dữ liệu toàn cầu để lựa chọn, độ trễ thấp hơn nhờ vị trí gần, hỗ trợ dịch vụ 24/7/365, hiện có thể tiết kiệm tới 67% chi phí, hỗ trợ xây dựng AI và tối ưu hóa SEO

Truy cập hosting.com

Xây dựng và tối ưu hóa quá trình sản xuất

Trong quá trình phát triển, Tailwind sẽ tạo ra một tệp CSS khổng lồ chứa tất cả các lớp (classes) có thể được sử dụng. Để sẵn sàng cho môi trường sản xuất, cần phải thực hiện quá trình biên dịch (build process) nhằm loại bỏ những lớp không được sử dụng trong các thành phần HTML và JavaScript. tailwind.config.js wp_footer() content Các trường (fields) thông báo cho Tailwind những tệp nào cần được quét để tìm kiếm các lớp (classes) được sử dụng trong ứng dụng.

module.exports = {
  content: ['./src/**/*.{html,js,vue,jsx,tsx}'],
  // ... 其他配置
}

Sau đó, hãy chạy lệnh xây dựng (build command) (ví dụ: npm run buildTailwind CLI hoặc các plugin của PostCSS sẽ tạo ra một tệp CSS được tối ưu hóa, chỉ chứa những lớp (classes) cần thiết.

Kỹ thuật nâng cao và Thực hành tốt nhất

Sau khi nắm vững những kiến thức cơ bản, một số kỹ thuật nâng cao sẽ giúp bạn sử dụng Tailwind một cách hiệu quả và linh hoạt hơn.

Trích xuất thành phần và sử dụng chỉ thị @apply

Mặc dù việc kết hợp các lớp trực tiếp trong HTML là phương thức chính của Tailwind CSS, nhưng khi một sự kết hợp lớp cụ thể (chẳng hạn như một nút có kiểu dáng nhất định) xuất hiện nhiều lần trong dự án, việc viết lại cùng một chuỗi lớp dài sẽ trở nên thừa thãi. Trong trường hợp này, bạn có thể sử dụng các công cụ hoặc cơ chế tự động hóa để giúp bạn quản lý các lớp một cách @apply Hãy trích xuất các lớp thành phần có thể tái sử dụng từ mã CSS của bạn.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

Sau đó, trong HTML chỉ cần sử dụng class="btn-primary" Điều đó là đủ rồi. Một cách khác, phù hợp hơn với triết lý của Tailwind, là sử dụng khả năng tạo thành các thành phần (components) của các framework JavaScript (như React, Vue) để đóng gói các khối giao diện (UI) có thể được tái sử dụng.

Xử lý các trạng thái như hover, focus

Tailwind cung cấp các tiền tố biến thể (variant prefixes) cho nhiều trạng thái tương tác khác nhau, chẳng hạn như… hover:、focus:、active:、disabled:。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  按钮
</button>

Bạn cũng có thể thực hiện điều này bằng cách cấu hình. tailwind.config.js trong variants Một số phần được thiết kế để kích hoạt hoặc vô hiệu hóa các biến trạng thái cụ thể cho các lớp hữu dụng (utility classes).

Sử dụng kết hợp với các framework JavaScript

Tailwind CSS có thể kết hợp hoàn hảo với các framework front-end phổ biến như React, Vue, Angular. Trong React, bạn vẫn có thể sử dụng JSX như bình thường để xây dựng giao diện người dùng, và sau đó áp dụng các quy tắc thiết kế được định nghĩa bởi Tailwind CSS để tạo ra giao diện có tính thẩm mỹ cao và dễ bảo trì hơn. className Trong các thuộc tính (properties), bạn có thể sử dụng các lớp (classes) từ thư viện Tailwind CSS. Để xử lý việc ghép nối các tên lớp một cách động (dynamically), bạn có thể sử dụng các công cụ hoặc kỹ thuật phù hợp, chẳng hạn như các phương thức tính toán hoặc biểu thức ngôn ngữ lập trình clsx 或 classnames Một thư viện công cụ như vậy.

function Button({ isPrimary, children }) {
  const classes = clsx(
    'py-2 px-4 rounded-lg font-semibold',
    isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'
  );
  return <button className={classes}>{children}</button>;
}

Sử dụng các plugin tùy chỉnh để mở rộng chức năng của ứng dụng.

Nếu bạn hoặc nhóm của bạn cần một nhóm các lớp (classes) hữu ích mà không tồn tại sẵn trong Tailwind CSS, bạn có thể viết các plugin tùy chỉnh. Các plugin này hoạt động bằng cách mở rộng khả năng của hệ thống Tailwind CSS bằng cách thêm các định nghĩa lớp mới, các phương thức (methods), hoặc các công c tailwind.config.js Bạn có thể thêm các lớp hữu ích mới, thành phần (components) hoặc kiểu dáng cơ bản (basic styles) vào đây.

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* 隐藏滚动条的 CSS */
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
        },
      })
    })
  ]
}

Tóm lại

Tailwind CSS đã thay đổi hoàn toàn cách các nhà phát triển viết mã CSS bằng cách áp dụng những phương pháp có tính ưu tiên cao. Nó chuyển quyền quyết định về thiết kế từ các bảng định dạng (style sheets) sang ngôn ngữ đánh dấu (markup languages), và thông qua việc kết hợp nhiều lớp chức năng có độ chi tiết cao, Tailwind CSS giúp tăng đáng kể hiệu suất phát triển cũng như tính nhất quán trong thiết kế. Hệ thống cấu hình mạnh mẽ của nó cho phép tùy chỉnh sâu rộng để phù hợp với mọi hệ thống thiết kế, trong khi các tối ưu hóa trong quá trình xây dựng đảm bảo rằng sản phẩm cuối cùng có kích thước gọn nhẹ và hiệu quả. Dù bạn đang phát triển các nguyên mẫu nhanh chóng hay những dự án phức tạp quy mô lớn, Tailwind CSS đều cung cấp một giải pháp về giao diện đẹp, linh hoạt và dễ bảo trì. Việc nắm vững các khái niệm cốt lõi, quy trình làm việc và các kỹ thuật nâng cao của Tailwind CSS sẽ giúp bạn trở nên nổi bật hơn trong lĩnh vực phát triển front-end hiện đại.

FAQ 常见问题

Liệu các kiểu dáng (styles) trong Tailwind CSS có làm “nhiễm bẩn” nội dung HTML không?

Các tên lớp trong Tailwind CSS thực sự khiến mã HTML trở nên có vẻ “chứa nhiều nội dung”, nhưng điều này không phải là dấu hiệu của “nhiễm bẩn về mặt kiểu dáng” theo nghĩa truyền thống. Đây là một thiết kế được thực hiện một cách có chủ đích; nó tập trung logic định dạng vào tầng hiển thị (view layer), loại bỏ gánh nặng về mặt nhận thức khi phải di chuyển giữa CSS và HTML, và đảm bảo sự gắn kết chặt chẽ giữa kiểu dáng (style) và cấu trúc (structure). Điều này lại là một lợi thế trong quá trình phát triển dựa trên các thành phần (component-based development).

Làm thế nào để ghi đè hoặc tùy chỉnh các lớp (classes) mặc định của Tailwind CSS?

Có hai cách chính. Đầu tiên, bạn có thể… tailwind.config.js phần theme.extend Một số giá trị của các thuộc tính có thể được thêm hoặc mở rộng (chẳng hạn như màu sắc, khoảng cách giữa các thành phần), và điều này sẽ tạo ra các lớp (classes) mới trong mã nguồn. Ngoài ra, nếu bạn muốn thay thế hoàn toàn một giá trị mặc định, bạn có thể làm như vậy b theme Một số (chứ không phải tất cả) extendBạn có thể trực tiếp đặt giá trị mới. Đối với trường hợp muốn thay thế toàn bộ giá trị hiện tại, bạn cũng có thể sử dụng cách biểu diễn bằng dấu ngoặc vuông để thêm bất kỳ giá trị nào bạn muốn, ví dụ: top-[117px]。

Sự khác biệt giữa việc sử dụng @apply để trích xuất các thành phần (components) và việc viết mã CSS trực tiếp là gì?

Sử dụng @apply Các lớp được tạo ra từ quá trình trích xuất lệnh (instruction extraction) về cơ bản vẫn là tập hợp các lớp hữu dụng của Tailwind; chúng chịu ảnh hưởng từ cấu hình của Tailwind và cuối cùng sẽ được các công cụ xây dựng (build tools) xử lý. Ngược lại, việc viết mã CSS thuần túy sẽ khiến bạn tách ra khỏi hệ sinh thái của Tailwind. Việc sử dụng quá nhiều các lớp được tạo ra từ quá trình trích xuất lệnh có thể dẫn đến những vấn đề về tính nhất quán và khả năng bảo trì mã ngu @apply Điều này có thể khiến bạn phải quay trở lại cách viết CSS truyền thống, đi ngược lại với nguyên tắc cơ bản của Tailwind là “kết hợp các lớp (classes) trong HTML”. Tôi khuyên bạn chỉ nên sử dụng phương pháp này một cách thận trọng khi một bộ các kiểu dáng cụ thể thực sự được sử dụng lặp đi lặp lại nhiều lần. @apply。

Hiệu năng của Tailwind CSS trong môi trường sản xuất như thế nào?

Sau khi được xây dựng đúng cách và được tối ưu hóa, hiệu suất của Tailwind CSS thực sự rất tuyệt vời. Công cụ xây dựng sẽ quét tất cả các tệp mã nguồn của bạn, xác định những lớp (classes) thực sự được sử dụng, và chỉ tạo ra những lớp đó trong tệp CSS cuối cùng. Điều này giúp tệp CSS được gửi đến người dùng có kích thước 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 chưa được tối ưu hóa, từ đó nâng cao tốc độ tải trang web.

Tailwind CSS có phù hợp để sử dụng cùng với thư viện thành phần giao diện người dùng không?

Điều này phụ thuộc vào từng trường hợp cụ thể. Tailwind vốn dĩ đã là một giải pháp thiết kế giao diện đầy đủ, và thường không cần đến thêm một thư viện thành phần UI khác (chẳng hạn như Material-UI). Tuy nhiên, bạn có thể sử dụng các thư viện thành phần được xây dựng dựa trên Tailwind, như Headless UI (cung cấp các thành phần tương tác không có giao diện trang trí) hoặc DaisyUI (cung cấp các thành phần có giao diện trang trí). Những thư viện này tích hợp hoàn hảo với các chủ đề và lớp công cụ của Tailwind, giúp tăng tốc độ phát triển ứng dụng.