React+Vite+Tailwindcss

前言

记一次使用Vite创建React项目后，引用Tailwindcss的操作过程。

安装Tailwindcss

Tailwindcss - React 安装教程

# 根据文档安装Tailwindcss（注意是PostCSS7）
# 如果React支持PostCSS8,自行根据文档升级安装。
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

创建Tailwind.config.js

在项目目录中执行该命令，创建Tailwind.config.js

npx tailwindcss init --full

创建tailwind.css

注意：如果目录不存在的话，请自行创建

创建src/styles/tailwind.css并且写入一下内容

/* src/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

创建postcss.config.js

与tailwind.config.js同级

const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [tailwindcss("./tailwind.config.js"), require("autoprefixer")],
};

引入tailwind.css

打开main.jsx/main.js 中引入tailwind.css

import "./styles/tailwind.css";

后记

tailwind.css中的三行警告可以忽略。