Hướng dẫn sử dụng Tailwind trong React

Tailwind CSS là gì?

Tác giả: Nine Dev

Tailwind CSS về cơ bản là framework CSS giúp xây dựng trang web một cách hiện đại mà không cần rời khỏi file HTML.
Tailwind CSS cung cấp các class với những nhiệm vụ khác nhau, sử dụng class để thêm vào thẻ HTML.

I. Tại sao nên sử dụng Tailwind CSS?

Chúng ta thường lựa chọn những framework nhanh, dễ học để ứng dụng vào dự án.
Tailwind CSS sẽ là một trợ thủ đắc lực hỗ trợ bạn, vì chúng được tích hợp sẵn rất nhiều tính năng và kiểu dáng để người dùng lựa chọn.

Bên cạnh đó, chúng cũng giúp tạo giao diện người dùng đẹp mắt và hiện đại.
Tailwind CSS tạo các tiện ích nhỏ và dễ dàng tích hợp trực tiếp các class hiện có vào HTML code.

II. Ưu điểm của Tailwind CSS

Tùy biến cao, hiệu suất cao. Không giống như Bootstrap cung cấp những class gần như đồng gọi sẵn, chỉ cần gọi ra là dùng. Tailwind giúp bạn định nghĩa những phần phù hợp với dự án của bạn mà không bị gò bó.

Cho phép xây dựng responsive layout phức tạp.

Responsive và phát triển dễ dàng.

Tạo thành phần dễ dàng.

Hỗ trợ cài đặt với nhiều framework front-end khác như react, vuejs,…

III. Nhược điểm của Tailwind CSS

Thiếu tiêu đề và thành phần điều hướng (navigation).

Cần có thời gian để làm quen, tìm hiểu và nhớ tên các class.

Có kiến thức về CSS thì mới sử dụng tốt được.

IV. Cài đặt Tailwind CSS

Thông qua npm

Bước 1: Tailwind có sẵn trên npm và bạn có thể cài đặt nó bằng lệnh sau:


              npm install -D tailwindcss postcss autoprefixer

Bước 2: Tạo tệp cấu hình Tailwind CSS bằng lệnh sau:


              npx tailwindcss init -p

Bước 3: Tạo một tailwind.config.js file trong thư mục gốc của thư mục dự án và thêm nội dung sau:


              /** @type {import('tailwindcss').Config} */
                  module.exports = {
                       content: [
                          "./src/**/*.{js,jsx,ts,tsx}",
                      ],
                      theme: {
                          extend: {},
                      },
                      
                  }

Bước 4: Sau đó, tạo một styles.css file trong thư mục dự án của bạn src (hoặc bất kỳ thư mục nào khác mà bạn thích) và thêm nội dung sau:


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

Chạy thử dự án App.js


              export default function App() {
                  return (
                      <h1 className="text-3xl font-bold underline">
                          Hello world!
                      </h1>
                  )
              }

V. Lời kết

Tailwind CSS đang dần trở thành công cụ hữu ích, không chỉ dành cho người mới bắt đầu mà còn cho những chuyên gia.
Vì vậy, nếu bạn đang tìm kiếm một công cụ phát triển web mạnh mẽ và tiện ích thì Tailwind CSS là lựa chọn phù hợp cho bạn đấy.

VI. Link tham khảo

https://tailwindcss.com/docs/installation