TailwindCSS toàn tập

TailwindCSS đang trở thành một trong những CSS Framework phổ biến nhất trong thế giới lập trình web hiện đại. Thay vì cung cấp các component dựng sẵn như Bootstrap hay Materialize, Tailwind tiếp cận theo hướng Utility-First, cho phép bạn tùy biến giao diện linh hoạt ngay trong HTML.

Giới thiệu về TailwindCSS

• Lịch sử ra đời: TailwindCSS là một Utility-First CSS Framework được phát triển bởi Adam Wathan và ra mắt lần đầu vào năm 2017. Dự án xuất phát từ mong muốn giải quyết sự cồng kềnh và thiếu linh hoạt của các framework CSS truyền thống.
• Quá trình phát triển: Qua các phiên bản (v1, v2, v3 và v4), Tailwind ngày càng tối ưu hiệu năng nhờ cơ chế JIT (Just-In-Time) compile code siêu tốc, trở thành sự lựa chọn hàng đầu cho các dự án React, Vue, Next.js và Web tĩnh.

Tại sao nên chọn TailwindCSS?

So sánh TailwindCSS và Bootstrap / Traditional CSS:

• CSS truyền thống: Viết file .css riêng, quản lý tên class (BEM), dễ bị trùng lặp hoặc phình to dung lượng.
• Bootstrap: Component có sẵn (Button, Modal), dựng UI nhanh nhưng giao diện dễ bị “trùng lặp” style với các website khác.
• TailwindCSS: Cung cấp các class tiện ích nhỏ (flex, pt-4, text-center), giúp bạn tạo UI độc bản mà không rời khỏi file HTML/JSX.

Ưu điểm:

• Lập trình nhanh hơn, không tốn thời gian nghĩ tên class.
• File CSS đầu ra siêu nhẹ nhờ tự động loại bỏ class không dùng.
• Đảm bảo tính đồng bộ về Design System (Spacing, Color palette).

Nhược điểm:

• File HTML nhìn phức tạp và nhiều chữ do chứa nhiều class.
• Cần thời gian đầu để nhớ các tên class tiện ích.

Cài đặt & Cấu hình

Lựa chọn phiên bản

Tailwind CSS v4 giới thiệu một bước chuyển mình lớn về cách cài đặt và cấu hình theo hướng CSS-First, giúp loại bỏ hầu hết các file cấu hình JavaScript rườm rà của phiên bản v3.

Bảng so sánh nhanh giữa v3 và v4 (với Vite)

Cài đặt với Tailwind CSS v4 (Khuyên dùng)

Cơ bản

• Bước 1: Cài đặt Tailwind v4 và plugin cho Vite

npm install tailwindcss @tailwindcss/vite

• Bước 2: Thêm plugin vào vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

• Bước 3: Khai báo vào file CSS chính (src/style.css).

@import "tailwindcss";

Tùy biến

Trong v4 sẽ sử dụng các CSS Directive sau:

• @utility: Định nghĩa nhanh các utility class tùy chỉnh ngay trong CSS.
• @plugin: Nạp trực tiếp các plugin của Tailwind hoặc plugin bên thứ ba mà không cần file cấu hình JS.
• @theme: Tùy biến màu sắc hay font chữ được thực hiện trực tiếp bên trong này.

@import "tailwindcss";

/* Nạp plugin trực tiếp trong CSS */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

/* Tùy biến Theme trực tiếp bằng khối @theme */
@theme {
  --color-primary: #ff5722;
  --font-display: "Inter", sans-serif;
}

/* Tự định nghĩa utility class mới, ví dụ .tab-highlight */
@utility tab-highlight {
  outline: 2px dashed #ff5722;
  outline-offset: 4px;
}

Cài đặt với Tailwind CSS v3 (Truyền thống)

Cơ bản

• Bước 1: Cài đặt Tailwind v3 cùng PostCSS và Autoprefixer

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• Bước 2: Cấu hình quét file và tùy biến theme trong tailwind.config.js

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  // Tùy biến Theme
  theme: {
    extend: {
      colors: {
        'primary': '#ff5722',
      }
    },
  },
  plugins: [],
}

• Bước 3: Nhập directives vào file CSS chính (src/style.css)

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

Tùy biến

Trong Tailwind CSS v3, bạn không dùng CSS Directives @plugin hay @utility như v4 mà toàn bộ việc này được xử lý trong file cấu hình JavaScript tailwind.config.js. Bạn cần cấu hình khá nhiều vị trí khác nhau:

• Nhập Plugin trong v3: Trong v3, bạn cài gói plugin qua npm (hoặc yarn), sau đó nạp gói đó vào mảng plugins trong tailwind.config.js thông qua hàm require():

Bước 1: Cài đặt Plugin

npm install -D @tailwindcss/typography @tailwindcss/forms

Bước 2: Nạp vào tailwind.config.js

