Cài đặt Tailwind CSS với React Router

Thiết lập Tailwind CSS trong dự án React Router.

Tạo dự án của bạn

Bắt đầu bằng cách tạo một dự án React Router mới nếu bạn chưa thiết lập. Cách phổ biến nhất là sử dụng Create React Router.

Terminal

npx create-react-router@latest my-projectcd my-project

Cài đặt Tailwind CSS

Cài đặt @tailwindcss/vite và các peer dependencies thông qua npm.

Terminal

npm install tailwindcss @tailwindcss/vite

Cấu hình Vite Plugin

Thêm plugin @tailwindcss/vite vào cấu hình Vite của bạn.

vite.config.ts

import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import tsconfigPaths from "vite-tsconfig-paths";import tailwindcss from "@tailwindcss/vite";export default defineConfig({  plugins: [    tailwindcss(),    reactRouter(),    tsconfigPaths(),  ],});

Import Tailwind CSS

Thêm @import vào ./app/app.css để import Tailwind CSS.

app.css

@import "tailwindcss";

Bắt đầu quá trình build

Chạy quá trình build với npm run dev.

Terminal

npm run dev

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

Bắt đầu sử dụng các utility class của Tailwind để style nội dung của bạn.

home.tsx

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