如何在 JavaScript 中获取 tailwinds 活动断点？

Question

我正在使用配置文件构建顺风并将其包含在反应项目中。

我想在 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 中获得相同的结果呢？

原文由 Prakash S 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我在 Typescript 中写的，它根据设备宽度返回当前断点。您可以将它放在一个独立的文件中，并在任何文件中需要时导入方法：

 import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from './tailwind.config'; // Fix the path

const fullConfig = resolveConfig(tailwindConfig);

export const getBreakpointValue = (value: string): number =>
  +fullConfig.theme.screens[value].slice(
    0,
    fullConfig.theme.screens[value].indexOf('px')
  );

export const getCurrentBreakpoint = (): string => {
  let currentBreakpoint: string;
  let biggestBreakpointValue = 0;
  for (const breakpoint of Object.keys(fullConfig.theme.screens)) {
    const breakpointValue = getBreakpointValue(breakpoint);
    if (
      breakpointValue > biggestBreakpointValue &&
      window.innerWidth >= breakpointValue
    ) {
      biggestBreakpointValue = breakpointValue;
      currentBreakpoint = breakpoint;
    }
  }
  return currentBreakpoint;
};

编辑： 在较新的 Typescript 版本中，您必须将这两个参数添加到 tsconfig.json 下 compilerOptions --- 下才能导入 js 文件：

 "compilerOptions": {
  "allowJs": true,
  "allowsyntheticdefaultimports": true
}

此外，如果您使用的是 Angular 并收到 process 未定义的错误，则必须将这些行添加到 polyfills.ts 文件的末尾（您必须安装 process 当然是包）：

 import * as process from 'process';
window['process'] = process;

原文由 Sinandro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

从 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 将其与您当前的屏幕宽度进行比较。

在这里 查看更多。

原文由 rozza2058 发布，翻译遵循 CC BY-SA 4.0 许可协议