Tạo file tailwind.config.js tùy chỉnh
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981',
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
},
},
plugins: [],
}Công cụ Tailwind Config Generator giúp bạn tạo file tailwind.config.js với các tùy chỉnh phổ biến nhất: custom colors (primary, secondary), font family, breakpoints responsive, dark mode, và prefix. Thay vì phải đọc documentation và viết config thủ công, bạn chỉ cần điều chỉnh các options trực quan và copy config đã được generate. Đặc biệt hữu ích khi setup dự án mới hoặc cần chuẩn hóa Tailwind config cho team.
Tailwind CSS là framework CSS phổ biến nhất hiện nay, nhưng việc customize config có thể mất thời gian nếu bạn chưa quen. Mỗi dự án thường cần: custom brand colors, font family riêng, breakpoints phù hợp với design. Thay vì phải đọc docs và viết config từ đầu, công cụ này cho phép bạn điều chỉnh trực quan và generate config sẵn sàng sử dụng. Đặc biệt hữu ích cho: (1) Setup dự án mới nhanh chóng; (2) Chuẩn hóa config cho team; (3) Học cách cấu trúc tailwind.config.js.
File tailwind.config.js là trung tâm cấu hình của Tailwind CSS, quyết định toàn bộ design system của dự án. Phần 'content' chỉ định các files mà Tailwind sẽ scan để tìm class names được sử dụng, giúp tree-shaking loại bỏ CSS không dùng đến. Phần 'theme' định nghĩa design tokens: colors, fonts, spacing, breakpoints. 'theme.extend' cho phép thêm giá trị mới mà không ghi đè defaults - đây là cách được khuyến nghị. 'darkMode: class' cho phép toggle dark mode bằng class trên HTML element, thay vì dựa vào prefers-color-scheme của hệ thống. Phần 'plugins' mở rộng Tailwind với các utilities và components bổ sung như @tailwindcss/forms, @tailwindcss/typography, @tailwindcss/aspect-ratio. Hiểu rõ cấu trúc này giúp bạn customize Tailwind hiệu quả cho mọi dự án.
Khi cấu hình Tailwind cho dự án production, có một số best practices quan trọng. Luôn sử dụng 'extend' thay vì override trực tiếp trong theme để giữ lại các giá trị mặc định hữu ích của Tailwind. Đặt tên colors theo semantic (primary, secondary, accent) thay vì tên màu cụ thể (blue, green) để dễ thay đổi theme sau này. Sử dụng CSS variables cho colors để hỗ trợ dynamic theming và dark mode dễ dàng hơn. Giữ breakpoints consistent với design system của team - thay đổi breakpoints có thể ảnh hưởng toàn bộ responsive layout. Thêm prefix khi tích hợp Tailwind vào dự án có sẵn CSS khác để tránh conflict class names. Cấu hình content paths chính xác để production build nhỏ nhất có thể. Sử dụng @apply có chừng mực - quá nhiều @apply làm mất ý nghĩa utility-first.
Tailwind CSS liên tục phát triển với nhiều cải tiến. Tailwind v3 giới thiệu Just-in-Time (JIT) engine mặc định, arbitrary values (w-[137px]), colored box shadows, scroll snap utilities, và multi-column layout. Config sử dụng module.exports trong file JavaScript. Tailwind v4 (alpha) chuyển sang dùng CSS-first configuration với @theme directive, không cần file JavaScript config. V4 sử dụng Rust-based engine Oxide cho tốc độ build nhanh hơn đáng kể. Automatic content detection loại bỏ nhu cầu cấu hình content paths. Zero-configuration import chỉ cần @import 'tailwindcss'. Hiện tại, config generator này tạo config cho Tailwind v3 - phiên bản ổn định được sử dụng rộng rãi nhất. Khi v4 stable, tool sẽ được cập nhật tương ứng.
Có, config được generate theo chuẩn Tailwind CSS v3 với darkMode: 'class' và content paths cho Next.js.
Không, config này hoạt động với Tailwind CSS mặc định. Chỉ cần paste vào tailwind.config.js và chạy build.
Config này là starting point. Sau khi copy, bạn có thể thêm nhiều colors khác vào object colors trong theme.extend.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
