Hướng dẫn Nhập môn và Thực hành Tailwind CSS: Xây dựng giao diện đáp ứng hiện đại 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 sử dụng thực tế. Nó cung cấp một số lượng lớn các lớp hữu ích (Utility Classes) có thể kết hợp với nhau, giúp các nhà phát triển xây dựng nhanh chóng các 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 được thiết kế sẵn – Tailwind CSS không cung cấp bất kỳ thành phần nào có chức năng đầy đủ; thay vào đó, nó cung cấp những lớp CSS có cấu trúc nhỏ gọn và có thể được sử dụng trực tiếp trong mã HTML để định dạng giao diện.

Triết lý cốt lõi của nó là “Tính hữu dụng được ưu tiên”. Điều này có nghĩa là bạn không cần phải liên tục chuyển đổi giữa các tệp CSS và HTML, cũng không cần phải mất nhiều công sức để đặt tên cho các thành phần (như các lớp trong mã nguồn). .card__header--activeBạn chỉ cần kết hợp một loạt các lớp công cụ mô tả (tool classes) lại với nhau để thực hiện bất kỳ thiết kế nào. Ví dụ, để tạo một tấm thẻ (card) với các góc tròn, độ dày nội dung (padding) và hiệu ứng bóng (shadow), bạn chỉ cần viết mã tương ứng. class="rounded-lg p-6 shadow-md"Phương pháp này đã nâng cao đáng kể hiệu quả phát triển và đảm bảo tính nhất quán về thiết kế (phong cách trình bày).

Thiết lập môi trường và cấu hình cơ bản

Có nhiều cách để bắt đầu sử dụng Tailwind CSS, nhưng phổ biến nhất là thông qua công cụ dòng lệnh của nó để tích hợp với quy trình xây dựng dự án.

Đọc thêm Khám phá tiềm năng của Tailwind CSS: Hướng dẫn thực tế từ cơ bản đến nâng cao。

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

Trước tiên, bạn cần cài đặt Tailwind CSS cùng các phụ thuộc của nó thông qua npm hoặc yarn. Thực hiện các lệnh sau trong thư mục gốc của dự án của bạn:

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 →

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Việc này sẽ cài đặt Tailwind CSS, PostCSS (dùng để xử lý các tập tin CSS), và Autoprefixer – công cụ tự động thêm các tiền tố cần thiết cho các trình duyệt.npx tailwindcss init lệnh sẽ tạo ra một tệp cấu hình mặc định tailwind.config.js。

Cấu hình đường dẫn nội dung và tạo ra mã CSS

Tiếp theo, bạn cần thực hiện các bước cấu hình cần thiết. tailwind.config.js Tệp tin, chỉ định những tệp nào Tailwind nên quét để tạo ra các kiểu dáng tương ứng. Trong content Thêm đường dẫn tới tệp mẫu của bạn vào mảng.

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

Sau đó, hãy tạo một tệp CSS chính (ví dụ: main.css). src/input.cssVà thêm các lệnh (instructions) của Tailwind vào đó.

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

Cuối cùng, hãy chạy quá trình xây dựng thông qua dòng lệnh để chuyển đổi định dạng CSS mà bạn đã nhập thành tệp định dạng có thể sử dụng ngay.

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

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

Bây giờ, bạn có thể nhúng tệp đã tạo vào HTML ./dist/output.css Bạn đã tải về tệp tin cần thiết và bắt đầu sử dụng các lớp hữu ích (utility classes) của Tailwind CSS.

Các lớp tiện ích cốt lõi và thiết kế đáp ứng

Các lớp hữu ích (utility classes) của Tailwind CSS bao phủ gần như tất cả các thuộc tính CSS, đồng thời tuân theo một hệ thống đặt tên và các quy ước thiết kế rất chặt chẽ.

Tổng quan nhanh về các lớp tiện ích thường dùng

