前言
在前端开发中，CSS 的作用不言而喻。尽管从设计模式角度来看，CSS 被视为命令式设计的“原始工具”，但仍然不可避免地使其成为开发中的一个重要部分。因此，CSS 框架的出现自然成为前端开发过程中必不可少的一部分。Tailwind CSS 就是其中之一。
Tailwind CSS 是一个开源的工具集合，它使用类名称来实现 HTML 元素的样式控制。使用 Tailwind CSS，您将不再需要书写自定义的 CSS 样式表，通过简单的 HTML 类分类名称即可获取自动生成的样式。这种方式使得前端开发变得非常简单和快速。但是，对于一些开发者来说，这是否意味着他们可以完全放弃 CSS？答案是否定的。
在本篇文章中，我们将深入探讨使用 Tailwind CSS 和 CSS 的关系以及如何正确地使用这个框架和 CSS 达到更好的效果。
Tailwind CSS 和 CSS 的关系
在 Tailwind CSS 中，CSS 仍然是一个必不可少的一部分。Tailwind CSS 只是在 CSS 的基础上提供了一些特殊的类名称来快速设置样式而已。这并不意味着您可以完全放弃 CSS，而是需要学习如何与 CSS 一起使用。
特别是，在完成初次安装 Tailwind CSS 后，您需要为主样式表配置 CSS 样式。使用 CSS，您可以轻松地自定义和扩展 Tailwind CSS 的样式表，并创建符合品牌要求的定制化样式。
此外，除了配置之外，使用 CSS 还可以帮助您解决 Tailwind CSS 的某些限制。例如，Tailwind CSS 扩展库有时可能缺乏特定的类名称，这时您就需要使用 CSS 创建自定义类。因此，在许多情况下，使用 CSS 可以使您的工作更加容易和高效。
如何正确地使用 Tailwind CSS 和 CSS
虽然我们已经讨论了 Tailwind CSS 和 CSS 的关系，但这并不是一个非常明显的问题。如何正确使用 Tailwind CSS 和 CSS 才是关键。
- 配置 Tailwind CSS
首先，您需要为主样式表配置 CSS 样式。这可以通过运行“npx tailwindcss init”命令（需要在项目根目录下执行并安装 Tailwind CSS）来完成。在此文件中，您可以为样式表添加任何自定义 CSS。这些样式表将优先显示在生成的样式表中。
// 举例：覆盖默认背景颜色
.bg-gray-100 { background-color: #f9f9f9; }- 对于定制化样式，请使用自定义 CSS
对于定制化样式，您需要使用 CSS。尽管 Tailwind CSS 为多数情况提供了解决方案，但某些情况下，定制化样式是不可避免的。例如，通用网站会经常要求创建符合品牌标准的单独按钮或标识符。
// 定义网站的基本字体
body { font-family: Arial, sans-serif; }
// 自定义主题颜色
.brand-color { color: #ff0000; }- 在使用 Tailwind CSS 时，注意 CSS 的主题和规范
最后，即使在使用 Tailwind CSS 时，您也需要遵守 CSS 的主题和规范。例如，按照命名约定命名类名称、避免使用魔术数字等等。
-- -------------------- ---- ------- -- -------------- -- ------------------------- -- ------------------ ----- - ---------------- ------ - -------- - ------ --------------------- -
结论
在使用 Tailwind CSS 时，您不应该完全放弃 CSS。相反，您需要学会如何与 CSS 共同使用，优化您的前端开发过程。在上述示例中，您可以看到 Tailwind CSS 和 CSS 之间的关系以及如何同时使用它们。让您的开发变得更高效和更专业！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f53e16c5c563ced571b969