Início / coding / Perguntas / 79584611
Accepted
Becca
Asked: 2025-04-21 20:14:00 +0800 CST

Como usar variáveis ​​de ambiente no Tailwind v4 (react-vite)?

  • 772

No meu trabalho atual, usamos variáveis ​​.env para definir as cores principais das páginas da web. Tenho usado a nova configuração do Tailwind, onde você define tudo em index.css, mas não encontrei uma maneira de usar variáveis ​​de ambiente diretamente lá.

Meu index.css, isso FUNCIONA, mas não é o que estou procurando

@import "tailwindcss";

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

Meu .env

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

1 respostas

  1. Best Answer

    Primeiro, execute esta função durante a inicialização do projeto para configurar essas cores como a raiz do documento:

    // 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);
    }
  });
}

    então use-o em seu tailwind.css

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

relate perguntas