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>

结束

相关推荐
Sun_light5 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子8 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00008 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心8 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm13 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v17 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠19 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue20 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
啷咯哩咯啷25 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016126 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js