Hướng dẫn sử dụng Framework Tailwind CSS

22/01/2025

Tailwind CSS: Giới thiệu, Ưu điểm, Nhược điểm, Hướng dẫn sử dụng và Ví dụ cụ thể

Tailwind CSS là gì?

Tailwind CSS là một framework CSS tiện ích (utility-first CSS framework) cho phép bạn xây dựng giao diện nhanh chóng bằng cách sử dụng các class sẵn có. Không giống như các framework khác như Bootstrap, Tailwind không cung cấp các thành phần UI dựng sẵn mà cung cấp các tiện ích CSS nhỏ gọn, có thể tùy chỉnh dễ dàng.

Hướng dẫn sử dụng Framework Tailwind CSS

Ưu điểm của Tailwind CSS

Tuỳ chỉnh linh hoạt
- Mọi thành phần giao diện có thể tùy chỉnh mà không cần viết CSS thủ công.
Thúc đẩy hiệu suất làm việc
- Sử dụng các tiện ích CSS nhỏ giúp giảm thời gian phát triển UI.
Hỗ trợ thiết kế responsive tốt
- Cung cấp các class như sm:, md:, lg:, xl: để dễ dàng kiểm soát giao diện trên từng loại màn hình.
Kích thước tệp CSS tối ưu
- Kích thước CSS được giảm xuống tối thiểu bằng cách loại bỏ các class không sử dụng (purge).
Tích hợp với các công cụ hiện đại
- Tích hợp tốt với các framework như React, Vue, và Next.js.

Nhược điểm của Tailwind CSS

Khó đọc và duy trì mã nguồn
- Khi sử dụng nhiều tiện ích, mã HTML có thể trở nên khó đọc do quá dài.
Cần làm quen với class tiện ích
- Đòi hỏi thời gian học để quen với các class và cách sử dụng chúng.
Không có giao diện dựng sẵn
- Bạn phải tự xây dựng mọi thành phần, điều này tốn thời gian nếu không có kinh nghiệm thiết kế UI.

Hướng dẫn sử dụng Tailwind CSS

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

Khởi tạo dự án:

mkdir my-project
cd my-project
npm init -y

Cài đặt Tailwind CSS qua npm:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Cấu hình tailwind.config.js: Mở file tailwind.config.js để điều chỉnh:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tạo file CSS chính:

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

Chạy Tailwind CLI để tạo CSS:

npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch

Bước 2: Sử dụng class Tailwind CSS trong HTML

Thêm class của Tailwind vào các thẻ HTML trong file nguồn.
Tham khảo thêm document trên website Tailwind >>

7 Ví dụ cụ thể với Tailwind CSS

1. Tạo tiêu đề và văn bản cơ bản

<h1 class="text-4xl font-bold text-blue-500">Tiêu đề nổi bật</h1>
<p class="text-lg text-gray-700">Văn bản mô tả</p>

2. Tạo nút bấm

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Bấm vào đây
</button>

3. Bố cục lưới responsive

<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">Cột 1</div>
  <div class="bg-gray-300 p-4">Cột 2</div>
  <div class="bg-gray-400 p-4">Cột 3</div>
</div>

4. Tạo thẻ (card)

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://via.placeholder.com/150" alt="Mô tả ảnh">
  <div class="px-6 py-4">
    <h2 class="text-xl font-bold">Tiêu đề</h2>
    <p class="text-gray-700">Mô tả ngắn gọn.</p>
  </div>
</div>

5. Thanh điều hướng đơn giản

<nav class="bg-gray-800 p-4">
  <ul class="flex space-x-4">
    <li><a href="#" class="text-white hover:text-gray-400">Trang chủ</a></li>
    <li><a href="#" class="text-white hover:text-gray-400">Dịch vụ</a></li>
    <li><a href="#" class="text-white hover:text-gray-400">Liên hệ</a></li>
  </ul>
</nav>

6. Bố cục flexbox

<div class="flex items-center justify-center h-screen">
  <div class="bg-blue-500 text-white p-8 rounded shadow-lg">
    Nội dung trung tâm
  </div>
</div>

7. Tạo biểu mẫu (form)

<form class="space-y-4 max-w-md">
  <div>
    <label class="block text-gray-700">Tên</label>
    <input type="text" class="w-full border-gray-300 rounded-lg">
  </div>
  <div>
    <label class="block text-gray-700">Email</label>
    <input type="email" class="w-full border-gray-300 rounded-lg">
  </div>
  <button class="bg-green-500 hover:bg-green-700 text-white py-2 px-4 rounded">
    Gửi
  </button>
</form>

TAGS: html css

About the Author