Imported from David-Li0406/meta-skill-evloving (skill-flow/data/skills-refined-36k/skillsmp/tailwind-v4-1/SKILL.md). Install upstream with npx skills add David-Li0406/meta-skill-evloving --skill tailwind-v4-1. Copyright stays with the author.

Tailwind v4 Custom Color Detection

Protocol

When using Tailwind CSS v4, check for custom theme configuration first:

1. Read src/index.css (or main CSS entry point).
2. Look for the @theme { ... } directive with color variables.
3. If found, use the defined semantic names (e.g., bg-brand, text-primary).
4. If not found, use Tailwind default color classes (e.g., bg-blue-500).
5. Never hardcode hex colors in class names (e.g., bg-[#3b82f6]).

Detection

• Tailwind v4 if package.json has tailwindcss: ^4.x.
• Load this skill when working with React/Angular/Tailwind projects.

Documentation Access

When you need to verify v4 @theme syntax, CSS variable usage, or migration breaking changes:

1. Primary (Context7): /websites/tailwindcss
2. Fallback: https://tailwindcss.com/docs

Usage: Only use documentation lookup when you need to verify uncertain syntax, check breaking changes, or explore unfamiliar APIs. Apply this skill's established rules directly for routine tasks.