什么是Tailwind CSS
Tailwind CSS是一个实用优先(Utility-First)的 CSS 框架，
其核心思想是通过直接在 HTML 中组合预定义的类名来快速构建界面样式，无需编写传统 CSS
或依赖预定义的组件。
Tailwind CSS关键特点
1.实用类驱动
- 原子化类名：提供大量细粒度的类（如 bg-blue-500 设置背景色，p-4 控制内边距），每个类对应单一的 CSS 属性。
- 直接应用：在 HTML 中通过组合类名实现样式，例如：
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
传统 CSS 需要编写自定义类并定义样式，而 Tailwind 直接通过类名组合完成。2.高度可定制
- 配置文件支持：通过 tailwind.config.js 自定义颜色、间距、字体等设计系统参数。
- 扩展性：可轻松添加新类或覆盖默认值，适应项目需求。
3.响应式设计
- 前缀模式：通过添加 sm:、md:、lg: 等前缀，快速实现不同屏幕尺寸的适配。
例如：md:text-xl 表示在中等屏幕上使用大号字体。
4.开发效率与维护性
- 减少命名负担：无需为 CSS 类名纠结（如 .card-container vs .wrapper）。
- 代码量优化：结合 PurgeCSS 工具，自动删除未使用的 CSS 类，减少生产环境文件体积。
5.与传统框架的对比
- Bootstrap：提供预置组件（如导航栏、卡片），但灵活性较低；
Tailwind：不提供组件，但通过实用类实现更高自由度的设计。 - 传统 CSS：需维护独立样式文件，Tailwind 直接在 HTML 中编写样式。
环境搭建
引入js
1.后续的讲解主要针对TailWindCSS本身，所以不和React主流的JS框架集成，如果
需要和React框架集成，可以参考官网的安装方式
https://tailwindcss.com/docs/installation/using-vite
2.本次分享使用CND
使用方式在html文件中引入
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
使用的是目前最新的版本4
环境验证
创建一个html文件
创建了一个高100px,宽100px,背景是橘黄色的div
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
使用浏览器打开该文件
如果浏览器展示下图，代表环境搭建成功