认识 Tailwind CSS

Tailwind CSS 可以理解为是 HTML 和 CSS 的结合体，它是一种用于快速构建网页样式的 CSS 框架。通过使用一系列预设的样式类名，开发者能够像搭建积木一样，快速构建出精美的网页界面。

此视频需要订阅后观看

什么是 HTML，CSS，Tailwind CSS？

HTML（超文本标记语言）

HTML（超文本标记语言）是一种用于描述网页文档的结构和内容的语言。它与 CSS（层叠样式表）一起工作，CSS 用于控制这些内容的外观和布局。

例如，我们想要创建一个简单的按钮：


<button class="primary-button">点击我</button>

CSS（层叠样式表）

CSS（层叠样式表）是一种用于描述网页文档的样式的语言。它与 HTML（超文本标记语言）一起工作，HTML 用于定义网页的结构和内容，而 CSS 则用于控制这些内容的外观和布局。

对于上面的按钮，我们可以用 CSS 来设置它的样式：


.primary-button {
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 16px;
}

通过使用 CSS，开发者可以将样式与内容分离，使得网页的设计更加灵活和易于维护。

Tailwind CSS

同样的按钮，使用 Tailwind CSS 可以这样写：


<button class="bg-blue-500 text-white px-4 py-2 rounded text-base">
  点击我
</button>

这些类名会被 Tailwind 转换为对应的 CSS：


.bg-blue-500 {
  background-color: blue;
}
.text-white {
  color: white;
}
.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}
.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.rounded {
  border-radius: 4px;
}
.text-base {
  font-size: 16px;
}

为什么要用 Tailwind CSS？

Tailwind CSS 最大的特点是它的高效和灵活性。它就像是一个完美的工具箱，所有的工具都触手可及。你不需要写复杂的 CSS 代码，只需要使用预设的类名，就能快速构建出你想要的样式。它的按需打包机制确保了最终代码的精简，就像是一个会自动收纳的工具箱。

常用样式说明

样式类型类名示例说明颜色bg-blue-500, text-red-600设置背景颜色和文本颜色间距m-4, p-2设置外边距和内边距，数字越大间距越大排版font-bold, text-lg设置文本粗细和大小边框border, border-gray-300添加边框和设置边框颜色阴影shadow-md添加中等阴影效果

调整布局需要知道的参数

布局类型类名示例说明Flexboxflex, flex-row, flex-col启用 Flexbox，设置主轴方向Gridgrid, grid-cols-3, gap-4启用网格布局，设置列数和间距对齐items-center, justify-between设置垂直和水平对齐方式尺寸w-1/2, h-64设置宽度和高度

调整文字需要知道的参数

文字属性类名示例说明字体font-sans, font-serif, font-mono设置字体类型文本大小text-sm, text-lg, text-xl设置文本大小文本颜色text-gray-700, text-blue-500设置文本和链接颜色文本对齐text-left, text-center, text-right设置文本对齐方式行高leading-normal, leading-loose设置文本行高

调整颜色需要知道的参数

颜色属性类名示例说明背景颜色bg-red-500, bg-green-300设置背景颜色文本颜色text-blue-600, text-yellow-500设置文本颜色边框颜色border-blue-400, border-red-200设置边框颜色透明度bg-opacity-50, text-opacity-75设置背景和文本透明度

其他常用功能

功能类型类名示例说明阴影shadow, shadow-lg添加不同大小的阴影效果圆角rounded, rounded-lg, rounded-full设置不同程度的圆角过渡效果transition, duration-300设置过渡动画效果响应式设计sm:, md:, lg:设置不同屏幕尺寸下的样式黑暗模式dark:bg-gray-800, dark:text-white设置黑暗模式下的样式

暗黑模式

Tailwind CSS 支持暗黑模式，只需要在类名前加上 dark: 即可。


<div class="dark:bg-gray-800 dark:text-white">
  暗黑模式
</div>

同理：Hover，md:，lg:，sm: 等。


<div class="hover:bg-gray-800 hover:text-white dark:hover:bg-white dark:hover:text-gray-800">
    <button class="md:hover:bg-red-500 md:hover:text-white lg:hover:bg-blue-500 lg:hover:text-white sm:hover:bg-green-500 sm:hover:text-white">
  悬停效果
</div>

其他推荐的 Tailwind CSS 资源

除了上述付费模板外，还有许多优质的 Tailwind CSS 资源可供选择，有些是免费的，有些则提供免费和付费两种版本：

资源名称网址特点Easy Frontendhttps://easyfrontend.com/components 提供多种实用组件Flowbitehttps://flowbite.com/blocks/ 开源 Tailwind CSS 组件库Prelinehttps://preline.co/pro/examples.html 专业级 UI 组件库Tailushttps://html.tailus.io/blocks/hero-section/ 专注于 Hero 部分的设计TailGridshttps://tailgrids.com/components 丰富的网格布局组件TailSparkhttps://tailspark.co/components 多种营销类组件Kometa UI Kithttps://kitwind.io/products/kometa/components/pricings 优质定价表组件Buou UIhttps://buouui.com/docs/animations/dock 精美动画效果Sailboat UIhttps://sailboatui.com/ 现代化 UI 组件库Daisy UIhttps://daisyui.com/ 流行的组件库，支持主题Tailbitshttps://www.tailbits.com/ 实用组件集合Tailwind Toolboxhttps://www.tailwindtoolbox.com/ 模板和组件工具箱Tailwind Awesomehttps://www.tailwindawesome.com/ 精选资源集合Meraki UIhttps://merakiui.com/ 美观的组件库Lang UIhttps://www.langui.dev/ 专为语言应用设计Tail SChttps://tailsc.com/components/hero 专注于 Hero 组件Tailwind CSS 官方https://tailwindcss.com/ 官方文档和资源FreeSetshttps://freesets.dev/components 免费组件集

这些资源可以帮助你快速构建网站，无论是个人项目还是商业应用，都能找到适合的组件和模板。

写在最后

Tailwind CSS 就是你的样式管理助手，为你提供了一套完整的界面搭建工具。有了它，设计网页就像是在玩积木游戏，让开发变得轻松有趣。不用记忆复杂的 CSS 语法，不用担心样式冲突，Tailwind CSS 都帮你考虑好了。

🎨 Tailwind CSS 样式指南