Kết hợp Tailwind với React/Vue

Trong bài học này, bạn sẽ học cách tích hợp Tailwind CSS vào các dự án React hoặc Vue để xây dựng giao diện hiện đại, tối giản và dễ dàng tùy chỉnh. Học viên sẽ thực hành quản lý lớp CSS động và tạo các thành phần giao diện hiệu quả, giúp tối ưu quá trình phát triển ứng dụng frontend.

Kết hợp Tailwind với React/Vue

1. Tích hợp Tailwind CSS với React

Cài đặt Tailwind CSS

1. Tạo dự án React:

   npx create-react-app my-tailwind-react-app
   cd my-tailwind-react-app
   

2. Cài đặt Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init
   

3. Cấu hình Tailwind trong tailwind.config.js:

   module.exports = {
     content: ["./src/**/*.{js,jsx,ts,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

4. Thêm Tailwind vào file index.css:

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

Ví dụ sử dụng Tailwind trong React

function App() {
  return (
    <div className="bg-blue-500 text-white p-8 text-center">
      <h1 className="text-4xl font-bold">Hello Tailwind with React!</h1>
      <button className="mt-4 bg-white text-blue-500 px-4 py-2 rounded hover:bg-gray-200">
        Click me!
      </button>
    </div>
  );
}

export default App;

2. Tích hợp Tailwind CSS với Vue

Cài đặt Tailwind CSS

1. Tạo dự án Vue 3:

   npm init vue@latest my-tailwind-vue-app
   cd my-tailwind-vue-app
   npm install
   

2. Cài đặt Tailwind CSS:

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init
   

3. Cấu hình Tailwind trong tailwind.config.js:

   module.exports = {
     content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

4. Thêm Tailwind vào file src/assets/main.css:

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

Ví dụ sử dụng Tailwind trong Vue

<template>
  <div class="bg-purple-500 text-white p-8 text-center">
    <h1 class="text-4xl font-bold">Hello Tailwind with Vue!</h1>
    <button class="mt-4 bg-white text-purple-500 px-4 py-2 rounded hover:bg-gray-200">
      Click me!
    </button>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
@import "./assets/main.css";
</style>

Kết luận

Qua bài học này, học viên đã nắm vững cách tích hợp Tailwind CSS vào React và Vue. Bạn có thể áp dụng Tailwind để tăng tốc độ phát triển giao diện, giảm thiểu việc viết CSS thủ công, và tạo ra những sản phẩm frontend đẹp mắt, hiện đại. Hãy tiếp tục khám phá các tiện ích mở rộng của Tailwind CSS để tối ưu hơn nữa việc phát triển giao diện!