css - TailwindCSS 是如何实现断点前缀功能的?

标签 css responsive breakpoints tailwind-css

在 TailwindCSS 中,您可以指定这样的代码:

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

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

您可以将任何实用程序类分配给任何断点,方法是在断点前加上对应的字母和“:”。

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

最佳答案

简答

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

更长的答案

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

关于css - TailwindCSS 是如何实现断点前缀功能的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58182074/

相关文章:

html - 将 CSS 文件链接到 Hugo 中的部分模板

css - 背景图片超过#wrap div

c++ - 为什么数据断点对未对齐的地址不起作用

html - 向左浮动子导航

css - 根据容器调整“"div' s”的高度

javascript - 在列表文本装饰中的悬停文本上不起作用

css - 我正在尝试将 w3schools 响应页面与图像效果结合起来看不到冲突

html - 如何使图像上的多个单选按钮响应?

javascript - 如何在 Firefox 中刷新并保留断点?

c - 为什么 gdb 不会在 strcpy 上中断?