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>

结束

相关推荐
灵感__idea5 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码2 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript