Bài 26: Tùy biến theme với Tailwind Config – tạo bộ nhận diện riêng cho dự án của bạn

Hôm nay chúng ta sẽ khám phá cách “uốn nắn” Tailwind theo ý mình, thay vì chỉ dùng những gì có sẵn.

Tưởng tượng bạn đang xây dựng website cho một thương hiệu có màu chủ đạo là cam đất, font chữ là “Lora” và mọi thành phần đều theo khoảng cách rất đặc trưng.

Nếu dùng Tailwind mặc định thì sao? Có thể đủ dùng, nhưng… chưa “đúng chất”.

Đó là lý do Tailwind cho phép bạn tuỳ biến sâu thông qua file cấu hình tailwind.config.js.
Với một vài dòng code, bạn có thể:

• Thêm màu thương hiệu riêng
• Đặt lại font mặc định
• Tạo ra khoảng cách (spacing) theo chuẩn thiết kế của bạn

Và điều tuyệt vời là: mọi thứ vẫn hoạt động hoàn hảo với hệ thống class tiện dụng của Tailwind.

---

File tailwind.config.js nằm ở đâu?

Khi bạn cài Tailwind bằng công cụ build (Vite, Webpack, Laravel Mix…), thường có sẵn file tailwind.config.js.

Nếu chưa có, tạo bằng lệnh:

📋 Copynpx tailwindcss init

Sau đó, mở file ra. Nó sẽ trông như sau:

📋 Copymodule.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Toàn bộ phần tuỳ chỉnh bạn sẽ viết vào trong extend.

---

Thêm màu thương hiệu

Giả sử bạn muốn thêm một màu cam đất tên là brand-orange.

📋 Copytheme: {
  extend: {
    colors: {
      'brand-orange': '#D97706',
    }
  }
}

Sau đó bạn có thể dùng:

📋 Copy<div class="bg-brand-orange text-white p-4 rounded">
  Đây là màu thương hiệu của tôi
</div>

Bạn cũng có thể mở rộng thêm màu đậm, nhạt:

📋 Copycolors: {
  'brand': {
    DEFAULT: '#D97706',
    light: '#FBBF24',
    dark: '#92400E',
  }
}

Dùng như bg-brand, bg-brand-light, hover:bg-brand-dark…

---

Tuỳ biến font chữ

Bạn có thể thêm font riêng như sau:

📋 Copytheme: {
  extend: {
    fontFamily: {
      heading: ['"Lora"', 'serif'],
      body: ['"Inter"', 'sans-serif'],
    }
  }
}

Dùng trong HTML:

📋 Copy<h1 class="font-heading text-3xl">Tiêu đề lớn</h1>
<p class="font-body text-base">Đây là đoạn văn</p>

Font sẽ hoạt động nếu bạn đã nhúng chúng bằng Google Fonts hoặc file tĩnh.

---

Thêm spacing, kích thước, z-index…

📋 Copyextend: {
  spacing: {
    '72': '18rem',
    '84': '21rem',
    '96': '24rem',
  },
  zIndex: {
    '60': '60',
    '70': '70',
  }
}

Bây giờ bạn có thể dùng mt-84, w-96, z-70 y như class mặc định.

Tailwind không giới hạn bạn – chỉ cần bạn định nghĩa đúng key–value.

---

Tuỳ biến responsive breakpoint

Muốn thêm breakpoint riêng như tablet?

📋 Copytheme: {
  extend: {
    screens: {
      'tablet': '768px',
    }
  }
}

Dùng như tablet:grid-cols-2, tablet:pt-8, v.v.

---

Tuỳ biến transition, shadow, border radius…

Tất cả đều có thể mở rộng. Ví dụ:

📋 Copyextend: {
  borderRadius: {
    'xl2': '1.5rem',
  },
  boxShadow: {
    'inner-deep': 'inset 0 2px 4px 0 rgba(0,0,0,0.4)',
  },
  transitionDuration: {
    '400': '400ms',
  }
}

Sử dụng:

📋 Copy<div class="rounded-xl2 shadow-inner-deep transition duration-400">
  Hiệu ứng cá nhân hoá
</div>

---

Cách quản lý config khi làm dự án lớn

• Tách phần config ra nhiều module (dùng JS require)
• Dùng plugin để tổ chức lại class (ví dụ: @tailwindcss/forms)
• Viết rõ ràng, có comment cho mỗi phần tuỳ biến

Đây là bước để dự án Tailwind của bạn từ “chạy được” → “chuyên nghiệp”.

---

Tổng kết kiến thức

Tính năng tuỳ biến	Cách làm trong Tailwind
Màu sắc riêng	extend.colors
Font chữ riêng	extend.fontFamily
Khoảng cách, z-index…	extend.spacing, extend.zIndex
Breakpoint tùy chỉnh	extend.screens
Radius, shadow, transition	extend.borderRadius, boxShadow, transitionDuration

---

Tóm tắt bài học

• Tailwind cho phép bạn mở rộng theme để “may đo” theo đúng nhu cầu của dự án.
• Việc tuỳ biến diễn ra trong tailwind.config.js và hoàn toàn tương thích với hệ thống class tiện dụng.
• Bạn có thể thêm màu, font, spacing, breakpoint… và dùng ngay bằng cú pháp quen thuộc.

---

Bài tiếp theo

Sau khi đã có hệ thống màu, spacing và font riêng, bạn có thể cảm thấy:
“Giá mà mình có thể tái sử dụng nhiều class cùng lúc, đỡ gõ dài quá.”

Đó chính là nội dung bài sau – sử dụng @apply và component để tái sử dụng logic CSS trong Tailwind.

Bạn sẽ học cách:

• Gộp nhiều class thành 1 class tiện dụng
• Viết file CSS chứa các component như btn, card, badge
• Quản lý style hiệu quả hơn trong dự án lớn

---

Hẹn gặp lại bạn ở bài 27: Tái sử dụng class với @apply và component – tổ chức CSS gọn gàng, thông minh.
Chúng ta đang học cách “xây nhà bằng gạch riêng của mình” rồi đó!