🔌 Tích Hợp Tailwind CSS với React / Vue / Nuxt

Dưới đây là phần tiếp theo trong chuỗi thực hành Tailwind CSS thực chiến, tập trung vào việc tích hợp Tailwind CSS với các framework hiện đại như React, Vue và Nuxt – nền tảng phổ biến trong phát triển web hiện nay.

NỘI DUNG

🎯 Mục tiêu

Thiết lập môi trường Tailwind với các framework phổ biến
Hiểu rõ quy trình cấu hình, build và hot reload
Tận dụng sức mạnh của Tailwind để viết giao diện trong component
Làm tiền đề cho việc tái sử dụng component, dark mode, thư viện UI (ShadCN, DaisyUI…)

⚛️ 1. Tích hợp Tailwind CSS với React (dùng Vite hoặc CRA)

🔧 Cách 1: Sử dụng Vite (khuyên dùng)

npm create vite@latest my-app --template react
cd my-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

📁 Cấu hình tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

📄 src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

👉 Import file này trong main.jsx hoặc App.jsx

import './index.css'

✅ Sẵn sàng! Viết component như sau:

export default function Button() {
  return (
    <button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
      Bấm vào tôi
    </button>
  )
}

🔷 2. Tích hợp Tailwind CSS với Vue 3 (Vite)

npm create vue@latest
cd my-vue-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Cấu hình tailwind.config.js

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Thêm vào src/assets/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

👉 Import file CSS trong main.js

import './assets/main.css'

Component Vue sử dụng Tailwind:

<template>
  <button class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
    Nút Vue Tailwind
  </button>
</template>

🌀 3. Tích hợp Tailwind CSS với Nuxt 3

Nuxt 3 đã hỗ trợ Tailwind cực kỳ mượt:

npx nuxi init nuxt-tailwind
cd nuxt-tailwind
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Cấu hình tailwind.config.js

export default {
  content: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './app.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tạo file assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Kích hoạt trong nuxt.config.ts

export default defineNuxtConfig({
  css: ['@/assets/css/tailwind.css']
})

✅ Giờ bạn có thể dùng Tailwind trong mọi file .vue của Nuxt 3.

📦 Gợi ý mở rộng

Nhu cầu	Cách mở rộng
Dark Mode	Tailwind hỗ trợ trực tiếp với `dark:` và `darkMode: 'class'`
Reusable Components	Kết hợp `@apply`, `slots`, `props` để tối ưu UI
UI Framework	Sử dụng ShadCN UI (React), DaisyUI, Flowbite
Responsive Layouts	Kết hợp Tailwind grid + `sm:`, `md:`, `lg:` breakpoints

✅ Kết luận

Với các bước đơn giản, bạn có thể tích hợp Tailwind CSS vào React, Vue, hoặc Nuxt để:

Thiết kế UI hiện đại, responsive, dark mode
Viết ít CSS hơn, tăng tốc phát triển front-end
Dễ dàng mở rộng với thư viện UI hoặc components tái sử dụng

HTML, CSS