React：通过Vite集成Tailwind CSS

2024-02-22 15:17:52

环境

1、通过vite创建react项目

yarn create vite react-project --template react-ts

2、初始化Tailwind CSS

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

3、在生成的tailwind.config.js文件中，添加

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{ts,tsx}", // 用到tailwind的地方
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4、在./src/index.css中添加（注意，该文件必须导入到main.tsx中）

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

5、编写Html

<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

6、运行yarn dev，能够看到黑色加粗带下划线的Hello World!.