vue3 + vite 使用tailwindcss

第一步:安装依赖

vite版本较低("vite": "^4.0.0")所以就使用低版本的tailwindcss

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

第二步:配置文件生成

javascript 复制代码
npx tailwindcss init -p

会自动生成两个文件postcss.config.js和tailwindcss.config.js

第三步:配置一下tailwindcss.config.js content

javascript 复制代码
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

根据需求配置

第四步:引入样式

这里我是写到了一个css文件中

javascript 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

然后main.ts/js引入css文件

javascript 复制代码
import './assets/style/index.css';

最后测试下效果

javascript 复制代码
<template>
    <div class="home font-bold text-red-500">
        页面模板
    </div>
</template>

结束

相关推荐
安全系统学习3 分钟前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖19 分钟前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖30 分钟前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水1 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐1 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06271 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台1 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121381 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack2 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python