主页 / coding / 问题 / 79584611
Accepted
Becca
Asked: 2025-04-21 20:14:00 +0800 CST

如何在 Tailwind v4（react-vite）中使用环境变量？

  • 772

在我目前的工作中，我们使用 .env 变量来设置网页的主颜色。我一直在使用新的 Tailwind 设置，在 index.css 中定义所有内容，但我还没有找到直接在其中使用环境变量的方法。

我的 index.css 可以工作，但不是我想要的

@import "tailwindcss";

@theme{
  --color-main:#62297f;
  --color-secondary:#5184c9;
}

我的 .env

VITE_PRIMARY_COLOR=#3490dc
VITE_SECONDARY_COLOR=#ffed4a
VITE_ACTION_COLOR=#e3342f
vite

1 个回答

  1. Best Answer

    首先，在项目初始化期间运行此函数，将这些颜色设置为文档的根：

    // utils/applyEnvColors.ts
export function applyEnvColors() {
  const root = document.documentElement;

  const colorVars = {
    primary_color: import.meta.env.VITE_PRIMARY_COLOR,
    secondary_color: import.meta.env.VITE_SECONDARY_COLOR,
    action_color: import.meta.env.VITE_ACTION_COLOR,
  };

  Object.entries(colorVars).forEach(([key, value]) => {
    if (value && typeof value === 'string') {
      const formattedKey = `--color-${key.replace('_color', '').replace(/_/g, '-')}`;
      root.style.setProperty(formattedKey, value);
    }
  });
}

    然后在你的 tailwind.css 中使用它

    @theme{
    --color-primary: 'var(--color-primary)';
    --color-secondary: 'var(--color-secondary)';
    --color-action: 'var(--color-action)';
}
    • 1

相关问题