Bạn đang lo lắng vì đặt tên class, sợ bị trùng css không mong muốn, hay muốn một framework hỗ trợ css dễ học mà dễ tùy biến theo ý thích đã có tailwind css.

I, Tailwind css là gì?

• Tailwind css là một utility-first CSS framework nó hỗ trợ phát triển xây dựng nhanh chóng giao diện người dùng, nó cũng có điểm chung giống như Bootstrap & điểm làm nó nổi bật hơn cả đó là chúng ta có thể tùy biến phát triển css theo cách mà chúng ta định nghĩa ra.

II, Cách cài đặt và sử dụng

1. Sử dụng thông qua link CDN

• Ở phiên bản tailwind css hiện tại là V3.0.0 thì có thể sử dụng link viết theo dạng script:

<script src="https://cdn.tailwindcss.com"></script>

hoặc có thể dùng link CDN theo dạng link css ở phiên bản V2

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Có 1 điều đặc biệt ở phiên bản V3 khi dùng link script là bạn có thể tùy biến thêm css trong script:

<script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            clifford: '#da373d',
          }
        }
      }
    }
  </script>

2. Cài tailwind css trên project (Tailwind CLI)

• Sau khi cài xong npm hoặc yarn chúng ta có thể cài tailwind css đơn giản theo cách sau:

Cài đặt tailwind css qua npm & yarn : npm install -D tailwindcss hoặc yarn add tailwindcss.

Cài đặt file tailwind.config.js dùng để sử dụng tạo cấu hình tailwindcss cơ bản: npx tailwindcss init

Định nghĩa các đường path mà bạn sử dụng tailwind css:

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

Tạo 1 file css để chứa từng lớp tệp lệnh tailwind sau đó thêm đoạn code sau vào file css đó:

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

Câu lệnh build tailwind css:

• Ở đây bạn có thể bật terminal và viết thẳng npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
• Trong đó /src/input.css là file mà chúng ta tạo ở bước trước đó và ./dist/output.css là file mà các css được build ra để sử dụng.
• Cách nữa là viết câu lệnh build trong scripts của file package.json để dễ gọi hơn: "scripts": { "build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch" }, và đơn giản sau đó là bật terminal và gọi npm run build.

Bước cuối nhúng file css vào link: <link href="/dist/output.css" rel="stylesheet">

III, Một số framework được tailwind hỗ trợ

• AngularJS, ReactJS, VueJS, NextJS, Laravel, Gatsby, Nuxt.js.

IV, Tổng kết

• Tailwind css là framework rất dễ học cho người mới bắt đầu sử dụng css, tuy nhiên để sử dụng tốt thì cần phải nắm vững kiến thức của css thuần trước.
• Trên là giới thiệu cũng như cách cài đặt tailwind css cơ bản, mọi người có thể tham khảo cách sử dụng cũng như cách cài đặt trong 1 số framework khác https://tailwindcss.com.