我错误地使用了 Tailwind，所以你不必这样做

大约 3 年前，我遇到了 Tailwind CSS，一个很棒的网站开发库。为了使本文保持简短，我不会浪费文字来介绍它。已经有很多资源可供学习。相反，我想分享一个关于我在 Tailwind 早期不断犯的错误的故事。没必要和我一样掉进同一个坑。

Tailwind 通过将 CSS 规则包装到所谓的 实用程序类 中，打破了 级联样式表 的传统概念。您无需在 .css 文件中编写 CSS 规则，而是直接在 DOM 元素上编写类名称。虽然这种方法一开始感觉不自然和奇怪，但它很快就变得有意义了。我花了大约一天的时间才开始接触它，现在我不想再编写纯 CSS，除非被迫。 Tailwind 无缝集成到我的 #1 框架 Nuxt 中，在几分钟内创建具有视觉吸引力的响应式友好网站的简单性真是太棒了。

但是有一个问题。您知道的选项越多，选择包含的样式越多，HTML 就会变得混乱。我早年感受到的第二个问题是重复自己。作为一名光荣的 DRY 原则追随者，在我的模板中多次看到相同的类序列让我的眼睛很受伤。

我正在尝试优化它。

第一个想法是将 Tailwind 类序列提取为字符串变量。在 Vue.js 中（Nuxt 是在 Vue 之上构建的），它看起来大致是这样的。

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

最后，更容易维护和更改。其清晰度值得商榷。特别是如果您的应用程序周围有相同的元素，并且您需要将定义提升到一些类似全局的常量中。

我正在进一步寻找更好的解决方案。

并向我介绍了 Tailwind 的 @apply 指令。基本上，这就像对整个概念的否定。您可以创建自己的 sort-of-a-stylesheet 并用自定义类和元素调整填充它，而不是直接将定义放在具体元素上。只是您可以从 Tailwind 实用程序类中构建解决方案，而不是简单的 CSS 规则。

很奇怪，但它似乎可以解决我重复定义的心理问题。

VueSchool 导师和 Tailwind 文档都警告我不要使用它，但我自然没有听。

我使用这种方法创建了几个网站。它起作用了。问题解决了，或者？

快进到 2024 年末。我对我的一个网站有了一些新想法。我开始编码。我完全忘记了一年多前我所做的@apply恶作剧。突然，我发现自己无法将布局组合在一起。

虽然我的模板中没有使用明显的样式，但我的

却偏离了位置。到底是怎么回事？我在浏览器中打开开发控制台来研究渲染的 HTML。它们应用了 CSS 样式。

过了一些令人沮丧的时刻后，我找到了罪魁祸首。

突然，有：

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

在 tailwind.css 文件中看起来不像 2023 年那么好主意。

谁应该知道有一天我会需要别的东西，嗯？

第 1 课

永远、永远、永远在元素选择器上全局使用@apply。

虽然当你搭建一个新项目时它可能看起来很方便，但从长远来看它可能会给你带来麻烦。不仅你可以像我一样轻易地忘记它。它还使事情变得不那么灵活。有一天，你会变得更加明智并准备摆脱它 - 但一旦你删除全局样式，建立在它之上的网站的一半将意外地崩溃。您准备好重新思考整个设计了吗？

就我个人而言，我现在建议根本不要在 tailwind.css 中使用@apply（如果我有时间和耐心将它从我设法放置它的所有项目中剥离出来）。

如果你在没有充分理由的情况下仍然坚持使用它（“喜欢覆盖第三方库中的样式” 正如 Tailwinds 文档所说），至少使用它来创建 类.

拥有一些 .my-cool-css-class 是情有可原的，因为至少你必须将它附加到你想要设置样式的元素上。这样，每个人（包括未来的自己）都可以在那里看到它，并且在需要时能够找到它的定义。

是的，但是

锚元素是诱人打破这条规则的候选者。因为必须为每个 附加一个类属性真的很乏味。

一种可能的替代方案是创建一个围绕锚点（或 Nuxt 中内置的 ）的自定义链接组件。但你可能不喜欢它，我不会责怪你。

事实上，使用 @apply 指令仍然是排名最高的解决方案。

也许您可以制作更多全局元素样式有意义的示例。如果您 100% 确定，请使用它们。但这应该始终是一个有充分依据的决定。

第 2 课

Tailwind 类定义过长/重复的真正原因是代码设计不当。

使用 Vue 这样的现代 JavaScript 框架，您就能够创建小型可重用组件，并将它们组合在一起构建复杂的解决方案。使用它。

上面的按钮示例可以变成这样：

  



<p>就这样，重复的代码就消失了。</p><p>另一方面，看到很长的类链总是让我觉得可怜的元素背负着太多的担忧。最好的办法就是退后一步，修改导致你到达那里的决定。</p>

<p>我的经验是，只需少量的 Tailwind 类就可以创建美观的设计。如果您想添加更多内容，它们通常不应该最终全部堆积在一个元素上。这与创建一个大型组件（或一个类，如果您愿意的话）做所有事情几乎相同。在某些时候，您确实需要停止添加更多行并开始分解事物。</p>

<p>在最坏的情况下，您应该能够将视觉要求高的 CSS 元素封装到单独的组件中，从而最大限度地减少所需的交互量。但说实话，可能已经有人这样做了，您所需要做的就是找到合适的 Tailwind 组件库以在您的项目中使用。</p>


          

以上是我错误地使用了 Tailwind，所以你不必这样做的详细内容。更多信息请关注PHP中文网其他相关文章！