VitePress

Appearance

安装 ​

v3 ​

bash
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init

tailwind.config.js

js
/** @type {import('tailwindcss').Config} */
export default {
    content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
}

postcss.config.js

js
export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

app.vue

css
@tailwind base;
@tailwind components;
@tailwind utilities;

v4(推荐使用vite) ​

bash
npm install tailwindcss @tailwindcss/vite

vite.config.ts

js
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
    plugins: [
        tailwindcss(),
    ],
})

app.vue

css
@import "tailwindcss";

一、核心命名规则 ​

Tailwind 类名的通用格式：

[前缀]:[属性值] // 基础格式（如 p-4、bg-red-500）
[响应式前缀]:[前缀]:[属性值] // 响应式（如 md:p-6）
[状态前缀]:[前缀]:[属性值] // 状态（如 hover:bg-red-600）
[变体前缀]/[值]:[前缀]:[属性值] // 变体（如 dark:bg-gray-800、rtl:float-right

二、基础布局类 ​

1rem=16px 1-4px

1. 尺寸（Width/Height） ​

类名写法含义示例
w-[值]宽度w-full（100%）、w-1/2（50%）、w-20（5rem）、w-auto、w-screen（视口宽度）、w-fit（自适应内容）
h-[值]高度h-full、h-32（8rem）、h-screen、h-auto、h-fit
min-w-[值]最小宽度min-w-0、min-w-full、min-w-[200px]
min-h-[值]最小高度min-h-screen、min-h-[300px]
max-w-[值]最大宽度（预设容器）max-w-sm（640px）、max-w-xl（1280px）、max-w-none
max-h-[值]最大高度max-h-full、max-h-[500px]

2. 边距（Margin/Padding） ​

类名写法含义示例
p-[值]四周边距p-4（1rem）、p-0、p-[10px]
px-[值]水平边距（左右）px-6、px-auto
py-[值]垂直边距（上下）py-8、py-[15px]
pt/pr/pb/pl-[值]上/右/下/左边距pt-2、pl-[8px]
m-[值]四边外边距m-4、m-0、m-auto（水平居中）
mx-[值]水平外边距mx-auto、mx-6
my-[值]垂直外边距my-8、my-[10px]
mt/mr/mb/ml-[值]上/右/下/左外边距mt-3、mb-[-5px]（负边距）

3. 定位（Position） ​

类名写法含义示例
static/relative/absolute/fixed/sticky定位类型relative、absolute
top/right/bottom/left-[值]定位偏移top-0、right-4、left-1/2、bottom-[-10px]
z-[值]z-indexz-10、z-50、z-auto、z-[999]

4. 显示与溢出（Display/Overflow） ​

类名写法含义示例
block/inline/inline-block/flex/inline-flex/grid/inline-grid显示类型flex、block、hidden
overflow-[值]溢出处理overflow-hidden、overflow-auto、overflow-scroll、overflow-x-hidden
truncate单行文本截断（省略号）truncate
text-ellipsis省略号（需配合overflow）text-ellipsis
whitespace-[值]空白处理whitespace-nowrap（不换行）

三、弹性布局 & 网格布局 ​

1. Flex 布局 ​

类名写法含义示例
flex-direction-[值]排列方向flex-row（默认）、flex-col、flex-row-reverse
flex-wrap-[值]换行flex-wrap、flex-nowrap
justify-content-[值]主轴对齐justify-center、justify-between、justify-around、justify-start
items-[值]交叉轴对齐items-center、items-start、items-end、items-baseline
content-[值]多行主轴对齐content-center、content-between
flex-[值]伸缩比例flex-1、flex-auto、flex-none
order-[值]排列顺序order-0、order-1、order-[-1]
gap-[值]子元素间距gap-4、gap-x-2、gap-y-6

2. Grid 布局 ​

类名写法含义示例
grid-cols-[值]列数grid-cols-3（3列）、grid-cols-1/2（自定义）、grid-cols-[1fr,2fr]
grid-rows-[值]行数grid-rows-2、grid-rows-[auto,1fr]
col-span-[值]列跨度col-span-2、col-span-full（占满）
row-span-[值]行跨度row-span-3、row-span-full
justify-items-[值]单元格水平对齐justify-items-center、justify-items-start
align-items-[值]单元格垂直对齐align-items-center
place-items-[值]单元格居中（合并）place-items-center
grid-flow-[值]自动排列方向grid-flow-row、grid-flow-col

四、视觉样式 ​

1. 背景 ​

