Cài đặt Tailwind CSS với Nextjs

Web
1

Tạo dự án của bạn nếu chưa có

npx create-next-app my-project
cd my-project

Đối với mỗi dự án muốn sử dụng Tailwind css, bạn đều phải thực hiện các bước dưới đây.

1. Cài đặt Tailwind CSS

Cài đặt tailwindcss và các phụ thuộc ngang hàng của nó thông qua npm hoặc yarn, sau đó chạy lệnh init để tạo tailwind.config.jsvà postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
# or yarn
npm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Định cấu hình đường dẫn mẫu của bạn

Thêm các đường dẫn đến tất cả các tệp mẫu trong tailwind.config.js.

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

3. Thêm các lệnh Tailwind vào CSS của bạn

Thêm @tailwind chỉ thị cho từng lớp của Tailwind vào tệp ./styles/globals.css của bạn.

/** Gloals.css **/
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Bắt đầu quá trình xây dựng của bạn

Chạy quy trình xây dựng của bạn với npm run dev hoặc yarn dev

5. Bắt đầu sử dụng Tailwind trong dự án của bạn

Bắt đầu sử dụng các lớp tiện ích của Tailwind để tạo kiểu cho nội dung của bạn và xem kết quả.

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