如何自定义TailwindCSS中的默认blur类？

我正尝试自定义Tailwind CSS中的默认blur类，因为默认的模糊效果太强了。目前我的配置如下：

theme: {
  extend: {
    blur: {
      xs: '1px',
      sm: '2px',
      <blur>: '3px', // 想设置成使用class="blur"就能实现filter: blur(3px)
      md: '4px',
      lg: '5px',
      xl: '6px',
      '2xl': '8px',
      '3xl': '16px'
    }
  }
}

请问该如何设置才能仅用class="blur"就实现filter: blur(3px)的效果？

你只需要把配置里的<blur>替换成DEFAULT就行，Tailwind会自动把这个键对应的值作为无后缀blur类的样式：

theme: {
  extend: {
    blur: {
      xs: '1px',
      sm: '2px',
      DEFAULT: '3px', // 现在class="blur"就会应用filter: blur(3px)
      md: '4px',
      lg: '5px',
      xl: '6px',
      '2xl': '8px',
      '3xl': '16px'
    }
  }
}

配置完成后：

• 直接用blur类就会生效filter: blur(3px)
• blur-xs、blur-sm等带后缀的类依然对应你设置的像素值

内容的提问来源于stack exchange，提问作者dokgu