为什么将 Tailwind CSS 原子类添加到项目中❓

问题

• 当项目中有许多 UI 开发人员时，开始以自己的方式编码组件，每个组件根据需要声明自己的自定义 css 类。

传统方式

当我们考虑一个简单的众所周知的问题时，将“div”放在页面的中心，这就是我们通常创建一个具有所有必要样式的类的方式。

• 由于所有这些类都在全局范围内可用，因此任何开发人员都可以自由使用它们。

优点

• 显着减小 CSS Bundle 大小。
• 确保组件样式在整个团队中保持一致。
• 开发人员可以快速原型化他们的想法，而无需花费太多精力重做相同的风格。

缺点

• 学习曲线，每个开发人员都需要熟悉已经存在的类。
• 在添加这些全局声明的类供其他人使用时，项目需要保留适当的文档。

Vue JS 陷阱

:deep() / ::v-deep

• 贝恩？ Vue JS css 定位。

传统课程

• 为类定位和应用样式非常简单

泰风课程

• 开发人员在定位“div”时需要非常有创意

如何将 Tailwind CSS 类引入您的应用程序

传统方式

• 我们可以使用
轻松安装它们

Tailwind 安装

• 但这将在全局范围内安装（即注册）所有类的过多。

非常规？方式

• 当您的应用程序已经有一个现有的 css 库时，最好选择我们需要的类并将它们添加到一个 css 文件中，然后在应用程序中全局注册。

• 假设您的应用程序只需要 Flexbox 样式的灵活性
  -- 从 Flex 样式中获取您需要的类列表

• 樱桃选课吗？认为 ？您的应用程序需求，并根据需要添加它们。

• 通过这种方式，我们可以保持 CSS 包很小，但开发团队需要严格控制他们应用的 CSS？.
  

结论

• 使用Atomic类和Tailwind作为参考可以
• 减少项目的 CSS 占用空间。
• 在整个应用程序中保持样式一致性。
• 通过快速原型设计提高开发人员速度。 ？

以上是为什么将 Tailwind CSS 原子类添加到项目中❓的详细内容。更多信息请关注PHP中文网其他相关文章！