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>

结束

相关推荐
独立开阀者_FwtCoder5 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->16 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~17 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo18 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末37 分钟前
React——基础
前端·react.js·前端框架
每天开心41 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户3802258598241 小时前
使用three.js实现3D地球
前端·three.js