React：通过Vite集成Tailwind CSS

环境

• node、npm
• vite
• VS Code扩展：
  • Headwind：脚本排序
  • Tailwind CSS IntelliSense： 代码提示

安装

1、通过vite创建react项目

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

2、初始化Tailwind CSS

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,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!.

参考文章

• https://tailwindcss.com/docs/guides/vite