fix: don't add opacity modifier for variable colors by michaelgold3n · Pull Request #250 · bernaferrari/FigmaToCode

Problem

When a color is from a Figma variable that already contains alpha (e.g., rgba(255,0,0,0.5)), the Tailwind output was incorrectly adding an opacity modifier.

Expected: bg-myVar
Actual: bg-myVar/50

This is incorrect because:

  1. The variable already contains the alpha value
  2. Adding /50 compounds the opacity (50% of 50% = 25%)

Solution

Skip the opacity modifier when colorType is 'variable' since the alpha is already baked into the variable definition.

Changes made in tailwindColor.ts:

  • tailwindSolidColor(): Return early for variable colors without opacity suffix
  • tailwindGradientStop(): Same fix for gradient stops

Testing

  • Build passes
  • No TypeScript errors

Fixes #232