TailWind CSS 核心用法
快速引入TailWind CSS
对于刚接触TailWind CSS的学习者而言，最快使用TailWind CSS的方式，是在HTML文档的<head>部分中，引入 CDN脚本。
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>然后就可以在HTML文档中使用TailWind提供的各种类了。
Tailwind CSS 主要组成部分
Tailwind CSS 是一个实用程序优先的 CSS 框架，它包括三个主要的部分：Base、Components 和 Utilities。下面是这三个部分的区别和说明：
Base
Base 部分包括所有的重置样式和基本样式，用于消除不同浏览器之间的样式差异并提供一个干净的样式起点。
Utilities
Utilities 是 Tailwind CSS 的核心，提供了大量的实用工具类，使开发人员可以迅速构建自定义设计。这些实用工具类包括边距、填充、颜色、字体大小等，它们可以直接应用于 HTML 元素，以快速实现所需的样式。
Components
Components 部分包括可重用的、定制的 UI 组件。这些组件是从基础样式和实用工具类中组合而成的，可以帮助开发人员更快速地构建复杂的界面。这个部分通常包括按钮、表单控件、卡片和其他常见的 UI 元素。
通过这三个部分的组合，Tailwind CSS 提供了一个灵活而强大的系统，使开发人员能够以一种高效和可维护的方式构建现代 web 界面。
TailWind CSS 基本样式
基本样式旨在消除跨浏览器的不一致，并使你更容易在设计系统的约束下工作。
- 从标题、块引用、段落等元素中删除所有默认边距。
- 所有标题元素都完全没有样式，并且与普通文本具有相同的字体大小和字体粗细。
- 有序和无序列表是无样式的，没有项目符号/数字，也没有边距或填充。
- 图片和其他嵌入元素（如 svg、video、canvas 等）默认为 display: block。
- 图片和视频以保留其固有纵横比的方式被限制在父级宽度内。这可以防止它们溢出容器并使它们默认响应。
- 全局重置边框样式，此重置可确保添加该类始终使用你配置的默认边框颜色添加实心 1px 边框。
TailWind CSS 工具类的使用
TailWind CSS 预设了很多工具类，数量上千，在开始使用时，可以查看官方文档。基本上原生CSS的属性，都有对应的工具类。
颜色的设定
使用诸如text-gray-700、bg-gray-100类似的类名，将不同的颜色值应用到文字颜色、边框颜色、背景颜色等等属性。
尺寸、间距
元素尺寸可以使用诸如w-32、h-64等类似的类名，进行大小的设置。元素之间的间距可以通过m-8、p-4类似的名称进行设置。
弹性盒
在弹性盒中，水平和垂直方向的对齐方式，可以分别设置。
布局
容器：如果你想要一个元素占据整个视窗宽度，只需避免给它添加任何宽度限制的类，包括 container 类。而container类，在不同尺寸的屏幕上有固定的大小。
重用样式
对于重复使用的样式内容，例如：
<button class="py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
Save changes
</button>可以通过@apply进行重用，其关键操作步骤为：
<style type="text/tailwindcss">
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
</style>通过@layer，增加了名为.btn-primary的组件。
完整案例如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
</style>
</head>
<body class="container mx-auto bg-gray-100">
<h1 class="text-3xl font-bold underline">Hello world!</h1>
<button class="btn-primary">Save changes</button>
</body>
</html>