vue3 tailwindcss的使用

首先安装依赖:

复制代码
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npm i -D unocss

然后vite.config.ts中 引入

TypeScript 复制代码
import Unocss from 'unocss/vite'

export default defineConfig({
    plugins: [
       
        Unocss(),
    ],
    
})

终端执行:

TypeScript 复制代码
npx tailwindcss init -p

会在项目根目录下面生成两个文件

tailwind.config.js

javascript 复制代码
module.exports = {
    content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

javascript 复制代码
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

完成以上步骤就可以在标签中直接使用 tailwind 提供的相关类名了。

VScode 安装插件 Tailwind CSS IntelliSense 会有代码提示

相关推荐
LFly_ice9 分钟前
学习React-11-useDeferredValue
前端·学习·react.js
ホロHoro13 分钟前
学习笔记:JavaScript(4)——DOM节点
javascript·笔记·学习
亮子AI33 分钟前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js
信看40 分钟前
实用 html 小工具
前端·css·html
Yvonne爱编码41 分钟前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
王源骏1 小时前
Laya使用VideoNode动态加载视频,可以自定义播放视频此处以及位置
前端
一只小风华~1 小时前
Vue: ref、reactive、shallowRef、shallowReactive
前端·javascript·vue.js
阿杆1 小时前
文心快码 3.5S 发布!实测插件开发,Architect 模式令人惊艳
前端·后端·文心快码
文心快码BaiduComate1 小时前
我用Comate搭建「公园找搭子」神器,再也不孤单啦~
前端·后端·微信小程序
全栈技术负责人1 小时前
前端全链路质量监控体系建设与实践分享
前端·系统架构·前端框架