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

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《我错误地使用了 Tailwind，所以你不必这样做》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

三年前，我开始使用Tailwind CSS，一个出色的前端开发库（本文不再赘述其优点，网上资源丰富）。我想分享一下我早期使用Tailwind时不断犯的错误，希望能帮助大家避免重蹈覆辙。

Tailwind颠覆了传统CSS的级联样式表概念，通过“实用程序类”将CSS规则直接应用于DOM元素。起初感觉陌生，但很快便上手了。我仅用一天时间就适应了它，现在除非不得已，否则不会再写纯CSS了。Tailwind与我的首选框架Nuxt集成无缝，构建美观、响应式网站非常便捷。

然而，问题出现了：选项越多，包含的样式越多，HTML代码就越混乱。另一个问题是代码冗余。作为一名DRY原则的忠实拥护者，看到模板中重复的类序列让我非常难受。

我尝试优化它。

最初的想法是将Tailwind类序列提取为字符串变量。在Vue.js（Nuxt基于Vue）中，大致如下：

{{ caption }}</button>
</template>

<script>
import { defineProps, computed } from 'vue';

export default {
  name: 'MyButton',
  props: {
    caption: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const btnClass = computed(() => 'm-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold');
    return { btnClass };
  }
};
</script>

这样，重复的代码就消失了。

看到很长的类链，总是让我觉得元素承担了过多的职责。最好的方法是退一步，重新思考导致这个问题的代码设计。

我的经验是，只需少量Tailwind类即可创建美观的设计。如果需要更多样式，通常不应该全部堆积在一个元素上。这与创建一个大型组件（或类）来做所有事情类似，最终需要停止添加更多行并开始分解事物。

在最坏的情况下，应该能够将视觉要求高的CSS元素封装到单独的组件中，以最大限度地减少所需的交互量。或者，可以使用现成的Tailwind组件库。

好了，本文到此结束，带大家了解了《我错误地使用了 Tailwind，所以你不必这样做》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！