首先安装依赖：
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm i -D unocss然后vite.config.ts中 引入
import Unocss from 'unocss/vite'
export default defineConfig({
plugins: [
Unocss(),
],
})
终端执行：
npx tailwindcss init -p会在项目根目录下面生成两个文件
tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
最后在main.js或者main.ts中引入css样式 import 'uno.css'
完成以上步骤就可以在标签中直接使用 tailwind 提供的相关类名了。
VScode 安装插件 Tailwind CSS IntelliSense 会有代码提示
定义自己的css样式：
tailwind.config.ts中写入自己的样式
项目中css文件引入
文章来源：https://www.toymoban.com/news/detail-669427.html
@tailwind base;
@tailwind components;
@tailwind utilities;组件中使用：
文章来源地址https://www.toymoban.com/news/detail-669427.html
到了这里，关于vue3 tailwindcss的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
