顺风过渡延迟任意值仅适用于特定值 [英] Tailwind transition delay arbitrary value only working for specific 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>

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

推荐答案

来自文档：

Tailwind提取类名的最重要含义是它将只查找源文件中以完整的完整字符串形式存在的类。

如果使用字符串插值或将部分类名连接在一起，Tailwind将找不到它们，因此不会生成相应的CSS

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

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

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

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