如何在Laravel项目的Tailwind CSS主题中添加自定义颜色透明度

1. 拆分颜色与透明度为独立CSS变量 #

把主题色的RGB值和透明度分别定义为CSS变量，让两者可独立控制，切换主题时只需更新对应变量：

/* app.css 基础浅色主题 */
:root {
  --primary-rgb: 59, 130, 246; /* 对应#3b82f6的RGB值 */
  --primary-opacity: 0.8;
  --secondary-rgb: 16, 185, 129;
  --secondary-opacity: 0.9;
}

/* 深色主题 */
[data-theme="dark"] {
  --primary-rgb: 37, 99, 235; /* 对应#2563eb的RGB值 */
  --primary-opacity: 0.6;
  --secondary-rgb: 5, 150, 105;
  --secondary-opacity: 0.7;
}

2. 在Tailwind配置中关联变量 #

修改tailwind.config.js，扩展主题颜色时用CSS变量组合成带动态透明度的颜色：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'rgba(var(--primary-rgb), var(--primary-opacity))',
        secondary: 'rgba(var(--secondary-rgb), var(--secondary-opacity))',
        // 可选：定义无透明度的基础色，支持Tailwind原生opacity修饰符（如bg-primary-base/50）
        'primary-base': 'rgb(var(--primary-rgb))',
        'secondary-base': 'rgb(var(--secondary-rgb))'
      },
    },
  },
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
}

3. 动态切换主题触发透明度变化 #

通过前端JS切换主题标识，或后端渲染时添加对应类名，即可让CSS变量更新，实现透明度动态变化：

// 示例：切换主题的JS代码
document.querySelector('#theme-toggle').addEventListener('click', () => {
  const currentTheme = document.documentElement.dataset.theme;
  document.documentElement.dataset.theme = currentTheme === 'dark' ? 'light' : 'dark';
  // 可选：将主题偏好存入localStorage
  localStorage.setItem('theme', document.documentElement.dataset.theme);
});

4. 可选：兼容Tailwind原生Opacity修饰符 #

如果需要使用Tailwind自带的opacity-{value}工具类或颜色修饰符（如text-primary-base/30），直接使用定义的primary-base这类基础色即可，基础透明度变量仍可用于默认样式的动态控制。

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