安装 Tailwind CSS
- 如果你尚未创建
Vite
项目,可以先创建一个新的Vite
项目。 - 这里假设你已经有
Vite
项目了,在项目中安装tailwindcss
及相关依赖项:
npm install -D tailwindcss postcss autoprefixer
- 命令生成
tailwind.config.js
和postcss.config.js
文件
npx tailwindcss init -p
配置模板路径
- 在
tailwind.config.js
文件中添加需要用到的模板文件路径。
/** @type {import('tailwindcss').Config} */
module.exports = {
// 这里配置文件路径
// 具体相关配置可查看:https://tailwindcss.com/docs/content-configuration
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: []
}
注意: 我这里使用的是
module.export = {}
会提示'module' is not defined
两种解决方式:
1.将module.export = {}
替换成export default {}
2.在项目的根目录下的.eslintrc.cjs
文件中添加env: {node: true}
将 Tailwind 指令添加到 CSS 中
- 这里可以在存放
css
文件目录中创建一个tailwind.css
文件,然后将Tailwind
每个层的@tailwind
指令添加到创建的css
文件中。
/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
如果有这个警告提示:Unknown at rule @tailwindcss(unknownAtRules)
可以在项目根目录下的 .vscode
目录中创建 settings.json
文件并添加以下代码:
{
"css.lint.unknownAtRules": "ignore"
}
- 然后在项目中引入创建的 tailwind.css 文件
import { createApp } from 'vue'
import App from './App.vue'
// 需要在所有样式之前引入
import './styles/tailwind.css'
import './styles/index.css'
const app = createApp(App)
app.mount('#app')
测试 Tailwind CSS 是否生效
- 在
App.vue
中的class
中添加text-base bg-red-500 text-white
然后运行项目:
- 如果使用的是
vscode
编辑器,可以在vscode
插件商店搜bradlc.vscode-tailwindcss
并安装,即可带来提示: