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

时间:2019-10-01 09:41:06

标签: css responsive breakpoints tailwind-css

在TailwindCSS中,您可以指定以下代码:

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

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

您可以将任何utelity类分配给任何断点,方法是在其前面加上相应的字母和“:”。

TailwindCSS是否只是为每个定义的断点生成/在每个断点内生成每个实用程序类?

1 个答案:

答案 0 :(得分:1)

简短答案

是的,它会生成每个按顺风配置文件定义的内容。

更长的答案

它根据配置生成所有类。这是为了使您的开发工作更轻松,因此您不必担心定义了哪些类和没有定义什么类。 现在您可能不希望在生产环境中顺风提供所有类,而只希望您实际使用的那些类。如果您想进一步了解如何控制文件大小和删除未使用的CSS,请阅读tailwind docs