TailwindCSS 如何实现断点前缀功能？

Question

在 TailwindCSS 中，您可以指定这样的代码：

<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500></div>

因此默认颜色为红色，在“sm”断点处为绿色，在“md”断点处为蓝色。

您可以将任何实用程序类分配给任何断点，方法是在其前面加上相应的字母和“：”。

TailwindCSS 是否简单地为每个定义的断点/在每个定义的断点内生成每个实用程序类？

Answer 1

简答

是的，它会按照 tailwind 配置文件的定义生成所有内容。

更长的答案

它根据配置生成所有类。这是为了让您的开发生活更轻松，因此您不必担心定义了哪些类，哪些没有定义。 现在您可能不希望所有 tailwind 在生产环境中提供的类，只需要您实际使用的类。如果您想了解有关如何控制文件大小和删除未使用的 css 的更多信息，请阅读tailwind docs。