认识 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`	添加中等阴影效果

调整布局需要知道的参数

布局类型	类名示例	说明
Flexbox	`flex`, `flex-row`, `flex-col`	启用 Flexbox，设置主轴方向
Grid	`grid`, `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 Frontend	https://easyfrontend.com/components	提供多种实用组件
Flowbite	https://flowbite.com/blocks/	开源 Tailwind CSS 组件库
Preline	https://preline.co/pro/examples.html	专业级 UI 组件库
Tailus	https://html.tailus.io/blocks/hero-section/	专注于 Hero 部分的设计
TailGrids	https://tailgrids.com/components	丰富的网格布局组件
TailSpark	https://tailspark.co/components	多种营销类组件
Kometa UI Kit	https://kitwind.io/products/kometa/components/pricings	优质定价表组件
Buou UI	https://buouui.com/docs/animations/dock	精美动画效果
Sailboat UI	https://sailboatui.com/	现代化 UI 组件库
Daisy UI	https://daisyui.com/	流行的组件库，支持主题
Tailbits	https://www.tailbits.com/	实用组件集合
Tailwind Toolbox	https://www.tailwindtoolbox.com/	模板和组件工具箱
Tailwind Awesome	https://www.tailwindawesome.com/	精选资源集合
Meraki UI	https://merakiui.com/	美观的组件库
Lang UI	https://www.langui.dev/	专为语言应用设计
Tail SC	https://tailsc.com/components/hero	专注于 Hero 组件
Tailwind CSS 官方	https://tailwindcss.com/	官方文档和资源
FreeSets	https://freesets.dev/components	免费组件集

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

写在最后

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