Cài đặt Tailwind CSS vào dự án

Trong bài học này, chúng ta sẽ cùng nhau thực hành cài đặt Tailwind CSS và thiết lập cơ bản để bắt đầu sử dụng utility class trong dự án web. Qua đó, học viên sẽ làm quen với quy trình thiết lập file cấu hình và cách tích hợp Tailwind vào HTML.

Cài đặt Tailwind CSS vào dự án

1. Cài đặt Tailwind CSS thông qua npm

1. Mở terminal và khởi tạo dự án Node.js:

   npm init -y
   

2. Cài đặt Tailwind CSS và các phụ thuộc cần thiết:

   npm install -D tailwindcss postcss autoprefixer
   

3. Khởi tạo cấu hình Tailwind CSS:

   npx tailwindcss init
   

2. Tạo và cấu hình tailwind.config.js

• Mở file tailwind.config.js và cập nhật cấu hình cơ bản:

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

• Thêm thư mục chứa file HTML và JS để Tailwind quét các class utility.

3. Liên kết Tailwind vào HTML

1. Tạo file CSS chính (vd: styles.css) và thêm các directive sau:

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

2. Xử lý build CSS:

   • Thêm file cấu hình postcss.config.js:

     module.exports = {
       plugins: {
         tailwindcss: {},
         autoprefixer: {},
       }
     }
     

   • Chạy lệnh build CSS:

     npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch
     

3. Thêm file CSS đã build vào HTML:

   <link href="./dist/output.css" rel="stylesheet">
   

Kết Luận

Sau bài học này, học viên đã có khả năng cài đặt và thiết lập Tailwind CSS vào một dự án web nhỏ. Bài tiếp theo sẽ hướng dẫn cách tối ưu và tận dụng utility class của Tailwind CSS trong thiết kế giao diện.