HTML, CSS

🎨 Tùy Biến Giao Diện Với tailwind.config.js: Làm Chủ Theme Trong Tailwind CSS

Posted on by Đỗ Thành
26
Th6
View: 22

Một trong những điểm mạnh nổi bật của Tailwind CSS chính là khả năng tùy biến theme mạnh mẽ, tập trung trong file tailwind.config.js. Nhờ đó, bạn có thể định nghĩa lại toàn bộ hệ thống màu sắc, font chữ, kích thước, spacing… theo brand hoặc thiết kế riêng của bạn — mà không cần đụng đến một dòng CSS thủ công nào.

Trong bài viết này, chúng ta sẽ tìm hiểu:

  • Cách mở rộng và ghi đè theme mặc định
  • Cách định nghĩa biến màu, font, spacing riêng
  • Tùy biến breakpoints, dark mode, và plugin

📁 1. Tổng Quan tailwind.config.js

Đây là file cấu hình gốc của Tailwind, được tạo ra bằng lệnh:

npx tailwindcss init
# hoặc
npx tailwindcss init -p # kèm postcss.config.js

Cấu trúc cơ bản:

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      // Bạn sẽ thêm tùy biến vào đây
    },
  },
  plugins: [],
};

🎨 2. Tùy Biến Theme: extend vs override

  • extend: bổ sung thêm giá trị mới, giữ nguyên giá trị mặc định
  • Ghi đè trực tiếp: thay thế toàn bộ giá trị gốc (ít dùng hơn, có thể gây lỗi không mong muốn)

📌 Ví dụ dùng extend để thêm màu sắc riêng:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3abff8',
          DEFAULT: '#1e40af',
          dark: '#1e3a8a',
        },
      },
    },
  },
};

Sau đó bạn có thể sử dụng ngay trong HTML:

<div class="bg-brand text-white hover:bg-brand-dark">
  Nút tuỳ chỉnh
</div>

🔤 3. Tùy Biến Font, Spacing, Border Radius…

🖋 Font chữ:

extend: {
  fontFamily: {
    sans: ['Inter', 'sans-serif'],
    heading: ['"Playfair Display"', 'serif'],
  }
}

Dùng trong HTML:

<h1 class="font-heading text-3xl">Tiêu đề</h1>

📏 Spacing (margin/padding):

extend: {
  spacing: {
    '72': '18rem',
    '84': '21rem',
    '96': '24rem',
  }
}

Sử dụng: mt-72, p-84, w-96…

🟠 Bo góc:

extend: {
  borderRadius: {
    xl: '1rem',
    '2xl': '1.5rem',
  }
}

🌈 4. Tùy biến hệ màu — Mở rộng vs thay thế

Thêm màu mới:

extend: {
  colors: {
    danger: '#e3342f',
    success: '#38c172',
  }
}

Ghi đè toàn bộ bảng màu (không khuyến khích):

theme: {
  colors: {
    transparent: 'transparent',
    current: 'currentColor',
    black: '#000',
    white: '#fff',
    primary: '#1e40af',
    // mất toàn bộ màu mặc định nếu không khai lại!
  }
}

🌙 5. Kích hoạt Dark Mode

module.exports = {
  darkMode: 'class', // hoặc 'media'
}

Sử dụng trong HTML:

<body class="dark">
  <div class="bg-white dark:bg-gray-900 text-black dark:text-white">
    Nội dung
  </div>
</body>

📱 6. Tùy biến Breakpoints (Responsive)

theme: {
  extend: {
    screens: {
      'xs': '480px',
      '3xl': '1600px',
    }
  }
}

Sử dụng: xs:text-sm, 3xl:px-12

🧩 7. Cài Plugin Tailwind để mở rộng nhanh

Một số plugin phổ biến bạn có thể thêm vào phần plugins:

plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
  require('@tailwindcss/aspect-ratio'),
]

🧠 Kinh nghiệm thực chiến

  • 🔁 Tái sử dụng cấu hình giữa các dự án → nên tách config thành file riêng, import từ tailwind.preset.js
  • ⚠️ Không nên ghi đè quá nhiều — tận dụng tối đa extend để giữ compatibility
  • 💡 Dùng token màu (brand-primary, brand-secondary…) để thay thế hardcoded màu blue-500 trong UI thực tế

✅ Kết luận

Tùy biến trong tailwind.config.js là một phần cốt lõi làm nên sự linh hoạt và chuyên nghiệp của Tailwind CSS. Với một cấu hình theme được thiết kế chuẩn, bạn có thể:

  • Giữ giao diện thống nhất với brand
  • Dễ bảo trì, mở rộng và hợp tác trong team
  • Tối ưu quá trình dựng UI phức tạp ở quy mô lớn

Tailwind không chỉ là framework CSS – nó là một hệ sinh thái thiết kế giao diện mà bạn có thể “lập trình hóa” theo cách của mình.

Đỗ Thành