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

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

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

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

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

我尝试优化它。

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

虽然维护和修改更容易了，但代码可读性却值得商榷，尤其是在应用中有多个相同元素，需要将定义提升到全局常量时。

我继续寻找更好的解决方案，这时我发现了Tailwind的@apply指令。这似乎与之前的做法背道而驰：你可以创建自己的“类样式表”，用自定义类和元素填充它，而不是直接将定义放在具体元素上。不同的是，你可以用Tailwind实用程序类构建解决方案，而不是简单的CSS规则。

虽然Vue School的导师和Tailwind文档都警告我不要使用@apply，但我还是尝试了。

我用这种方法创建了几个网站，它确实有效。问题解决了，或者说…暂时解决了？

到了2024年末，我为一个网站添加新功能时，完全忘记了一年前用@apply做的“恶作剧”。突然，我发现无法组合布局。

模板中没有明显的样式，但

div {
  @apply m-auto text-center text-white;
}

在 Python 中创建 Stripe 测试数据

上一篇

在 Python 中创建 Stripe 测试数据

下一篇

windows 通过BAT脚本设置IP、DNS、