在 Vue+Vite 项目中安装 Tailwind CSS_vue unknown at rule @tailwind

安装 Tailwind CSS

官网安装文档：https://tailwindcss.com/docs/guides/vite#vue

• 如果你尚未创建 Vite 项目，可以先创建一个新的 Vite 项目。
• 这里假设你已经有 Vite 项目了，在项目中安装 tailwindcss 及相关依赖项：

npm install -D tailwindcss postcss autoprefixer
1

• 命令生成 tailwind.config.js 和 postcss.config.js 文件

npx tailwindcss init -p
1

配置模板路径

• 在 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: []
}
1
2
3
4
5
6
7
8
9
10

注意： 我这里使用的是 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;
1
2
3
4

如果有这个警告提示：Unknown at rule @tailwindcss(unknownAtRules)
可以在项目根目录下的 .vscode 目录中创建 settings.json 文件并添加以下代码：

{
  "css.lint.unknownAtRules": "ignore"
}
1
2
3

• 然后在项目中引入创建的 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')
1
2
3
4
5
6
7
8
9

测试 Tailwind CSS 是否生效

• 在 App.vue 中的 class 中添加 text-base bg-red-500 text-white 然后运行项目：
  
• 如果使用的是 vscode 编辑器，可以在 vscode 插件商店搜 bradlc.vscode-tailwindcss 并安装，即可带来提示：