Hướng dẫn bắt đầu với Tailwind CSS: Xây dựng trang web hiện đại, đáp ứng từ con số không

Tailwind CSS là gì

Tailwind CSS là một framework CSS tập trung vào tính linh hoạt và khả năng mở rộng. Nó giúp các nhà phát triển xây dựng giao diện người dùng tùy chỉnh một cách nhanh chóng bằng cách cung cấp một loạt các lớp hữu ích (Utility Classes) có thể kết hợp với nhau. 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ó kiểu dáng cố định. Thay vào đó, nó chỉ cung cấp những lớp nhỏ, có chức năng đơn giản và rõ ràng. text-center、bg-blue-500、p-4 v.v.

开发者通过直接在 HTML 的 class 属性中组合这些类来构建任何设计。这种方法消除了在 CSS 文件和 HTML 文件之间频繁切换的需要，将样式直接写在标记语言中，从而极大地提高了开发速度。同时，它通过约束设计 token（如颜色、间距、字体大小），强制执行了设计系统的一致性。

Lợi thế cốt lõi của nó nằm ở mức độ tùy chỉnh cao và tính linh hoạt tuyệt vời. Điều này được thực hiện thông qua các tệp cấu hình (configuration files). tailwind.config.jsBạn có thể dễ dàng xây dựng hệ thống thiết kế riêng của mình, bao gồm bảng màu, tỷ lệ khoảng cách, các điểm đánh dấu (breakpoints), v.v. CSS được tạo ra sẽ chỉ chứa các lớp (classes) mà bạn thực sự sử dụng, giúp giảm kích thước của tệp sản phẩm cuối cùng xuống mức tối ưu.

Đọc thêm Hướng dẫn toàn diện xây dựng website: Từ con số 0 đến vận hành, hiện thực hóa quy trình xây dựng website hiện đại và hiệu quả。

Cách bắt đầu cài đặt và cấu hình

Để bắt đầu sử dụng Tailwind CSS, trước tiên bạn cần tích hợp nó vào dự án của mình. Cách thức được khuyến nghị nhất là cài đặt thông qua Node.js và npm (hoặc yarn).

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 →

Cài đặt gói cốt lõi qua npm

Trước tiên, hãy sử dụng npm để khởi tạo dự án (nếu chưa được khởi tạo), sau đó cài đặt Tailwind CSS cùng các phụ thuộc của nó. Chạy các lệnh sau trong thư mục gốc của dự án của bạn:

npm install -D tailwindcss postcss autoprefixer

Lệnh này sẽ cài đặt chính bộ công cụ Tailwind CSS, PostCSS (dụng để xử lý và biến đổi mã CSS), và Autoprefixer (công cụ tự động thêm các tiền tố của nhà sản xuất trình duyệt vào mã CSS).

Tạo tệp cấu hình

Tiếp theo, hãy tạo các tệp cấu hình mặc định cho Tailwind CSS và PostCSS:

npx tailwindcss init -p

Lệnh này sẽ tạo ra hai tệp tin:tailwind.config.js 和 postcss.config.jsTrong đó tailwind.config.js Đây là nơi chính để bạn tự thiết kế và tùy chỉnh hệ thống của mình.

Đọc thêm Hướng dẫn xây dựng website: Quy trình hoàn chỉnh và công nghệ cốt lõi để thiết lập một website hiệu suất cao từ con số 0。

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

Để Tailwind có thể tự động loại bỏ các kiểu dáng (styles) không được sử dụng (còn gọi là quá trình “Tree Shaking”), bạn cần phải… tailwind.config.js Trong đoạn mã trên, các đường dẫn tới tất cả các tệp nguồn chứa tên lớp Tailwind đã được chỉ định. Hãy tìm chúng. content Chọn các trường cần thiết và thực hiện cấu hình cho chúng:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 根据你的项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

Nhập kiểu cơ bản

Cuối cùng, trong tệp CSS chính của bạn (ví dụ: src/input.css 或 styles/globals.css), hãy sử dụng @tailwind Lệnh này sẽ bao gồm tất cả các thành phần (layers) của Tailwind CSS:

