顺风过渡延迟任意值仅适用于特定值

问题描述

我得到了与顺风任意值功能非常不一致的行为，特别是与转换延迟属性相关的行为。当我直接在任意值内使用任何随机值时，它对我到目前为止测试过的每个值(随机正整数)都有效。例如.

<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>

我不确定这是我做错了什么，还是顺风中有什么奇怪的怪事。我对任何建议都持开放态度。如果有什么不同，我会结合使用Typescript和Reaction。我使用的是Tailwind css版本3.0.11和postcss版本8.4.5这些是我的trawind.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: {},
  },
}

推荐答案

来自文档：

这意味着您需要使用完整的类名，而不是其各部分的动态串联。

例如，您可以这样制作函数：

function getClassByDelay(delay) {
  return {
    250: 'delay-250',
    500: 'delay-500',
    750: 'delay-750',
  }[delay]
}

并按如下方式使用：<li className={getClassByDelay(delay)}></li>

如果您确实需要使用动态类，则还可以使用另一种方法：只需将它们添加到config：

中的safelist数组

// tailwind.config.js
module.exports = {
  content: [
    // ...
  ],
  safelist: [
    'delay-250',
    'delay-500',
    'delay-750',
    // etc.
  ]
  // ...
}

这样，Tailwind将知道它无论如何都需要生成此safelist类，而不管它是否在您的源代码中找到这些类。

显然，如果您停止在代码中使用未使用的类，则需要管理此列表，并且不要忘记将其从配置中删除，否则它们将成为捆绑包中的沉重负担。

这显然有其不利之处。

详细信息：https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

这篇关于顺风过渡延迟任意值仅适用于特定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！