Conceitos Fundamentais

O twin.macro converte classes Tailwind CSS em estilos CSS-in-JS, oferecendo controle flexível para elementos SVG. Grupos SVG (<g>) perimtem geranciar estilos coletivamente em elementos gráficos complexos.

Propriedaddes de Estilo Principais

• Cores de preenchimento: Classes fill-* como fill-vermelho-500
• Estilos de contorno: Classes stroke-* para cor, largura e transparência
• Herança de grupo: Elementos internos herdam estilos do grupo

Fluxo de Trabalho

1. Definir estilos de grupo com tw
2. Agrupar elementos SVG com <g>
3. Aplicar classes responsivas para variações

Aplicações Básicas

Controle de Preenchimento

<svg viewBox="0 0 24 24">
  <g className={tw`fill-azul-500`}>
    <path d="M12 2L2 22h20z"/>
  </g>
  
  <g className={tw`fill-[#3a506b]`}>
    <circle cx="12" cy="12" r="5"/>
  </g>
</svg>

Personalização de Contornos

<svg viewBox="0 0 24 24" className={tw`w-20 h-20`}>
  <g className={tw`stroke-verde-600 stroke-3 stroke-dasharray-5`}>
    <rect x="2" y="2" width="20" height="20" rx="4"/>
  </g>
</svg>

Técnicas Avançadas

Variações Condicionais

const BotaoIcone = () => (
  <button className={tw`p-3 rounded-lg bg-transparent hover:bg-cinza-50`}>
    <svg viewBox="0 0 24 24" className={tw`w-7 h-7`}>
      <g className={tw`fill-cinza-600 grupo-hover:fill-rosa-500`}>
        <path d="M12 21l-1.45-1.32C5.4 15.36 2 12.28 2 8.5"/>
      </g>
    </svg>
  </button>
);

Estilos Responsivos

<svg viewBox="0 0 24 24">
  <g className={tw`fill-roxo-400 md:fill-amarelo-500 xl:fill-ciano-400`}>
    <polygon points="12,2 2,22 22,22"/>
  </g>
</svg>

Componente Prático: Ícone Dinâmico

const IconeEstrela = ({ ativo = false, tamanho = 'medio' }) => {
  const estilosBase = tw`transition-colors`;
  const escala = {
    pequeno: tw`w-4 h-4`,
    medio: tw`w-7 h-7`,
    grande: tw`w-9 h-9`
  };
  
  return (
    <svg viewBox="0 0 24 24" className={tw`${estilosBase} ${escala[tamanho]}`}>
      <g className={tw`${ativo ? 'fill-ouro-400' : 'fill-transparent'}`}>
        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2"/>
      </g>
    </svg>
  );
};

Otimizações

Componentes Reutilizáveis

const GrupoSvg = tw.g`transition duration-300`;

<svg viewBox="0 0 24 24">
  <GrupoSvg className={tw`fill-verde-500 hover:fill-verde-700`}>
    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41"/>
  </GrupoSvg>
</svg>

Personalização de Temas

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        marca: {
          principal: '#2563eb',
          secundario: '#60a5fa'
        }
      }
    }
  }
}

<g className={tw`fill-marca-principal stroke-marca-secundario`}>
  <!-- Elementos SVG -->
</g>

Soluções Comuns

Conflitos de estilo:

<g className={tw`fill-vermelho-600!`}>...</g>

Animações complexas:

const GrupoAnimado = tw.g`
  transition-all duration-700
  hover:scale-125 hover:rotate-45
`;