Các công cụ thường được đặt tên theo trực tiếp các thuộc tính CSS và sử dụng các viết tắt. Ví dụ:
* 间距：p-4 padding: 1rem;, m-2 (margin: 0.5rem);, space-x-4 (Khoảng cách ngang giữa các phần tử con).
* 排版：text-lg (Kích thước chữ), font-bold (Độ đậm của chữ), text-center (Văn bản được căn chỉnh.)
* 颜色：bg-blue-500 (Màu nền), text-gray-800 (Màu chữ), border-red-300 (Màu của đường viền).
* 布局：flex, items-center (align-items: center);, justify-between (justify-content: space-between).
* 尺寸：w-64 (Rộng: 16rem), h-full (Chiều cao: 100%).
* 效果：rounded (Góc tròn), shadow (Shadow), opacity-50 (Độ trong suốt).

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

Thực hiện bố cục đáp ứng

Tailwind sử dụng một hệ thống điểm phân cắt (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 trong Tailwind được thiết kế dành riêng cho thiết bị di động; để áp dụng các phong cách thiết kế đó trên màn hình lớn hơn, bạn cần thêm các tiền tố phản ứng (responsive prefixes) t
Các tiền tố điểm dừng (breakpoint prefixes) bao gồm:sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px).

Ví dụ, đoạn mã sau tạo ra một bố cục với các thành phần được xếp chồng lên nhau theo mặc định và được trình bày song song trên màn hình cỡ vừa:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4 bg-blue-100">Nội dung bên trái</div>
  <div class="w-full md:w-1/2 p-4 bg-green-100">Nội dung bên phải</div>
</div>

Bằng cách kết hợp các tiền tố này, bạn có thể dễ dàng xây dựng các giao diện phản ứng linh hoạt (responsive interfaces) phù hợp với mọi kích thước màn hình.

Đọc thêm Hướng dẫn Tối thượng về Tailwind CSS: Từ Cơ bản đến Thành thạo, Xây dựng Website Hiện đại。

Thực hành: Xây dựng một thành phần thanh điều hướng (navigation bar)

Hãy cùng vận dụng những gì chúng ta đã học bằng cách xây dựng một thanh điều hướng thích ứng (responsive navigation bar) phổ biến. Thanh điều hướng này sẽ được hiển thị theo dạng ngang trên màn hình lớn, và khi được thu nhỏ (trên màn hình nhỏ), nó sẽ tự động chuyển thành dạng menu

Viết cấu trúc cơ bản và mã định dạng (style)

Trước tiên, chúng ta tạo cấu trúc HTML cho thanh điều hướng (navigation bar) và áp dụng các kiểu dáng cơ bản (basic styles) cho nó.

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

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">Thương hiệu của tôi</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Trang chủ</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Về chúng tôi</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dịch vụ</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Liên hệ</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">Mở menu chính</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Lúc này, quá trình điều hướng trên giao diện máy tính đã hoàn tất. Chúng ta sử dụng… hidden md:block Hãy chỉ hiển thị các liên kết điều hướng trên màn hình nền khi kích thước màn hình đạt mức trung bình trở lên.

Thêm tính tương tác và menu di động

Để hiển thị menu khi người dùng nhấp vào nút trên thiết bị di động, chúng ta cần sử dụng một chút JavaScript. Ở đây, chúng ta sẽ sử dụng JavaScript nguyên bản để thay đổi class của phần tử kiểm soát việc hiển thị menu.
Trước tiên, hãy thêm các ID cho các nút menu và nội dung menu trên thiết bị di động, sau đó sửa đổi các nút menu để chúng có thể kích hoạt các hàm tương ứng.

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Trang chủ</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Về chúng tôi</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Dịch vụ</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Liên hệ</a>
  </div>
</div>

Sau đó, hãy thêm đoạn mã script ở phía cuối trang.

<script>
  const menuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

Đến đây, một thanh điều hướng thích ứng (responsive navigation bar) hoàn chỉnh về mặt chức năng đã được xây dựng xong. Bằng cách kết hợp các lớp (classes) hữu ích khác nhau, chúng ta đã tạo ra thành phần này mà không cần phải viết một dòng CSS tùy chỉnh nào cả.

Tóm lại

