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 会有代码提示

相关推荐
晚枫~5 分钟前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
~无忧花开~5 分钟前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
BumBle6 分钟前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
九十一8 分钟前
vue3事件总线与emit
前端·vue.js
岁月向前41 分钟前
不同的协议和场景防丢包方案
前端
琢磨先生TT44 分钟前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统!
前端·前端框架
云枫晖44 分钟前
JS核心知识-Ajax
前端·javascript
玄魂1 小时前
VTable Gantt 智能 zoom(缩放)功能介绍与开发实践
前端·开源·数据可视化
Joyee6911 小时前
RN 的初版架构——UI 布局与绘制
前端·react native
会点法律的程序员1 小时前
小程序 地理位置授权怎么搞
前端·小程序·uni-app