类名写法含义示例
bg-[颜色值]背景色bg-red-500、bg-gray-100、bg-[#f0f0f0]、bg-transparent
bg-opacity-[值]背景透明度bg-opacity-50（50%）、bg-opacity-[75%]
bg-gradient-[方向]渐变背景bg-gradient-to-r（从左到右）、bg-gradient-to-br（左下到右上）
bg-[url]背景图片bg-[url(‘/img.jpg’)]
bg-repeat-[值]背景重复bg-repeat、bg-no-repeat、bg-repeat-x
bg-position-[值]背景位置bg-center、bg-top-right、bg-[20px_30px]
bg-size-[值]背景尺寸bg-cover、bg-contain、bg-[100px_200px]

2. 文本样式 ​

类名写法含义示例
text-[颜色值]文本颜色text-blue-600、text-[#333]、text-white
text-opacity-[值]文本透明度text-opacity-80
text-[大小]字体大小text-sm（0.875rem）、text-xl（1.25rem）、text-3xl、text-[20px]
font-[权重/样式]字体样式font-bold（700）、font-medium（500）、font-normal、font-italic、font-sans（无衬线）
leading-[值]行高leading-normal、leading-loose、leading-[1.8]
tracking-[值]字间距tracking-tight、tracking-wide、tracking-[2px]
text-[对齐]文本对齐text-left、text-center、text-right、text-justify
text-[转换]文本转换text-uppercase（大写）、text-lowercase、text-capitalize（首字母大写）

3. 边框 ​

类名写法含义示例
border-[值]边框宽度border（1px）、border-2、border-0、border-t（仅上边框）
border-[颜色]边框颜色border-gray-300、border-[#ddd]、border-transparent
border-opacity-[值]边框透明度border-opacity-50
rounded-[值]圆角rounded（默认）、rounded-lg、rounded-full（圆形）、rounded-tl-[10px]（左上圆角）
outline-[值]外轮廓outline-none、outline-2、outline-blue-500

4. 阴影 ​

类名写法含义示例
shadow-[值]阴影shadow-sm、shadow、shadow-lg、shadow-xl、shadow-none
shadow-[颜色]阴影颜色shadow-red-500/50（半透明）、shadow-[#000]/20
ring-[值]聚焦环（替代outline）ring-2、ring-blue-500、ring-offset-2（环偏移）

5. 交互样式 ​

类名写法含义示例
cursor-[值]鼠标指针cursor-pointer、cursor-default、cursor-not-allowed
pointer-events-[值]指针事件pointer-events-none（禁用点击）、pointer-events-auto
select-[值]文本选择select-none（禁止选择）、select-text
opacity-[值]整体透明度opacity-50、opacity-100、opacity-0

五、响应式与状态变体 ​

1. 响应式前缀（基于断点） ​

前缀断点宽度含义示例
sm:≥640px小屏幕sm:flex
md:≥768px中等屏幕md:w-1/2
lg:≥1024px大屏幕lg:px-8
xl:≥1280px超大屏幕xl:grid-cols-4
2xl:≥1536px特大屏幕2xl:text-4xl

2. 状态前缀 ​

前缀含义示例
hover:鼠标悬停hover:bg-blue-600
focus:焦点（键盘/点击）focus:ring-2
active:激活状态active:bg-blue-700
focus-visible:可视焦点focus-visible:outline-none
disabled:禁用状态disabled:opacity-50
checked:选中状态（单选/复选）checked:bg-green-500
visited:链接已访问visited:text-purple-600
group-hover:父元素hovergroup-hover:text-white

3. 特殊变体 ​

前缀含义示例
dark:暗黑模式dark:bg-gray-800
rtl:从右到左布局rtl:float-right
motion-safe:开启动画时生效motion-safe:animate-fade
print:打印样式print:hidden

六、动画与过渡 ​

1. 过渡（Transition） ​

类名写法含义示例
transition启用过渡transition
transition-[属性]过渡属性transition-colors、transition-all、transition-[opacity,transform]
duration-[值]过渡时长duration-300、duration-[500ms]
ease-[值]过渡曲线ease-in、ease-out、ease-in-out

2. 动画（Animation） ​

类名写法含义示例
animate-[动画名]启用动画animate-spin（旋转）、animate-pulse（脉冲）、animate-bounce（弹跳）
@keyframes 自定义自定义动画animate-[my-animation]（需自定义keyframe）

七、自定义类名 ​

Tailwind 支持通过 [] 编写任意值的类名，覆盖预设值：

  • 数值自定义：w-[200px]、h-[50vh]、m-[1.5rem]
  • 颜色自定义：bg-[#123456]、text-[rgb(255,0,0)]
  • 复合属性：grid-cols-[1fr,2fr,1fr]、shadow-[0_4px_6px_rgba(0,0,0,0.1)]

八、核心速记规则 ​

  • 缩写原则：常用属性缩写（p=padding、m=margin、w=width、h=height、bg=background、text=color 等）；
  • 数值映射：预设数值（如 4=1rem、8=2rem）基于 rem 单位，适配响应式；
  • 颜色体系：颜色名+权重（如 red-500 是标准红，red-600 更深），支持透明通道（如 red-500/50）；
  • 重置类：reset 相关（如 border-0、m-0、p-0）用于清除默认样式。

补充说明 ​

  • 完整类名列表可参考 Tailwind 官方文档（含最新特性）；
  • 可通过 tailwind.config.js 自定义预设值（如颜色、尺寸、断点）；
  • 生产环境需开启 PurgeCSS 或 JIT 模式，移除未使用的类名，减小体积。

以上覆盖了 Tailwind CSS 99% 的核心类名体系，遵循“原子化、语义化、可扩展”的原则，掌握后可快速构建任意界面样式。

配合shadcn ​

bash
npm install class-variance-authority clsx tailwind-merge lucide-vue-next tw-animate-css

tsconfig.json

json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

src/assets/global.css

css
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

src/lib/utils.ts

ts
import type { ClassValue } from 'clsx'
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs))
}

components.json

json
{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": true,
  "tailwind": {
    "config": "",
    "css": "src/assets/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "composables": "@/composables",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib"
  },
  "iconLibrary": "lucide"
}