Tailwind CSS đã thay đổi hoàn toàn cách các nhà phát triển thiết kế giao diện bằng triết lý “tính hữu dụng được ưu tiên hàng đầu” của mình. Nó chuyển việc đưa ra các quyết định về kiểu dáng từ các tệp CSS sang các mẫu HTML, và thông qua việc kết hợp các lớp công cụ có độ chi tiết cao, Tailwind giúp nâng cao đáng kể hiệu quả phát triển cũng như tính nhất quán trong thiết kế. Từ việc cấu hình môi trường, sử dụng các lớp công cụ cốt lõi, cho đến hệ thống đánh dấu phản ứng (responsive breakpoints) và việc xây dựng các thành phần giao diện thực tế, Tailwind cung cấp một quy trình phát triển giao diện hiện đại, toàn diện và hiệu quả.

Mặc dù ban đầu bạn cần ghi nhớ một lượng lớn tên lớp (class names), nhưng quy tắc đặt tên trực quan và tài liệu hướng dẫn tốt sẽ giúp bạn nhanh chóng làm quen với công cụ này. Đối với các nhóm và dự án đặt trọng tâm vào tốc độ phát triển, tính tự do trong thiết kế và việc kiểm soát kích thước gói mã nguồn (code bundle), Tailwind CSS chắc chắn là một giải pháp mạnh mẽ và hiệu quả.

FAQ 常见问题

Các tệp tin định dạng CSS của Tailwind CSS có thể khá lớn không?

Không. Trong môi trường sản xuất, Tailwind CSS sử dụng công nghệ PurgeCSS (hiện được gọi là Content Scanning). Công nghệ này sẽ phân tích các tệp trong dự án của bạn và chỉ đóng gói những lớp (classes) thực sự được sử dụng vào tệp CSS cuối cùng. Điều này giúp đảm bảo rằng tệp CSS được tạo ra rất gọn nhẹ, thường chỉ có kích thước từ vài KB đến vài chục KB.

So với Bootstrap, những ưu điểm chính của Tailwind CSS là gì?

Tailwind CSS mang lại mức độ tự do tùy chỉnh cao hơn so với Bootstrap. Bootstrap cung cấp các thành phần được thiết kế sẵn với giao diện nhất định; để tùy chỉnh chúng, bạn cần phải thay đổi một lượng lớn mã CSS. Ngược lại, Tailwind cung cấp các kiểu dáng “nguyên thủy” (raw styles) mà bạn có thể kết hợp lại với nhau để tạo ra những thành phần phù hợp hoàn toàn với thiết kế ban đầu. Điều này giúp bạn tránh phải đối mặt với những mã CSS mặc định của framework, đồng thời giảm bớt tình trạng lãng phí mã nguồn do việc phải thay thế quá nhiều phần trong mã CSS.

Trong các dự án nhóm, làm thế nào để đảm bảo tính nhất quán của mã CSS được viết bằng Tailwind CSS?

Bạn có thể kết hợp sử dụng tệp cấu hình của Tailwind CSS với các tiện ích mở rộng (plugins) của IDE để tăng hiệu quả trong quá trình phát triển ứng dụng. tailwind.config.js Các thông số thiết kế như màu sắc, khoảng cách giữa các thành phần trên trang, và kiểu chữ của dự án được định nghĩa một cách thống nhất. Các thành viên trong nhóm có thể sử dụng các tiện ích mở rộng chính thức cho VS Code hoặc IntelliJ IDE; những tiện ích này cung cấp chức năng tự động hoàn thành lệnh, hiển thị mã nguồn bằng màu sắc khác nhau (để phân biệt các loại cấu trúc), và hiển thị trước hình ảnh khi con trỏ chuột được di chuyển lên các thành phần trong mã nguồn. Những tính năng này giúp giảm

Làm thế nào để xử lý các trạng thái hiển thị khi nhấp chuột (hover) hoặc khi nhấn vào đối tượng (focus) phức tạp trong Tailwind CSS?

Tailwind CSS cung cấp nhiều tiền tố (prefixes) phong phú để định danh các biến thể trạng thái (state variants), chẳng hạn như… hover:, focus:, active:, disabled: V.v. Bạn có thể dễ dàng thêm chúng trước bất kỳ lớp công cụ (tool class) nào. Ví dụ:hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 Bạn có thể định nghĩa màu nền của một nút khi người dùng di chuột lên nó (hiệu ứng “hover”) và đường viền hình vòng khi nút đó nhận được sự chú ý từ người dùng (hiệu ứng “focus”).