📝 主旨内容

主要作用

• 快速原型开发： Tailwind CSS 的功能类方法使得从设计到实现的过程极为快速，极大地加速了原型开发和迭代。

• 高度定制化： 尽管是一个框架，Tailwind CSS 提供了极高的定制能力，使开发者能够轻松创建符合品牌或设计指南的独特界面。

• 响应式设计： 内置的响应式设计工具使得创建在不同设备上都表现良好的设计变得简单。

特点

• 功能类优先： 与传统 CSS 框架不同，Tailwind CSS 通过提供底层实用工具类（例如用于设置边距、颜色、字体大小等的类）来帮助你构建设计，而不是预设的组件。

• 可配置性： Tailwind CSS 可以通过配置文件进行高度定制，允许你定义设计系统的基础，如颜色、字体、边距等。

• 原子性： 每个工具类都是原子性的，意味着它们只做一件事情（例如，只设置边距或只改变颜色），这使得构建的界面易于调整和维护。

• 即刻反馈： 在开发过程中，你可以立即看到添加或更改类时的效果，这减少了上下文切换并加速了开发流程。

• 强大的社区和插件生态系统： 有大量的第三方插件和工具可用于扩展 Tailwind CSS 的功能，以及一个活跃的社区，你可以从中找到支持和灵感。

• 减少冗余代码： 使用 Tailwind CSS，你通常会发现生成的 CSS 文件比传统手写方式更小，因为它通过重用实用工具类来减少冗余。

• 与现代构建工具集成： Tailwind CSS 与现代前端构建工具（如 Webpack、Rollup、Vite 等）和预处理器（如 PostCSS）集成良好，使得开发流程更加流畅。

项目初始化tailwindcss

在当前目录下使用vite创建vue3项目

1. 安装Tailwind CSS和相关依赖

2. 在项目根目录下创建一个名为tailwind.config.js的配置文件：

3. 配置PostCSS,在项目根目录下创建一个名为postcss.config.cjs的配置文件，并添加以下内容：

4. 在你的主样式文件（通常是src/style.css）中，导入Tailwind CSS的三个部分：

5. 在tailwind.config.js文件中，配置Tailwind CSS的content属性，以告诉Tailwind CSS需要扫描哪些文件来查找类名：

6. 现在你已经完成了Tailwind CSS的配置，你可以开始在你的Vue组件中使用Tailwind CSS的类名来样式化你的应用程序了。例如：

🤗 总结归纳

📎 参考文章/链接

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

https://tailwindcss.com/

Installation - Tailwind CSS

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

https://tailwindcss.com/docs/installation