菜单
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
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to HTML-string audits.
Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use `scan` for a full audit with no diffing.
Audit a live page for accessibility issues and locate each violation precisely — pass a URL, a config target name (e.g. `accesslint:scan dev`), or nothing to use the default target from accesslint.config.json. Ensures a debuggable Chrome, runs the @accesslint/core engine via CDP, and returns a worklist of live-DOM WCAG violations grounded to each violation's DOM selector and source file:line. Locates; doesn't edit — output drives fixes by Claude. Use it for "is this page accessible", or to verify a UI change. For diffing against uncommitted changes or a branch, use the `diff` skill.
Diagnose when AI features silently return 'Offline' or 'no API key' despite valid settings
Remove native title bar double-rendering in Electron by setting `frame: false` and using CSS `-webkit-app-region` for window dragging
When a utility exports a boolean constant but a component imports and calls it as a function — `isNative()` instead of `isNative` — causes "is not a function" at render time
| 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 |
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.
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.
background-color — if it's transparent or white when it should be dark, the CSS variable resolution is brokenrgb(var(-- in the computed styles — this indicates dead CSS variable referencesReplace 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;
}
When removing CSS custom properties that feed Tailwind's rgb(var(--x) / <alpha>) pattern, always:
rgb(var(-- in all CSS/JSX files