Bạn đang tiến rất gần đến đích rồi. Đây là bài học giúp bạn bước ra khỏi “giai đoạn học lẻ tẻ” và tiến vào thế giới làm việc thực tế, nơi dự án có nhiều người cùng tham gia, cấu trúc ngày một phức tạp hơn.
Khi bạn mới học Tailwind, viết vài class trực tiếp trong HTML là đủ. Nhưng khi làm dự án thật, bạn sẽ nhanh chóng đối mặt với:
- Hàng trăm component lặp đi lặp lại
- Style lộn xộn, khó tái sử dụng
- Làm nhóm nhưng không ai biết “class nào là chuẩn”
Lúc này, bạn cần học cách tổ chức Tailwind đúng cách, giống như xây một căn nhà – phải có phòng riêng cho từng phần, có lối đi gọn gàng, có bảng màu rõ ràng, và có nơi để tái sử dụng nội thất (class, component).
Bài học hôm nay sẽ giúp bạn:
- Chia cấu trúc Tailwind trong dự án chuyên nghiệp
- Tổ chức style riêng bằng
@layer,@apply - Quản lý màu sắc, font, spacing, component như một hệ thống
Chia thư mục dự án khoa học
Ví dụ với một dự án dùng Tailwind + Vite hoặc Webpack:
src/
├── assets/
│ └── styles/
│ ├── base.css
│ ├── components.css
│ └── utilities.css
├── components/
│ ├── Button.vue
│ ├── Card.vue
├── pages/
│ └── Home.vue
├── App.vue
└── main.js
Tất cả style Tailwind sẽ nằm ở styles/, chia làm:
base.css: reset, font base, typographycomponents.css: nơi bạn viết class dùng lại (dùng@apply)utilities.css: nếu bạn muốn viết thêm utility tùy chỉnh (ít dùng)
Bạn cũng có thể gộp tất cả vào main.css nếu dự án nhỏ.
Tổ chức style trong Tailwind đúng lớp (layer)
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Inter', sans-serif;
}
}
@layer components {
.btn-primary {
@apply bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700;
}
.card {
@apply bg-white shadow p-6 rounded;
}
}
Việc dùng @layer giúp Tailwind gộp class hợp lý và không bị ghi đè lộn xộn.
Quản lý màu, font, spacing tập trung
Trong tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
brand: {
light: '#FEEBCB',
DEFAULT: '#F59E0B',
dark: '#B45309',
},
},
fontFamily: {
heading: ['"Merriweather"', 'serif'],
body: ['"Inter"', 'sans-serif'],
},
spacing: {
'128': '32rem',
'144': '36rem',
},
}
}
}
Điểm mạnh:
- Tất cả màu, font… có tên rõ ràng (
brand,heading,body) - Toàn team cùng dùng, không cần đoán
#F59E0Blà gì nữa
Dùng component Tailwind cho các khối dùng lại
Viết sẵn các class dùng nhiều thành component riêng:
<!-- components/Button.vue -->
<template>
<button class="btn-primary">
<slot />
</button>
</template>
Tổ chức như thế giúp:
- Code HTML gọn hơn
- Dễ tái sử dụng
- Khi đổi style chỉ cần sửa ở một nơi
Bạn có thể làm tương tự với Card, Badge, Alert, FormInput,…
Đặt quy tắc style để làm nhóm
Khi làm việc theo nhóm, hãy thống nhất:
- Class nào là chuẩn (
.btn,.btn-primary) - Có sử dụng
@applykhông, ở đâu? - Dùng class dài hay component?
- Tên class có viết theo quy tắc không (ví dụ:
card,alert-error,btn-secondary…)
Tốt nhất nên có file README hoặc guideline riêng cho team frontend.
Tổng kết kiến thức
| Mục đích | Kỹ thuật đề xuất |
|---|---|
| Giao diện đồng bộ | Tạo theme trong tailwind.config.js |
| Viết class tái sử dụng | @apply trong @layer components |
| Tổ chức style hợp lý | Chia thành base, components, utilities |
| Dự án lớn gọn gàng | Tách component, chia module rõ ràng |
| Làm nhóm hiệu quả | Có quy ước class, folder, file rõ ràng |
Tóm tắt bài học
- Tailwind không chỉ dành cho dự án nhỏ – nếu biết cách tổ chức, bạn hoàn toàn có thể dùng nó trong hệ thống lớn và teamwork.
- Tách style thành component, quản lý theme, thống nhất quy tắc là yếu tố sống còn để giữ code sạch và dễ bảo trì.
- Việc tổ chức từ đầu tốt sẽ tiết kiệm rất nhiều thời gian về sau.
Bài tiếp theo
Sau khi bạn đã biết cách tổ chức Tailwind ở quy mô lớn, đây là lúc chúng ta… áp dụng mọi thứ đã học vào một bài thực hành lớn!
Trong bài 29, bạn sẽ xây dựng một form liên hệ hoàn chỉnh:
- Giao diện đẹp
- Responsive đầy đủ
- Hiệu ứng rõ ràng
- Có Dark Mode
- Tái sử dụng class
Hẹn gặp bạn trong bài 29: Thực hành – tạo form liên hệ có responsive và hiệu ứng đầy đủ bằng Tailwind CSS.
Đây là lúc bạn biến kỹ năng thành sản phẩm thực tế!
Thảo luận