tailwindcss在vite中使用笔记

安装tailwindcss及其对等依赖项

npm install -D tailwindcss postcss autoprefixer

• postcss：是一个用javaScript转换CSS的工具。
• Autoprefixer：是一款自动管理浏览器前缀的插件。

生成配置文件

npx tailwindcss init -p

配置模板路径

//tailwind.config.js
content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

将 Tailwind 指令添加到您的 CSS 中

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

在main.ts中引入tailwind.css（引用在所有样式之前）

报错

Unknown at rule @tailwindcss(unknownAtRules)

解决：

.vscode中设置"css.lint.unknownAtRules": "ignore"

插件使用

安装插件Tailwind CSS IntelliSense，能够在使用时有代码提示。