标签: arbitrary-values

我的行为与顺风任意值功能确实不一致，特别是与转换延迟属性有关。当我直接在任意值中使用任何随机值时，它适用于我迄今为止测试过的每个值（随机正整数）。前任...

<li className="delay-[2455]">{some text}</li>

但如果我要使用变量，该类只会偶尔根据值产生任何影响，看似随机。前任...

const delay = "250ms";
return <li className={`delay-[${delay}]}`></li>

上面的这段将产生一个有效的类，但下面的段将没有效果并且不会产生有效的类

const delay = "500ms";
return <li className={`delay-[${delay}]}`></li>

我不确定这是否是我做错了，或者是顺风中的一些奇怪的怪癖。我对任何建议持开放态度。如果有什么不同的话，我将打字稿与反应结合使用。我正在使用 tailwindcss 版本 3.0.11 和 postcss 版本 8.4.5 这些是我的 tailwind.config.js 和 postcss.config.js 文件

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        'xsm': '428px',
        '2xsm': '360'
      },
      fontFamily: {
        title: ['Patrick Hand'],
        body: ['Balsamiq Sans']
      },
      transitionProperty: {
        'opacity': 'opacity',
      },
    },
  },
  plugins: [],
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }, …