Tailwind CSS v4中bg-opacity-*工具已移除，如何重新实现？

Tailwind CSS v4移除了单独的bg-opacity-*这类工具类，统一改用bg-sky-500/50这种颜色+透明度的简写，但你可以通过自定义工具类的方式重新实现原来的写法，具体步骤如下：

一、CDN方式（对应你提供的示例场景） #

修改你的HTML代码，在tailwind配置中添加自定义工具类：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script>
tailwind.config = {
  plugins: [
    function({ addUtilities, theme }) {
      const opacityUtilities = Object.entries(theme('opacity')).map(([key, value]) => ({
        [`.bg-opacity-${key}`]: {
          '--tw-bg-opacity': value,
          'background-color': 'rgb(var(--tw-bg-color-rgb) / var(--tw-bg-opacity))'
        }
      }))
      addUtilities(opacityUtilities, {
        layer: 'utilities'
      })
    }
  ]
}
</script>

<div class="size-16 bg-sky-500"></div>
<div class="size-16 bg-sky-500 bg-opacity-50"></div>

二、本地项目（npm/yarn安装的Tailwind） #

在项目根目录的tailwind.config.js中添加同样的自定义工具类配置：

/** @type {import('tailwindcss').Config} */
export default {
  // 其他配置...
  plugins: [
    function({ addUtilities, theme }) {
      const opacityUtilities = Object.entries(theme('opacity')).map(([key, value]) => ({
        [`.bg-opacity-${key}`]: {
          '--tw-bg-opacity': value,
          'background-color': 'rgb(var(--tw-bg-color-rgb) / var(--tw-bg-opacity))'
        }
      }))
      addUtilities(opacityUtilities, {
        layer: 'utilities'
      })
    }
  ]
}

原理说明 #

• 通过addUtilitiesAPI生成对应bg-opacity-*的工具类
• 复用Tailwind内置的opacity主题值（如50对应0.5），设置--tw-bg-opacity变量
• 重新定义background-color属性，结合Tailwind颜色系统自带的--tw-bg-color-rgb变量，实现对背景色透明度的控制

这样修改后，你就能像v3中一样使用bg-sky-500 bg-opacity-50的写法了。

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