tailwind-css-variable-theme-removal-causes-white-inputs

name	tailwind-css-variable-theme-removal-causes-white-inputs
description	When removing CSS custom property theme tokens (RGB channels) from a Tailwind project, input fields become white-on-white — text and background both render as white because the CSS variables resolve to empty
source	auto-skill
extracted_at	2026-06-06T09:50:00.000Z

The problem

After a theme system redesign that removes CSS custom properties (e.g., --color-bg, --color-text) from globals.css, text inputs become unreadable — white text on white background.

Root cause

The old design used RGB-channel CSS variables consumed by Tailwind with opacity modifiers:

:root {
  --color-bg: 2 6 23;
  --color-text: 248 250 252;
}

Tailwind config referenced them:

colors: {
  bg: 'rgb(var(--color-bg) / <alpha-value>)',
  text: 'rgb(var(--color-text) / <alpha-value>)',
}

Components used classes like bg-bg text-text. These resolved to actual RGB values via the CSS variables.

When the CSS variables are removed (replaced by a hardcoded dark theme like #05050A), Tailwind classes referencing rgb(var(--color-bg) / ...) resolve to rgb( / ...) — which is invalid CSS. Browsers treat invalid color values as transparent or inherit, often defaulting to white in dark-mode contexts.

The result: inputs that had bg-bg text-text now have transparent backgrounds with white text, or white backgrounds with white text.

How to diagnose

1. Open DevTools, inspect the input
2. Check computed background-color — if it's transparent or white when it should be dark, the CSS variable resolution is broken
3. Look for rgb(var(-- in the computed styles — this indicates dead CSS variable references

How to fix

Replace all rgb(var(--color-*)) references with hardcoded hex values. For inputs specifically, use explicit colors:

.input-glass {
  color: #dbe4e3 !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
}
.input-glass::placeholder {
  color: rgba(185, 202, 201, 0.5) !important;
}

The !important is necessary when other Tailwind utility classes (like text-on-surface) are competing and may still reference dead CSS variables.

Also fix <select> element options which render in native OS dropdowns:

.input-glass option {
  color: #dbe4e3;
  background-color: #0d1515;
}

Prevention

When removing CSS custom properties that feed Tailwind's rgb(var(--x) / <alpha>) pattern, always:

1. Run a grep for rgb(var(-- in all CSS/JSX files
2. Test every input, select, and textarea immediately after the change
3. Check both light and dark states if theme toggling is supported