Tailwind css

Tailwind css是一个实用工具优先的css框架，可以快速构建现代网站，而不需要离开你的html。

快速构建现代网站，无需离开 HTML。
一个实用程序优先的 CSS 框架，其中包含 、 等类，可以直接在标记中组合以构建任何设计。flexpt-4text-centerrotate-90

构建任何东西 认真地建造你想要的任何东西。
因为 Tailwind 非常低级，所以它从不鼓励您两次设计同一个网站。即使使用相同的调色板和大小比例，也很容易在下一个项目中构建具有完全不同外观的相同组件。

性能 它很小——再也不用发布未使用的 CSS。
Tailwind 在为生产环境构建时会自动删除所有未使用的 CSS，这意味着您的最终 CSS 包是最小的。事实上，大多数 Tailwind 项目向客户端交付的 CSS 不到 10kB。

移动优先 应有尽有。
在CSS中处理一堆复杂的媒体查询很糟糕，因此Tailwind可以让你直接在HTML中构建响应式设计。
将屏幕大小放在任何实用程序类的前面，然后观察它在特定断点处神奇地应用。

状态变体 悬停和焦点状态？我们得到了他们。
想在悬停时设置样式吗？坚持在要添加的类的开头。适用于 、 、 、 、 ，甚至是我们自己发明的奇特状态。hover:focusactivedisabledfocus-withinfocus-visiblegroup-hover

组件驱动 担心重复？别这样。
如果你一遍又一遍地重复相同的实用程序，你所要做的就是将它们提取到一个组件或模板中，然后砰地——你有一个单一的事实来源，所以你可以在一个地方进行更改。

不了解组件框架？
使用 Tailwind 的指令，只需复制并粘贴类名列表，即可将重复的实用程序模式提取到自定义 CSS 类中。@apply

深色模式 现在有了深色模式。
不想成为那些在凌晨 2 点在手机上打开它时使人们失明的网站之一？在配置文件中启用深色模式，然后在深色模式处于活动状态时，在任何颜色实用程序的前面应用它。适用于背景颜色、文本颜色、边框颜色，甚至渐变。dark:

定制 扩展它，调整它，改变它。
Tailwind 包含一组开箱即用的专业设计的默认值，但实际上一切都可以自定义——从调色板到间距比例，从框阴影到鼠标光标。
使用 tailwind.config.js 文件来制作你自己的设计系统，然后让 Tailwind 将其转换为你自己的自定义 CSS 框架。

现代功能 尖端是我们的舒适区。
Tailwind 无疑是现代的，它利用了所有最新和最伟大的 CSS 功能，使开发人员的体验尽可能愉快。
我们拥有一流的 CSS 网格支持、由 CSS 变量提供支持的可组合转换和渐变、对现代状态选择器（如 ）的支持等等。:focus-visible

编辑器工具 世界一流的 IDE 集成。
担心记住所有这些类名？适用于 VS Code 的 Tailwind CSS IntelliSense 扩展可以满足你的需求。
获取智能自动完成建议、linting、类定义等，所有这些都在编辑器中完成，无需配置。

现成的组件 使用 Tailwind UI 更快地移动。
Tailwind UI 是一组美观、完全响应式的 UI 组件，由我们（Tailwind CSS 的创建者）设计和开发。它有数百个现成的示例可供选择，并保证帮助您找到想要构建的完美起点。

开始使用 Tailwind CSS
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。
它快速、灵活、可靠，运行时间为零。