/* input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Sau đó, trong quy trình xây dựng của bạn (ví dụ: sử dụng Vite, Webpack hoặc trực tiếp thông qua CLI), hãy xử lý tệp CSS này để tạo ra bảng định dạng cuối cùng.

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

Core Concepts and Practical Classes

Để hiểu rõ về Tailwind CSS, điều quan trọng nhất là nắm vững quy tắc đặt tên các lớp (classes) hữu dụng và các phương pháp thiết kế thích ứng (responsive design) của nó.

Quy tắc đặt tên lớp tiện ích

Các tên lớp hữu ích trong Tailwind tuân theo một mô hình trực quan:{属性}{方向}-{尺寸}Ví dụ:
* mt-4：margin-top: 1rem; Trong Tailwind CSS, 1 đơn vị (unit) thường tương đương với 0.25rem; vì vậy, 4 đơn vị tương đương với 1rem.
* px-6：padding-left: 1.5rem; 和 padding-right: 1.5rem;。
* bg-gray-100：background-color: #f3f4f6;。
* text-xl：font-size: 1.25rem; line-height: 1.75rem;。
* rounded-lg：border-radius: 0.5rem;。

Cách đặt tên này giúp mục đích sử dụng các kiểu dáng (styles) trở nên rất rõ ràng khi viết HTML, và không cần phải nhớ đến các tên lớp CSS được tự định nghĩa.

Đọc thêm Hướng dẫn toàn diện về quy trình xây dựng website hiện đại: Phân tích thực hành kỹ thuật và chiến lược từ con số 0 đến khi triển khai。

Thiết kế đáp ứng và tiền tố điểm ngắt

Tailwind sử dụng một hệ thống điểm đánh dấu (breakpoints) dựa trên nguyên tắc “di động được ưu tiên” (mobile-first). Các lớp (classes) mặc định có sẵn phù hợp với mọi kích thước màn hình (kể cả thiết bị di động). Nếu bạn muốn áp dụng các phong cách thiết kế cho màn hình có kích thước lớn hơn, bạn cần thêm tiền tố
Các điểm dừng mặc định bao gồm:
* sm: (640px)
* md: (768px)
* lg: (1024px)
* xl: (1280px)
* 2xl: (1536px)

Ví dụ,<div class="text-center md:text-left"> Điều này có nghĩa là: Văn bản sẽ được căn lề sang trái trên các màn hình có kích thước trung bình và lớn hơn, còn trên các màn hình có kích thước nhỏ hơn, văn bản sẽ được căn giữa.

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

Biến thể trạng thái và lớp giả

Tailwind cung cấp một loạt các tiền tố (prefix) để xử lý các trạng thái khác nhau của các phần tử trên trang web, chẳng hạn như khi người dùng di chuột lên chúng (hover), khi chúng nhận được sự chú ý (focus), hoặc khi chúng được kích hoạt (activated). Các tiền tố này được kết hợp với các lớp (classes) b
Các tiền tố biến thể thường được sử dụng bao gồm:
* hover: (:hover)
* focus: (:focus)
* active: (:active)
* disabled: (:disabled)

Ví dụ,<button class="bg-blue-500 hover:bg-blue-700"> Một nút màu xanh mặc định sẽ được tạo ra; màu của nút sẽ chuyển thành màu xanh đậm khi người dùng di chuột lên nó. Bạn có thể thay đổi các thiết lập này trong tệp cấu hình (configuration file). theme.extend Một số biến thể này được tùy chỉnh theo nhu cầu cụ thể.

Xây dựng một component thẻ đáp ứng

Bây giờ, hãy áp dụng những kiến thức đã học vào thực tế và xây dựng một thành phần thẻ (card) hiện đại, có khả năng thích ứng với nhiều kích thước màn hình khác nhau. Thẻ này sẽ bao gồm hình ảnh, tiêu đề, mô tả và một nút bấm, và sẽ tự động điều chỉnh cách bố trí một cách linh hoạt tùy

Cấu trúc HTML cơ bản để tạo một “card” (tấm thẻ thông tin):

Chúng ta sẽ bắt đầu với những thành phần cơ bản nhất: các container (hộp chứa) và nội dung (dữ liệu được lưu trữ bên trong container). Hãy cùng tạo một container đầu tiên nhé. .html Tệp tin, và hãy viết cấu trúc như sau:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Hình ảnh thẻ">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Tiêu đề thẻ trong Tailwind CSS</div>
    <p class="text-gray-700 text-base">
      Đây là một đoạn văn mô tả về tấm thẻ này; nó giới thiệu nội dung chính hoặc các đặc điểm của tấm thẻ đó. Bạn có thể thực hiện thiết kế tương tự một cách nhanh chóng bằng cách sử dụng Tailwind CSS.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Tìm hiểu thêm
    </button>
  </div>
</div>

Lúc này, bạn đã có một mẫu thẻ cơ bản: nền màu trắng, góc tròn, hiệu ứng bóng đổ, hình ảnh và nút bấm.

Thêm tính năng điều chỉnh bố cục thích ứng với các thiết bị khác nhau (responsive layout adjustment).

Chúng tôi muốn các thẻ được xếp chồng lên nhau theo chiều dọc trên các thiết bị di động, và có thể được hiển thị song song trên màn hình cỡ trung bình (như máy tính bảng) và các loại màn hình lớn hơn. Chúng ta có thể sử dụng công nghệ Flexbox và các điểm đánh dấu (breakpoints) để thực hiện điều này. Chúng ta sẽ đặt các thẻ vào bên trong một container Flex.

<div class="container mx-auto p-4">
  <div class="flex flex-col md:flex-row gap-6"> <!-- 响应式 Flex 方向 -->
    <!-- 卡片 1 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Hình ảnh thẻ">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Thẻ một tiêu đề</div>
        <p class="text-gray-700 text-base mb-4">
          Mô tả nội dung của Thẻ Một.
        </p>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Thao tác một
        </button>
      </div>
    </div>
    <!-- 卡片 2 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/401/300" alt="Hình ảnh thẻ">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">Tiêu đề Thẻ Hai</div>
        <p class="text-gray-700 text-base mb-4">
          Mô tả nội dung của Thẻ Hai.
        </p>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          Thao tác hai
        </button>
      </div>
    </div>
  </div>
</div>

Điểm quan trọng:
1. flex flex-col md:flex-rowThe outer container is arranged vertically by default.flex-colTrên màn hình có kích thước trung bình, các thành phần sẽ được sắp xếp theo chiều ngang.md:flex-row）。
2. gap-6Thêm khoảng cách giữa các phần tử con trong Flex.
3. flex-1Khi hai thẻ được sắp xếp theo bố cục ngang, hãy chia đều không gian giữa chúng.
4. w-full md:w-autoNút bấm chiếm toàn bộ chiều rộng trên các thiết bị di động, và trở lại chiều rộng tự động trên các màn hình có kích thước lớn hơn mức trung bình.

Các kiểu dáng khi nhấp chuột vào (hover) và khi đối tượng nhận được sự chú ý (focus) có thể được tùy chỉnh theo ý muốn.

Để tương tác mượt mà hơn, chúng ta có thể thêm hiệu ứng hover cho chính thùng chứa thẻ và tối ưu hóa kiểu focus cho nút.

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1 transition duration-300 ease-in-out hover:shadow-2xl hover:-translate-y-1">
  ...
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out w-full md:w-auto">
    Tìm hiểu thêm
  </button>
  ...
</div>

Ở đây, chúng ta đã thêm những nội dung sau:
* transition duration-300 ease-in-outThêm hiệu ứng chuyển đổi mượt mà cho tất cả các thay đổi về thuộc tính của thẻ (card).
* hover:shadow-2xl hover:-translate-y-1Khi con trỏ được di chuột lên trên đối tượng, bóng đổ sẽ mở rộng và di chuyển nhẹ lên trên, tạo ra hiệu ứng “nổi lên”.
* focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50Loại bỏ đường viền tập trung mặc định của trình duyệt và thay thế nó bằng vòng tròn màu xanh tự định, phù hợp hơn với thiết kế.

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 tiếp cận dựa trên các lớp (classes) có tính ứng dụng cao và được sắp xếp theo thứ tự ưu tiên. Nó loại bỏ những rắc rối liên quan đến việc chuyển đổi giữa các tệp mã, đồng thời tích hợp các quyết định thiết kế trực tiếp vào HTML, từ đó mang lại hiệu suất phát triển vô cùng cao. Từ quá trình cài đặt và cấu hình, hiểu rõ các quy tắc đặt tên trực quan của Tailwind CSS, cho đến việc sử dụng các điểm đánh dấu (breakpoints) và các biến trạng thái (state variables) để xây dựng các thành phần phức tạp, toàn bộ quy trình phát triển thể hiện sự tự do trong khuôn khổ những ràng buộc được đặt ra.

Thông qua việc xây dựng một component thẻ (card component) có khả năng thích ứng với các thiết bị khác nhau, chúng ta đã hiểu được cách kết hợp các lớp (classes) có chức năng cụ thể thành một thiết kế hoàn chỉnh, đồng thời dễ dàng triển khai các hiệu ứng tương tác và đảm bảo tính tương thích trên nhiều nền tảng. Mặc dù ban đầu có thể cảm thấy các tên lớp (class names) khá dài và phức tạp, nhưng một khi đã quen với cấu trúc này, tốc độ phát triển sẽ được cải thiện đáng kể. Tailwind CSS không chỉ là một framework CSS mà còn là một hệ thống thiết kế mạnh mẽ và có thể tùy chỉnh được, phù hợp với mọi khía cạnh từ việc thiết kế nguyên mẫu (prototype design) đến các dự án sản xuất quy mô lớn.

FAQ 常见问题

CSS file do Tailwind CSS tạo ra có lớn không?

Không. Đây chính là một trong những ưu điểm nổi bật nhất của Tailwind CSS. Khi thực hiện quá trình xây dựng sản phẩm (production build), Tailwind sẽ chạy một công đoạn gọi là “Purge” (trong phiên bản v3.0 và các phiên bản sau được gọi là “Content Analysis”). Công đoạn này sẽ quét tất cả các tệp mẫu (như HTML, JSX, Vue) được chỉ định trong tập lệnh cấu hình, xác định những lớp (classes) đã được sử dụng, và chỉ đưa những lớp đó vào tệp CSS cuối cùng.

Các kiểu (styles) không được sử dụng sẽ bị loại bỏ hoàn toàn; do đó, tệp CSS cuối cùng thường chỉ có kích thước từ vài KB đến vài chục KB, nhỏ hơn nhiều so với các tệp CSS được tạo thủ công hoặc sử dụng các thư viện thành phần truyền thống. Bạn có thể điều này bằng cách cấu hình chúng một cách chính xác. content Con đường này nhằm đảm bảo rằng quá trình phân tích diễn ra một cách chính xác và không có sai sót.

Nếu các tên lớp (class) trong HTML quá dài và phức tạp, liệu điều đó có làm cho mã nguồn trở nên khó đọc hơn không?

这是一个常见的初次印象。确实，HTML 中的 class 属性会变得很长。然而，许多开发者认为这是一种权衡，并且带来了几个好处：首先，你无需为类名起名而苦恼（如 card-container-inner-wrapperVà bạn cũng không cần phải liên tục chuyển giữa các tệp CSS và HTML để tìm kiếm định nghĩa về kiểu dáng (styles); tất cả các định nghĩa về kiểu dáng đều được trình bày một cách rõ ràng ngay trên các phần tử (elements) tương ứng.

Thứ hai, đối với việc hợp tác nhóm, công cụ này cung cấp một ngôn ngữ thiết kế thống nhất, giúp những người mới tham gia cũng có thể nhanh chóng hiểu được ý định của các thiết kế. Để nâng cao độ dễ đọc, bạn có thể sử dụng… @apply Các chỉ thị này giúp tách các lớp hữu ích thường được sử dụng ra khỏi mã nguồn chính và đưa chúng vào tệp CSS dưới dạng các lớp thành phần tùy chỉnh. Điều này giúp việc viết mã trở nên dễ dàng và thuận tiện hơn. Ngoài ra, bạn cũng có thể sử dụng các tiện ích mở rộng của trình soạn thảo (chẳng hạn như Tailwind CSS IntelliSense) để nhận được tính năng tự động hoàn thành câu lệnh và hiển thị màu sắc phân biệt các phần cấu trúc mã

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 và thư viện front-end hiện đại. Về bản chất, nó chỉ tạo ra mã CSS mà không phụ thuộc vào bất kỳ môi trường chạy JavaScript cụ thể nào.

Trong các framework như React, Vue, Angular, Svelte, bạn có thể sử dụng các tên lớp (class names) của Tailwind giống như trong HTML thông thường. Cộng đồng cũng cung cấp các plugin và công cụ chính thức hoặc của bên thứ ba dành riêng cho những framework này. @headlessui/react(Sản phẩm chính thức của Tailwind, cung cấp các thành phần tương tác không cần thiết kế sẵn) Có thể kết hợp hoàn hảo với các kiểu dáng bạn tạo bằng Tailwind. Chỉ cần đảm bảo rằng quy trình xây dựng của bạn (chẳng hạn Vite, Webpack) đã được cấu hình đúng cách để sử dụng PostCSS và Tailwind.

Làm thế nào để tùy chỉnh màu sắc và khoảng cách của giao diện (theme colors and spacing)?

Tất cả các thiết lập tùy chỉnh đã được thực hiện. tailwind.config.js phần theme Một số tính năng của Tailwind CSS được triển khai thông qua hai chiến lược chính: “mở rộng (extend)” và “ghi đè (override)”. Nếu bạn muốn thêm các giá trị mới mà vẫn giữ nguyên các giá trị mặc định, bạn nên sử dụng chiến lược “mở rộng” (extend). extend。

Ví dụ, để thêm một màu sắc đặc trưng của thương hiệu và điều chỉnh tỷ lệ khoảng cách giữa các thành phần trên trang:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Sau khi cấu hình xong, bạn có thể sử dụng nó ngay lập tức. bg-brand 和 p-128 Đây là loại lớp (class) cần thiết. Nếu bạn muốn thay thế hoàn toàn bảng màu (palette) hoặc thang đo khoảng cách (spacing scale) mặc định, hãy đơn giản đặt định nghĩa mới vào vị trí tương ứng. theme Dưới, chứ không phải… extend Tailwind CSS có hệ thống cấu hình rất linh hoạt, cho phép bạn tạo ra một hệ thống thiết kế hoàn toàn theo ý muốn của mình.