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

相关推荐
清灵xmf7 分钟前
npm install --legacy-peer-deps:它到底做了什么,什么时候该用?
前端·npm·node.js
超级大只老咪42 分钟前
字段行居中(HTML基础语法)
前端·css·html
IT_陈寒1 小时前
Python开发者必看!10个高效数据处理技巧让你的Pandas代码提速300%
前端·人工智能·后端
只_只1 小时前
npm install sqlite3时报错解决
前端·npm·node.js
FuckPatience1 小时前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
数字冰雹1 小时前
图观 流渲染打包服务器
服务器·前端·github·数据可视化
三月暖阳1 小时前
分享并记录日常开发中的一些CSS布局和样式技巧(持续更新)
css·scss
JarvanMo1 小时前
Flutter:我在网上看到了一个超炫的动画边框,于是我在 Flutter 里把它实现了出来
前端
returnfalse1 小时前
前端性能优化-第三篇(JavaScript执行优化)
前端·性能优化
yuzhiboyouye1 小时前
前端架构师,是架构什么
前端·架构