module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [
    // Nạp plugin chính thức/bên thứ ba
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

• Tạo Utility Class tùy chỉnh trong v3: Có 2 cách để tạo utility class trong v3:

Cách 1: Dùng hàm plugin() trong tailwind.config.js (Khuyên dùng trong JS)

const plugin = require('tailwindcss/plugin')

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [
    // Nạp utility class tùy chỉnh
    plugin(function({ addUtilities }) {
      addUtilities({
        '.tab-highlight': {
          'outline': '2px dashed #ff5722',
          'outline-offset': '4px',
        },
      })
    })
  ],
}

Cách 2: Viết trong file CSS với Directive @layer utilities

Nếu muốn viết trực tiếp trong file CSS (src/style.css), v3 dùng cú pháp @layer utilities:

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

@layer utilities {
  .tab-highlight {
    outline: 2px dashed #ff5722;
    outline-offset: 4px;
  }
}

Tái sử dụng class với @apply (Áp dụng cho cả v3 & v4)

Nếu có các component lặp lại nhiều class (như button), bạn có thể gộp chúng lại trong file CSS bằng @apply:

.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Các khái niệm & Tính năng cốt lõi

• Utility Classes:
  • Layout: flex, grid, block, hidden
  • Spacing: p-4 (padding), m-2 (margin), gap-4
  • Typography: text-xl, font-bold, text-blue-600
• Responsive Design: Thiết kế Mobile-First cực dễ dàng bằng cách thêm prefix breakpoint:
  • w-full md:w-1/2 lg:w-1/3 (Mặc định full width, màn trung bình 50%, màn lớn 33.3%).
• State Modifiers:
  • Hover & Focus: bg-blue-500 hover:bg-blue-700 focus:ring-2
• Dark Mode:
  • Chuyển đổi giao diện sáng/tối chỉ với prefix dark: (Ví dụ: bg-white dark:bg-gray-900).

Ứng dụng thực tế

Ví dụ tạo một User Profile Card đơn giản:

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5 p-6 border border-gray-100">
  <div class="flex items-center space-x-4">
    <img class="h-12 w-12 rounded-full" src="avatar.jpg" alt="User Avatar">
    <div>
      <div class="text-xl font-medium text-black">TienDev</div>
      <p class="text-gray-500 text-sm">Frontend Developer</p>
    </div>
  </div>
  <button class="mt-4 w-full bg-indigo-500 text-white py-2 px-4 rounded-lg hover:bg-indigo-600 transition duration-200">
    Follow
  </button>
</div>

Hệ sinh thái

Thư viện UI nổi bật

Một trong những lý do khiến TailwindCSS bùng nổ là nhờ hệ sinh thái thư viện UI cực kỳ phong phú. Thay vì phải tự viết từng class từ đầu, bạn có thể kết hợp với các công cụ sau:

• shadcn/ui (Xu hướng hàng đầu): Thư viện bộ component React/Next.js không nằm trong gói npm mà cho phép copy-paste trực tiếp code vào dự án. Giúp bạn toàn quyền sở hữu và tùy biến giao diện bằng Tailwind.
• daisyUI: Thêm các class ngữ nghĩa (như btn, card, modal) trực tiếp dưới dạng plugin Tailwind. Giúp code HTML ngắn gọn như Bootstrap nhưng vẫn giữ trọn sức mạnh của Tailwind.
• Headless UI / Catalyst: Thư viện component do chính nhóm tác giả Tailwind CSS phát triển, xử lý sẵn các logic tương tác phức tạp và chuẩn accessibility (A11y).
• Flowbite / Preline UI: Cung cấp hàng trăm mẫu UI component dựng sẵn (Forms, Navbar, Sidebar…), rất phù hợp để dựng nhanh các trang Dashboard hay Marketing.

So sánh Thư viện UI dựa trên TailwindCSS với các Thư viện UI truyền thống

Khi phát triển dự án thực tế, thay vì dùng TailwindCSS thuần, lập trình viên thường kết hợp thêm các thư viện UI xây dựng trên TailwindCSS (như shadcn/ui, daisyUI, Flowbite) để tăng tốc độ phát triển.

Vậy hướng đi này có điểm gì khác biệt so với việc dùng các thư viện UI truyền thống (MUI, Ant Design, Bootstrap)?

Lời kết

TailwindCSS không chỉ thay đổi cách chúng ta viết style, mà còn định hình lại tư duy thiết kế giao diện: nhanh hơn, tối giản hơn và tự do hơn.

Việc làm chủ TailwindCSS và cập nhật những cải tiến mới nhất sẽ giúp bạn tối ưu triệt để hiệu suất phát triển dự án. Hy vọng bài viết này đã mang lại cái nhìn toàn diện và giúp bạn tự tin ứng dụng TailwindCSS vào các sản phẩm thực tế tiếp theo!