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

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

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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)