# Tailwind CSS 技能 Tailwind CSS 是一个实用程序优先的 CSS 框架，它通过提供预构建的实用程序类来实现快速 UI 开发。它通过扫描项目文件在构建时生成优化的 CSS，从而实现零运行时开销和最小化生产包。 ## 何时使用此技能在以下情况下使用此技能： * 使用移动优先设计构建响应式布局 * 实现深色模式和主题定制 * 创建具有一致间距、颜色和版式的定制设计系统 * 设计 React、Vue、Svelte 或任何 Web 框架组件 * 具有快速视觉反馈的原型界面 * 使用优化的 CSS 捆绑包构建生产应用程序 * 使用基于状态的样式（悬停、焦点、禁用等） * 使用 Grid 和 Flexbox 实用程序创建复杂的布局 ## 核心概念 ### 效用优先的方法 Tailwind 提供了低级实用程序类，您可以将它们直接应用于 HTML 元素，而不是编写自定义 CSS：

标题

**好处：** * 无 CSS 文件切换 - 样式与标记一起存在 * 无需命名约定 * 自动消除死代码 * 整个团队一致的设计令牌 * 快速迭代，无 CSS 膨胀 ### 构建时处理 Tailwind 在构建时扫描您的源文件并仅生成您实际使用的 CSS 类： // Tailwind 分析这些文件内容：[ "./src/**/*.{js,jsx,ts,tsx}", “./app/**/*.{js,jsx,ts,tsx}”, “./components/**/*.{js,jsx,ts,tsx}” ] 结果：优化的生产包，运行时开销为零。 ## 安装和设置 ### Vite 的现代设置 **第 1 步：安装依赖项** npm install -D tailwindcss @tailwindcss/vite # 或 pnpm add -D tailwindcss @tailwindcss/vite # 或纱线添加-D tailwindcss @tailwindcss/vite **第二步：配置Vite** // vite.config.ts 从“vite”导入{defineConfig} 从“@tailwindcss/vite”导入 tailwindcss 导出默认的defineConfig({ 插件：[tailwindcss()] }) **第3步：导入CSS** /* src/index.css */ @导入“tailwindcss”； **步骤 4：参考 HTML 中的样式表** <头> <正文>

你好，Tailwind！

### 特定于框架的设置 **Next.js（应用程序路由器）：** npx create-next-app@latest --tailwind **Next.js（手动）：** // tailwind.config.js 模块. 导出 = { 内容：[ “./app/**/*.{js,ts,jsx,tsx}”, “./components/**/*.{js,ts,jsx,tsx}” ] } **与Vite反应：** npm create vite@latest my-app -- --template React npm install -D tailwindcss @tailwindcss/vite **视觉：** npm install -D tailwindcss @tailwindcss/vite **苗条：** npm install -D tailwindcss @tailwindcss/vite **天文：** npx astro 添加顺风 ### PostCSS 设置（替代） npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p // postcss.config.js 导出默认值{ 插件：{ tailwindcss: {}, 自动前缀：{} } } ## 设计系统和代币 ### 默认设计系统 Tailwind 包括一个全面的默认设计系统： * **颜色**：18 个调色板，每个调色板有 11 种色调 (50-950) * **间距**：从 0.25rem 到 96rem 的一致比例 * **版式**：字体大小、粗细、行高 * **断点**：移动优先响应系统 * **阴影**：深度的高程系统 * **边框半径** ：不同比例的圆角 ### 自定义主题在 CSS 中使用 `@theme` 指令： @导入“tailwindcss”； @主题{ /* 自定义颜色 */ --color-brand-50: oklch(0.97 0.02 264); --color-brand-500: oklch(0.55 0.22 264); --color-brand-900: oklch(0.25 0.15 264); /* 自定义字体 */ --font-display: "Satoshi", "Inter", sans-serif; --font-body: "Inter"、系统用户界面、无衬线字体； /* 自定义间距 */ --spacing-18: 计算(var(--spacing) * 18); -- 导航栏间距：4.5rem； /* 自定义断点 */ --breakpoint-3xl: 120rem; --breakpoint-4xl: 160rem; /* 自定义阴影 */ --阴影发光: 0 0 20px rgba(139, 92, 246, 0.3); } **用途：**

自定义主题元素

### 颜色系统 **使用默认颜色：**

背景

文本

边框

**色标：** * 50：最轻 * 100-400：光变化 * 500：基色 * 600-800：深色变化 * 950：最黑暗 **颜色不透明度调节剂：**

75% 不透明度

30% 不透明度

87% 不透明度

## 实用类 ### 布局 **显示：**

阻止

内联块

Flex

内联 Flex

网格

**弹性盒：**

项目 1

项目 2

垂直堆叠

**网格：**

第 1 列

第 2 列

第 3 列

灵活

固定 500px

更灵活

**定位：**

已定位

固定

粘性标题

### 间距 **填充和边距：**

填充所有边

填充 X 和 Y

顶部/底部填充

给所有边留边距

水平居中

负边距

**间隙（弹性盒/网格）：**

有间隙的柔性

带有X/Y间隙的网格

### 版式 **字体大小：**

超小

小

基础 (16px)

大

超大

2XL

标题

**字体粗细：**

浅色 (300)

普通 (400)

中 (500)

半粗体 (600)

粗体 (700)

**文本对齐方式：**

左对齐

居中对齐

右对齐

合理

**行高：**

紧凑的行高

正常行高

宽松的行高

**组合字体实用程序：**

字体大小 4xl，行高较紧

### 颜色和背景 **背景颜色：**

白色背景

灰色背景

渐变背景

**文字颜色：**

深色文本

蓝色文本

链接 ### 边框

默认边框

2px边框

顶部和底部边框

圆角

大圆角

全圆角

组合

### 阴影

小阴影

中等阴影

大阴影

超大阴影

无阴影

## 响应式设计 ### 移动优先断点 Tailwind 采用移动优先的方法。基本样式适用于所有屏幕尺寸，然后使用断点前缀在较大尺寸下覆盖： **断点：** * `sm:` \- 640px 及以上 * `md:` \- 768px 及以上 * `lg:` \- 1024px 及以上 * `xl:` \- 1280px 及以上 * `2xl:` \- 1536px 及以上 **示例：**

项目 1

项目 2

项目 3

项目 4

仅限桌面内容

仅限移动设备的内容

响应式标题

### 自定义断点 @主题{ --breakpoint-3xl: 120rem; --断点-平板电脑：48rem； }

自定义断点

### 最大宽度查询

在移动设备上隐藏

仅在平板电脑上可见

### 容器查询基于父容器宽度的样式元素：

响应父级宽度

## 交互状态 ### 悬停状态 <按钮类=“bg-blue-500悬停：bg-blue-700文本-白色”> 将鼠标悬停在我身上悬停链接

悬停时缩放

### 焦点状态

标题

标题

标题

字体大小 4xl，行高较紧

响应式标题

深色模式卡

卡牌名称

{标题}

{{ 标题 }}

{标题}

顺风CSS

包含技能