javascript - 如何在 JavaScript 中获取 Tailwind 的事件断点？

Question

我正在使用配置文件构建 Tailwind 并将其包含在 React 元素中。

我想获取 JavaScript/React 中的事件断点值。我怎样才能达到同样的效果？

 <div class="block  sm:hidden md:hidden lg:hidden xl:hidden">al</div>
  <div class="hidden sm:block  md:hidden lg:hidden xl:hidden">sm</div>
  <div class="hidden sm:hidden md:block  lg:hidden xl:hidden">md</div>
  <div class="hidden sm:hidden md:hidden lg:block  xl:hidden">lg</div>
  <div class="hidden sm:hidden md:hidden lg:hidden xl:block">xl</div>
</div>

上面显示了事件断点。但是如何在 JS 中获得相同的结果而不包含上述任何标记呢？

Answer 1

在 tailwind 文档中，您可以从 tailwindcss 节点模块导入配置:

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from './tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

如上所示，您可以通过引用 fullConfig.theme.screens.{breakpoint} 来获取断点。您应该能够使用 JavaScript 将其与当前屏幕宽度进行比较。

查找official tailwind description here .