Cài đặt và sử dụng Tailwind CSS vào dự án reactjs

Tailwind css là gì?

Được ra mắt vào năm 2017, Tailwind CSS đã nhanh chóng trở thành một trong những công cụ quan trọng giúp việc xây dựng giao diện web trở nên dễ dàng hơn. Vậy Tailwind CSS là gì mà lại được ưa chuộng đến vậy, chúng ta cùng tìm hiểu thôi

Tailwind CSS là một framework CSS utility-first, tương tự như Bootstrap, cung cấp một tập hợp các lớp CSS được tích hợp sẵn mà chúng ta có thể sử dụng trong ứng dụng của mình. 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.

Ưu điểm

• 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,…

Nhược điểm

Nhược điểm lớn nhất là khi sử dụng Tailwind thì các thẻ của chúng ta cần rất nhiều class, mỗi thuộc tính là một class khi đó code cũng sẽ rất dài và rắc rối. Cần có thời gian để làm quen, tìm hiểu và nhớ tên các class.

Cài đặt và sử dụng Tailwind CSS vào dự án React JS

Cài đặt Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Thêm thông tin vào file tailwind.config.js

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

Thêm các file của thư viện Tailwin vào file css của dự án

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

Chạy thử dự án:

function Welecome() {
  const { id } = useParams();
  return (
    <div className="bg-black-1 h-full w-full px-4 flex items-center justify-center">
      <div className="bg-white px-4 py-5 w-full max-w-2xl rounded-xl shadow-modalWhite">
        <div className="flex gap-1 flex-col pb-6">
          <div className="flex justify-between">
            <p className="text-lg font-semibold leading-7 not-italic text-black-900">Welcome, seat {id}!</p>
            <button><ClearIcon/></button>
          </div>
          <p className="text-sm not-italic font-normal leading-5 text-black-600">Make an order or track your last order</p>
        </div>

        <div className="flex flex-col gap-3">
          <Link to="/neworder">
            <Button type="secondary">Start new order</Button>
          </Link>
          <Link to="/tracklastorder">
            <Button>Track last order</Button>
          </Link>
        </div>
      </div>
    </div>
  );
}

export default Welecome;

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.

Nguồn: https://tailwindcss.com/docs/guides/create-react-app