Vite+Vue3 中使用 Tailwind CSS 配置_vite vue3 如何配置 tailwindcss bg-slate-100 eslint报错

步骤

1. 安装依赖

npm install -D tailwindcss postcss autoprefixer

2. 根目录创建 postcss.config.js

	module.exports = {
		plugins: {
			tailwindcss: {},
			autoprefixer: {},
		}
	}
1
2
3
4
5
6

3. 根目录创建 tailwind.config.js

	/** @type {import('tailwindcss').Config} */
	module.exports = {
		content: ["index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
		theme: {
			extend: {},
		},
		plugins: [],
	}
1
2
3
4
5
6
7
8

4. 在 src/assets 目录中创建 tailwind.css

	@tailwind base;
	@tailwind components;
	@tailwind utilities;
1
2
3

5. 在 main.js 中添加引用css

	import './assets/tailwind.css'
1

6. 运行项目

如果遇到提示报错 “[plugin:vite:css] Failed to load PostCss config” 将第2步的 postcss.config.js 后缀名改为 postcss.config.cjs