vue项目引入tailwindcss
tailwindcss 是什么？
tailwindcss 官网
Tailwind CSS 是一个 工具优先（Utility-First）的 CSS 框架，它提供了一组低级别的、可组合的 CSS 类（Utility Classes），让开发者可以直接在 HTML 中快速构建自定义设计，而无需手写 CSS。
核心特点
1、Utility-First（工具类优先）
提供大量细粒度的类名（如 text-blue-500、p-4、flex），直接在 HTML 中组合使用，避免手写 CSS。
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">点击我
</button>
2、高度可定制
通过 tailwind.config.js 可以自定义颜色、间距、字体、断点等设计系统。
// tailwind.config.js
module.exports = {theme: {extend: {colors: {brand: '#3b82f6', // 自定义品牌色},},},
};
3、响应式设计
内置响应式前缀（如 md:text-lg、lg:hidden），方便适配不同屏幕尺寸。
<div class="text-sm md:text-base lg:text-lg">响应式文本
</div>
4、JIT 模式（Just-In-Time）
按需生成 CSS，大幅减少文件体积（Tailwind v3+ 默认启用）。
5、无预定义组件
不同于 Bootstrap 或 Material UI，Tailwind 不提供现成的组件（如按钮、卡片），而是让开发者自由组合工具类构建 UI。
VS 传统 CSS 框架
VS Bootstrap
Bootstrap 是一个流行的 开源前端框架，用于快速构建响应式、移动优先的网站和 Web 应用。它由 Twitter 开发并开源，现由社区维护，提供了一套完整的 CSS 组件、工具类和 JavaScript 插件，帮助开发者快速搭建现代化 UI。
| 特性 | Tailwind CSS | Bootstrap |
|---|---|---|
| 设计哲学 | 提供工具类，自由组合样式。 | 提供预定义组件（如按钮、导航栏）。 |
| 灵活性 | 极高，适合定制化设计。 | 较低，需覆盖默认样式才能自定义。 |
| CSS 体积 | JIT 模式按需生成，较小。 | 包含所有组件样式，较大。 |
| 学习曲线 | 需记忆工具类，但熟练后效率极高。 | 更易上手，但定制复杂。 |
VS Normalize.css
Normalize.css一个轻量级的 CSS 重置（Reset）库，旨在使不同浏览器的默认 HTML 元素样式更加一致，而不是完全清除它们。
tailwind CSS 内置了一个现代化重置样式：Preflight 构建在 modern-normalize 之上，是 Tailwind 项目的一组基本样式，旨在消除跨浏览器的不一致性。
若项目已用 Tailwind，通常无需单独引入 Normalize.css；
vue3 vite tailwindcss@3 版本
初始化项目
npm create vite@latest --template vue
cd vue
npm install
npm run dev
安装tailwindcss@3 和 postcss 引入
npm install -D tailwindcss@3 postcss autoprefixer
// 初始化引用
npx tailwindcss init -p
以上配置后，会在根目录生成 postcss.config.js tailwind.config.js,src目录下创建index.css tailwind.css
postcss.config.js配置如下
export default {plugins: {tailwindcss: {},autoprefixer: {},},
}
tailwind.config.js配置如下
/** @type {import('tailwindcss').Config} */
export default {content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {},},plugins: [],
}
tailwind.css配置如下
styles文件夹之下
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
index.css配置如下
styles文件夹之下的index.css
@import url('tailwind.css');
main.ts引入 index.css
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 注意此处
import "./index.css"createApp(App).mount('#app')
自定义配置
tailwind.config.js配置如下
/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {// 自定义宽度类width: {...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义高度类height: {...Array.from({ length: 300 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 padding 类padding: {...Array.from({ length: 150 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 margin 类margin: {...Array.from({ length: 100 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})},// 自定义 font-size 类fontSize: {...Array.from({ length: 50 }, (_, i) => i + 1).reduce((acc, num) => {acc[num] = `${num}px`;return acc;}, {})}},},plugins: [],
};
以上配置 我们将fontSize margin 等改为了固定宽度，此时安装 postcss-px-to-viewport可以进行适配
npm install postcss-px-to-viewport
postcss.config.js配置如下
export default {plugins: {tailwindcss: {},autoprefixer: {},"postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: [], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false// replace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配landscape: false // 是否处理横屏情况}},
}
vue3 vite tailwindcss@4 版本
初始化项目
npm create vite@latest --template vue
cd vue
npm install
npm run dev
tailwindcss 4版本采用插件安装
npm install tailwindcss @tailwindcss/vite
vite.config.js配置如下
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";// https://vite.dev/config/
export default defineConfig({plugins: [vue(), tailwindcss()],
});
一般在src文件夹下有一个styles文件夹，在其中的index.css中进行如下配置
@import "tailwindcss";
在main.js中或main.ts文件中引入上一个文件
import "./styles/index.css";
在app.vue文件中测试
<span class="flex text-red-400">tailwindcss4</span>