- Tailwind CSS 教程
- Tailwind CSS - 首页
- Tailwind CSS - 路线图
- Tailwind CSS - 简介
- Tailwind CSS - 安装
- Tailwind CSS - 编辑器设置
- Tailwind CSS - 核心概念
- Tailwind CSS - 实用优先基础
- Tailwind CSS - 悬停、聚焦和其他状态
- Tailwind CSS - 响应式设计
- Tailwind CSS - 暗黑模式
- Tailwind CSS - 重用样式
- Tailwind CSS - 添加自定义样式
- Tailwind CSS - 函数和指令
- Tailwind CSS - 自定义
- Tailwind CSS - 配置
- Tailwind CSS - 内容配置
- Tailwind CSS - 主题配置
- Tailwind CSS - 自定义屏幕
- Tailwind CSS - 自定义颜色
- Tailwind CSS - 自定义间距
- Tailwind CSS - 插件
- Tailwind CSS - 预设
- Tailwind CSS - 基本样式
- Tailwind CSS - 预飞
- Tailwind CSS - 布局
- Tailwind CSS - 高宽比
- Tailwind CSS - 容器
- Tailwind CSS - 列
- Tailwind CSS - 分栏后
- Tailwind CSS - 分栏前
- Tailwind CSS - 分栏内
- Tailwind CSS - 边框装饰断开
- Tailwind CSS - 盒子尺寸
- Tailwind CSS - 显示
- Tailwind CSS - 浮动
- Tailwind CSS - 清除浮动
- Tailwind CSS - 隔离
- Tailwind CSS - 对象适配
- Tailwind CSS - 对象位置
- Tailwind CSS - 溢出
- Tailwind CSS - 滚动溢出行为
- Tailwind CSS - 定位
- Tailwind CSS - 上/右/下/左
- Tailwind CSS - 可见性
- Tailwind CSS - Z 轴索引
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - Flex 基准
- Tailwind CSS - Flex 方向
- Tailwind CSS - Flex 换行
- Tailwind CSS - Flex
- Tailwind CSS - Flex 伸长
- Tailwind CSS - Flex 缩减
- Tailwind CSS - 顺序
- Tailwind CSS - 网格模板列
- Tailwind CSS - 网格列开始/结束
- Tailwind CSS - 网格模板行
- Tailwind CSS - 网格行开始/结束
- Tailwind CSS - 网格自动填充
- Tailwind CSS - 网格自动列
- Tailwind CSS - 网格自动行
- Tailwind CSS - 间隙
- Tailwind CSS - 内容对齐
- Tailwind CSS - 项目对齐
- Tailwind CSS - 自身对齐
- Tailwind CSS - 内容排列
- Tailwind CSS - 项目排列
- Tailwind CSS - 自身排列
- Tailwind CSS - 内容放置
- Tailwind CSS - 项目放置
- Tailwind CSS - 自身放置
- Tailwind CSS - 间距
- Tailwind CSS - 内边距
- Tailwind CSS - 外边距
- Tailwind CSS - 元素间距
- Tailwind CSS - 尺寸
- Tailwind CSS - 宽度
- Tailwind CSS - 最小宽度
- Tailwind CSS - 最大宽度
- Tailwind CSS - 高度
- Tailwind CSS - 最小高度
- Tailwind CSS - 最大高度
- Tailwind CSS - 尺寸
- Tailwind CSS - 排版
- Tailwind CSS - 字体系列
- Tailwind CSS - 字体大小
- Tailwind CSS - 字体平滑
- Tailwind CSS - 字体样式
- Tailwind CSS - 字体粗细
- Tailwind CSS - 字体变体数字
- Tailwind CSS - 字间距
- Tailwind CSS - 行截断
- Tailwind CSS - 行高
- Tailwind CSS - 列表样式图像
- Tailwind CSS - 列表样式位置
- Tailwind CSS - 列表样式类型
- Tailwind CSS - 文本对齐
- Tailwind CSS - 文本颜色
- Tailwind CSS - 文本装饰
- Tailwind CSS - 文本装饰颜色
- Tailwind CSS - 文本装饰样式
- Tailwind CSS - 文本装饰粗细
- Tailwind CSS - 文本下划线偏移
- Tailwind CSS - 文本转换
- Tailwind CSS - 文本溢出
- Tailwind CSS - 文本换行
- Tailwind CSS - 文本缩进
- Tailwind CSS - 垂直对齐
- Tailwind CSS - 空白符
- Tailwind CSS - 断词
- Tailwind CSS - 连字符
- Tailwind CSS - 内容
- Tailwind CSS - 背景
- Tailwind CSS - 背景附件
- Tailwind CSS - 背景裁剪
- Tailwind CSS - 背景颜色
- Tailwind CSS - 背景原点
- Tailwind CSS - 背景位置
- Tailwind CSS - 背景重复
- Tailwind CSS - 背景尺寸
- Tailwind CSS - 背景图像
- Tailwind CSS - 渐变颜色停止
- Tailwind CSS - 边框
- Tailwind CSS - 边框半径
- Tailwind CSS - 边框宽度
- Tailwind CSS - 边框颜色
- Tailwind CSS - 边框样式
- Tailwind CSS - 分割线宽度
- Tailwind CSS - 分割线颜色
- Tailwind CSS - 分割线样式
- Tailwind CSS - 轮廓宽度
- Tailwind CSS - 轮廓颜色
- Tailwind CSS - 轮廓样式
- Tailwind CSS - 轮廓偏移
- Tailwind CSS - 环宽度
- Tailwind CSS - 环颜色
- Tailwind CSS - 环偏移宽度
- Tailwind CSS - 环偏移颜色
- Tailwind CSS - 效果
- Tailwind CSS - 盒子阴影
- Tailwind CSS - 盒子阴影颜色
- Tailwind CSS - 不透明度
- Tailwind CSS - 混合模式
- Tailwind CSS - 背景混合模式
- Tailwind CSS - 过滤器
- Tailwind CSS - 模糊
- Tailwind CSS - 亮度
- Tailwind CSS - 对比度
- Tailwind CSS - 投影
- Tailwind CSS - 灰度
- Tailwind CSS - 色相旋转
- Tailwind CSS - 反色
- Tailwind CSS - 饱和度
- Tailwind CSS - 棕褐色
- Tailwind CSS - 背景模糊
- Tailwind CSS - 背景亮度
- Tailwind CSS - 背景对比度
- Tailwind CSS - 背景灰度
- Tailwind CSS - 背景色相旋转
- Tailwind CSS - 背景反色
- Tailwind CSS - 背景不透明度
- Tailwind CSS - 背景饱和度
- Tailwind CSS - 背景棕褐色
- Tailwind CSS - 表格
- Tailwind CSS - 边框折叠
- Tailwind CSS - 边框间距
- Tailwind CSS - 表格布局
- Tailwind CSS - 标题位置
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 过渡属性
- Tailwind CSS - 过渡持续时间
- Tailwind CSS - 过渡时序函数
- Tailwind CSS - 过渡延迟
- Tailwind CSS - 动画
- Tailwind CSS - 变换
- Tailwind CSS - 缩放
- Tailwind CSS - 旋转
- Tailwind CSS - 平移
- Tailwind CSS - 倾斜
- Tailwind CSS - 变换原点
- Tailwind CSS - 交互性
- Tailwind CSS - 重音颜色
- Tailwind CSS - 外观
- Tailwind CSS - 光标
- Tailwind CSS - 插入符颜色
- Tailwind CSS - 指针事件
- Tailwind CSS - 调整大小
- Tailwind CSS - 滚动行为
- Tailwind CSS - 滚动边距
- Tailwind CSS - 滚动填充
- Tailwind CSS - 滚动捕捉对齐
- Tailwind CSS - 滚动捕捉停止
- Tailwind CSS - 滚动捕捉类型
- Tailwind CSS - 触摸操作
- Tailwind CSS - 用户选择
- Tailwind CSS - 将要更改
- Tailwind CSS - SVG
- Tailwind CSS - 填充
- Tailwind CSS - 描边
- Tailwind CSS - 描边宽度
- Tailwind CSS - 可访问性
- Tailwind CSS - 屏幕阅读器
- Tailwind CSS - 强制颜色调整
- Tailwind CSS - 附加
- Tailwind CSS - 与预处理器一起使用
- Tailwind CSS - 优化生产环境
- Tailwind CSS - 参考
- Tailwind CSS - 核心概念
- Tailwind CSS - 自定义
- Tailwind CSS - 布局
- Tailwind CSS - Flexbox 和 Grid
- Tailwind CSS - 间距
- Tailwind CSS - 尺寸
- Tailwind CSS - 排版
- Tailwind CSS - 背景
- Tailwind CSS - 边框
- Tailwind CSS - 效果
- Tailwind CSS - 过滤器
- Tailwind CSS - 表格
- Tailwind CSS - 过渡和动画
- Tailwind CSS - 变换
- Tailwind CSS - 交互性
- Tailwind CSS - 资源
- Tailwind CSS - 讨论
- Tailwind CSS - 有用资源
Tailwind CSS - 实用优先基础
Tailwind CSS 中的实用优先基础是指使用一系列小型、单一用途的预定义类来直接在 HTML 中为元素设置样式。与其为每个元素编写自定义 CSS,不如应用这些预定义的实用程序类来实现所需的外观。
自定义 CSS 与实用程序类
在设置网页样式时,您通常会编写自己的 CSS 代码来自定义事物的外观。
以下是一个使用自定义 CSS 实现特定设计的示例,展示了如何使用 CSS 代码应用自定义样式。
示例
<!DOCTYPE html> <html lang="en"> <head> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f7fafc; margin: 0; } .container { width: 100%; max-width: 900px; padding: 20px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .description { text-align: center; margin-bottom: 40px; color: #2d3748; } .description p { font-size: 20px; margin-bottom: 16px; } .description ul { list-style-type: disc; padding-left: 20px; text-align: left; color: #4a5568; } .description li { margin-bottom: 8px; } .description li strong { font-weight: bold; } .completed { color: #48bb78; } .current { color: #ecc94b; } .upcoming { color: #e2e8f0; } .tracker { position: relative; display: flex; align-items: center; padding: 0 20px; } .tracker::before { content: ''; position: absolute; top: 50%; left: 0; width: calc(100% - 40px); height: 4px; background: linear-gradient(to right, #48bb78 25%, #ecc94b 25% 50%, #e2e8f0 50% 75%, #e2e8f0 75%); z-index: 1; } .step { flex: 1; text-align: center; position: relative; z-index: 2; margin: 0 15px; } .step div { width: 48px; height: 48px; border-radius: 50%; color: #ffffff; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 24px; } .step:nth-child(1) div { background-color: #48bb78; /* Completed */ } .step:nth-child(2) div { background-color: #ecc94b; /* Current */ } .step:nth-child(3) div { background-color: #e2e8f0; /* Upcoming */ } .step:nth-child(4) div { background-color: #e2e8f0; /* Upcoming */ } .step span { display: block; font-size: 16px; color: #4a5568; } </style> </head> <body> <div class="container"> <div class="description"> <p>This tracker shows your progress through different stages:</p> <ul> <li><strong class="completed">Completed:</strong> Finished steps</li> <li><strong class="current">Current:</strong> The active step</li> <li><strong class="upcoming">Upcoming:</strong> Future steps</li> </ul> </div> <div class="tracker"> <div class="step"> <div>✓</div> <span>Step 1</span> </div> <div class="step"> <div>▶</div> <span>Step 2</span> </div> <div class="step"> <div>•</div> <span>Step 3</span> </div> <div class="step"> <div>•</div> <span>Step 4</span> </div> </div> </div> </body> </html>
您可以通过直接在 HTML 中应用预定义的实用程序类来使用 Tailwind CSS 实现相同的样式。此方法使设置网页样式更快更容易,无需编写自定义 CSS。
以下是如何使用 Tailwind CSS 重新创建相同的设计
示例
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="flex justify-center items-center h-screen bg-gray-100"> <div class="w-full max-w-3xl px-4 py-6 bg-white rounded-lg shadow-md"> <div class="text-center mb-8 text-gray-800"> <p class="text mb-4 ml-4">This tracker shows your progress through different stages:</p> <ul class="list-disc list-inside text-left text-gray-600"> <li><strong class="text-green-500">Completed:</strong> Finished steps</li> <li><strong class="text-yellow-500">Current:</strong> The active step</li> <li><strong class="text-gray-300">Upcoming:</strong> Future steps</li> </ul> </div> <div class="relative flex items-center"> <div class="absolute inset-0 flex items-center pointer-events-none"> <div class="flex-1 h-1 bg-green-500"></div> <div class="flex-1 h-1 bg-yellow-400"></div> <div class="flex-1 h-1 bg-gray-300"></div> <div class="flex-1 h-1 bg-gray-300"></div> </div> <!-- Steps --> <div class="flex-1 text-center relative z-10"> <div class="w-12 h-12 rounded-full bg-green-500 text-white flex items-center justify-center mx-auto mb-2 text-2xl"> ✔ </div> <div class="text-sm">Step 1</div> </div> <div class="flex-1 text-center relative z-10"> <div class="w-12 h-12 rounded-full bg-yellow-500 text-white flex items-center justify-center mx-auto mb-2 text-2xl"> ▶ </div> <div class="text-sm">Step 2</div> </div> <div class="flex-1 text-center relative z-10"> <div class="w-12 h-12 rounded-full bg-gray-200 text-white flex items-center justify-center mx-auto mb-2 text-2xl"> • </div> <div class="text-sm">Step 3</div> </div> <div class="flex-1 text-center relative z-10"> <div class="w-12 h-12 rounded-full bg-gray-200 text-white flex items-center justify-center mx-auto mb-3 text-2xl"> • </div> <div class="text-sm">Step 4</div> </div> <div class="absolute right-0 top-1/2 w-1/4 h-px bg-gray-300"></div> </div> </div> </body> </html>
在上面的示例中,我们使用 Tailwind CSS 实用程序类重新创建了相同的设计
- 主体使用 **flex**、**justify-center** 和 **items-center** 将内容在视口(**h-screen**)中水平和垂直居中。
- 容器为全宽(**w-full**),最大宽度为 **max-w-3xl**,并带有内边距(**px-4** 和 **py-6**)。
- 它具有白色背景(**bg-white**)、圆角(**rounded-lg**)和中等阴影(**shadow-md**)。
- 文本对齐和颜色由 **text-center**(居中)、**text-gray-800**(主体文本)和 **text-gray-600**(列表项)处理。
- 字体大小使用 **text-xl**(段落)和 **text-sm**(步骤标签)设置,步骤指示器内的文本更大(**text-2xl**)。
- 列表使用 **list-disc** 用于圆点项目符号,并使用 **list-inside** 用于内边距。步骤指示器具有统一的尺寸(**w-12** 和 **h-12**),为圆形(**rounded-full**),并使用 **flex**、**items-center** 和 **justify-center** 居中。
- 颜色使用 **bg-green-500**、**bg-yellow-500** 和 **bg-gray-200** 应用,而进度线和拖尾线使用 **bg-gray-300**。
- 相对和绝对定位管理进度线的布局,使用 **inset-0** 跨越整个宽度。拖尾线的位置使用 **right-0** 和 **top-1/2**。
- 边距使用 **mb-2** 和 **mb-3** 进行调整,以在元素之间提供间距。
使用 Tailwind CSS 可以帮助您快速构建自定义设计,而无需编写大量额外的 CSS。您无需从头创建新样式,而是直接在 HTML 中使用预定义的实用程序类,这可以加快开发速度并产生更简洁的代码。
为什么要使用 Tailwind CSS?
起初,这种方法可能看起来有点令人困惑,您可能想知道为什么它优于编写自己的自定义 CSS。如果您不熟悉它,它看起来可能很复杂。但是,一旦您开始使用 Tailwind CSS,您就会发现很多好处。
- **更快的开发:**Tailwind CSS 可以加快您的工作流程,因为您可以直接在 HTML 中为元素设置样式。这意味着减少了在 HTML 和 CSS 文件之间切换的时间。
- **设计一致性:**实用程序类有助于保持设计的一致性。由于您在整个项目中都使用同一组类,因此更容易维护统一的外观。
- **简化的更新:**当您需要更改设计时,可以在 HTML 中直接进行。这使得更新设计变得简单且不易出错。
- **更小的 CSS 文件:**通过使用 Tailwind 的实用程序类,您可以避免编写大量自定义 CSS。这通常会导致更小的 CSS 文件并可以缩短页面加载时间。
- **响应式设计:**Tailwind 带有内置的类,用于使您的设计具有响应能力。这意味着更容易创建在所有屏幕尺寸上看起来都很好的布局,而无需额外的工作。
- **易于自定义:**Tailwind 是高度可定制的。您可以轻松调整其配置以满足您的特定设计需求和偏好。
- 学习曲线平缓:虽然可能需要一些时间来适应,但许多人发现,与从头编写自定义 CSS 规则相比,实用优先的方法更容易学习和使用。
简而言之,虽然 Tailwind CSS 乍一看可能有点让人不知所措,但它的优势可以使您的编码过程更快、更高效。值得尝试一下,看看它如何改善您的工作流程。
为什么不直接使用内联样式?
您可能会认为使用内联样式——在 HTML 元素中使用style属性直接应用 CSS——是一种快速简便的页面样式化方法。虽然它看起来很简单,但这种方法有几个缺点。
内联样式会使您的代码变得杂乱,并使其更难以管理和更新,因为更改需要在多个地方进行。它们还将设计与内容结合在一起,导致 HTML 变得杂乱。
相反,Tailwind 实用程序类提供了一种更有效的方法
- 设计一致性:内联样式通常涉及使用特定值,这可能导致设计不一致。然而,Tailwind 实用程序类是预定义设计系统的一部分。这有助于您轻松地在整个项目中保持统一的外观。
- 响应式设计:内联样式不支持媒体查询,而媒体查询对于使您的网站在不同设备上看起来良好至关重要。Tailwind 包含响应式实用程序,允许您创建能够平滑适应各种屏幕尺寸的设计。
- 状态样式:内联样式无法处理悬停或焦点等交互式状态。使用 Tailwind,您可以轻松地使用内置状态变体来设置这些状态的样式,从而轻松创建交互式元素。
简而言之,与内联样式相比,Tailwind 实用程序类提供了一种更具组织性、更高效且更利于性能的方式来设置网页的样式。
以下是如何使用 Tailwind CSS 处理悬停和焦点等交互式状态。
示例
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="flex flex-col justify-center items-center h-screen bg-gray-100"> <div class="max-w-sm w-full py-6 bg-white shadow-lg rounded-lg text-center"> <h2 class="text-xl font-semibold mb-4"> Interactive Button Example </h2> <button class="bg-blue-500 text-white py-2 px-4 rounded-lg outline-none hover:ring-2 ring-indigo-900 hover:bg-blue-800"> Hover & Focus Me </button> <div class="text-sm"> <p class="hover:text-blue-800 mt-2"> Hover: Darker Blue </p> <p class="mt-1 text-blue-300"> Focus: Light Blue Ring </p> </div> </div> </body> </html>
在上面的示例中,按钮在悬停时颜色会发生变化,使用hover:bg-blue-800。outline-none类删除默认轮廓,ring-2 ring-indigo-900在按钮获得焦点时添加蓝色环。
可维护性问题
在使用 Tailwind CSS 时,您可能会担心管理许多实用程序类,尤其是在它们在整个项目中重复出现时。好消息是 Tailwind 提供了针对这些问题的简单解决方案。
以下是一些处理这些问题的技巧
- 使用组件:为常见的实用程序组合创建可重用的组件。例如,常用的按钮样式可以组合成一个组件。
<!-- PrimaryButton.vue --> <template> <button class="bg-blue-500 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-lg"> <slot/> </button> </template>
- 编辑器功能:现代代码编辑器提供诸如多光标编辑和简单循环等功能,这使得一次更新多个实用程序类变得更容易。
总的来说,管理 Tailwind CSS 项目可能比维护大型传统 CSS 代码库更简单,因为 HTML 通常比复杂的 CSS 规则更容易管理。许多大型公司成功地使用 Tailwind CSS,证明了它在实际应用中的实用性。