什么是Tailwind CSS

Tailwind CSS是一个实用优先(Utility-First)的 CSS 框架，
其核心思想是通过直接在 HTML 中组合预定义的类名来快速构建界面样式，无需编写传统 CSS 
或依赖预定义的组件。

Tailwind CSS关键特点

1.实用类驱动

• 原子化类名：提供大量细粒度的类（如 bg-blue-500 设置背景色，p-4 控制内边距），每个类对应单一的 CSS 属性。
• 直接应用：在 HTML 中通过组合类名实现样式，例如：

  
    
    
    
  
  
    


    
  

传统 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文件中引入
  
使用的是目前最新的版本4

环境验证

创建一个html文件

创建了一个高100px,宽100px,背景是橘黄色的div

使用浏览器打开该文件

如果浏览器展示下图，代表环境搭建成功