本文介绍了顺风过渡延迟任意值仅适用于特定值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

<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

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

05-21 12:52