学习前提
会基本的vue，会使用AI助手，学习本课本的人必须长得帅。
安装tailwindcss
js
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
配置文件说明
tailwind.config.js - 已配置为扫描所有 Vue 文件：
- ./index.html
- ./src/**/*.{vue,js,ts,jsx,tsx}
postcss.config.js - 已配置 Tailwind 和 Autoprefixer 插件main.scss - 已添加 Tailwind 指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
使用示例
安装完成后，你可以在 Vue 组件中直接使用 Tailwind 类名：
完成后，Tailwind CSS 即可在项目中使用。
但是启动项目遇到了这个问题：
这是 Tailwind CSS v4 的变化。检查当前安装的版本，然后提供解决方案：
安装的是 Tailwind CSS v4.1.17。v4 将 PostCSS 插件移到了 @tailwindcss/postcss，因此需要调整配置。提供两种方案：
- 方案 1（推荐）：使用 Tailwind CSS v3（更稳定，兼容性更好）
- 方案 2：使用 Tailwind CSS v4（需要安装 @tailwindcss/postcss）
先按方案 1 处理：降级到 v3 并更新配置。
所以我们现在使用方案1。
小试牛刀
现在安装好了，那么我们现在对老项目原来的传统的css的写法，修改切换成tailwindcss方式更新。
迁移策略概述
迁移原则：
- 保留必要的第三方组件样式覆盖（如 Element Plus）
- 将可转换的样式改为 Tailwind 实用类
- 使用 Tailwind 的配置系统管理设计变量
- 利用 @layer 和 @apply 处理全局样式
1. tailwind.config.js - 主题配置扩展
目的：将 SCSS 变量映射为 Tailwind 主题，统一管理设计变量。改动内容：
js
theme: {
extend: {
// 自定义颜色系统
colors: {
menu: {
text: '#bfcbd9', // 菜单文字颜色
'active-text': '#ffffff', // 激活状态文字
bg: '#304156', // 菜单背景色
hover: '#263445', // 悬停状态
// ...
},
login: {
bg: '#2d3a4b',
'dark-gray': '#889aa4',
// ...
}
},
// 自定义宽度
width: {
sidebar: '210px',
'sidebar-hide': '54px',
},
// 自定义过渡时间
transitionDuration: {
sidebar: '0.28s',
},
// 自定义字体族
fontFamily: {
sans: ['Helvetica Neue', 'PingFang SC', ...],
}
}
}教学要点：
- extend 用于扩展而非覆盖默认主题
- 嵌套对象会生成对应的类名，如 bg-menu-bg、text-menu-text
- 使用连字符的键名（如 'active-text'）需要用引号包裹
使用示例：
<div :style="{ backgroundColor: $menuBg }">
<div class="bg-menu-bg text-menu-text">
2. postcss.config.js - PostCSS 配置
目的：配置 PostCSS 处理 Tailwind CSS。改动内容：
js
export default {
plugins: {
tailwindcss: {}, // Tailwind CSS 插件
autoprefixer: {}, // 自动添加浏览器前缀
},
}- Vite 会自动读取此文件
- 插件顺序很重要：先 Tailwind，后 Autoprefixer
- Autoprefixer 会自动处理浏览器兼容性
三、全局样式文件改动
3. src/assets/main.scss - 全局样式重构
改动前：
js
@import './styles/variables.scss';
@import './styles/mixin.scss';
@import './styles/sidebar.scss';
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica Neue, ...;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: ' ';
clear: both;
height: 0;
}
}改动后：
js
// 1. 引入 Tailwind 核心指令
@tailwind base;
@tailwind components;
@tailwind utilities;
// 2. 保留必要的 SCSS 文件（包含 Element Plus 样式覆盖）
@import './styles/variables.scss';
@import './styles/sidebar.scss';
// 3. 使用 @layer base 定义基础样式
@layer base {
html, body {
@apply h-full m-0 p-0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
#app {
@apply h-full;
}
// 全局重置
*, *:before, *:after {
@apply box-border m-0 p-0;
}
}
// 4. 使用 @layer utilities 定义工具类
@layer utilities {
.clearfix {
&::after {
@apply invisible block clear-both h-0;
font-size: 0; // 注意：Tailwind 没有 text-0，需要直接写 CSS
content: ' ';
}
}
}- Tailwind 指令顺序：
- @tailwind base - 基础样式重置
- @tailwind components - 组件层
- @tailwind utilities - 工具类
- @layer 的作用：
- @layer base：基础样式，优先级最低
- @layer components：组件样式
- @layer utilities：工具类，优先级最高
- @apply 的使用：
- 在 CSS 中使用 Tailwind 类
- 只能用于 @layer 内
- 不能用于伪类选择器（如 :hover）
. 注意事项：
- 移除了 mixin.scss 导入（clearfix 已用 Tailwind 实现）
- 保留了 variables.scss（可能被 JS 通过 :export 使用）
- 保留了 sidebar.scss（包含 Element Plus 样式覆盖）
其次下面是一些基本的用法
- 类名映射：
js
// SCSS → Tailwind
position: relative; → class="relative"
height: 100%; → class="h-full"
width: 100%; → class="w-full"
position: fixed; → class="fixed"
top: 0; → class="top-0"
z-index: 9; → class="z-[9]"- 动态值处理：
js
// SCSS 变量
width: calc(100% - #{$sideBarWidth});
// Tailwind 任意值语法
class="w-[calc(100%-210px)]"- 过渡动画：
js
// SCSS
transition: margin-left 0.28s;
// Tailwind
class="transition-[margin-left] duration-[0.28s]"- 优势：
- 样式与 HTML 在一起，更直观
- 不需要在 和模板间切换
- 减少文件体积（Tailwind 会 tree-shake 未使用的类）
源码：
升级安装：github.com/mohaixiao/v...