skills.rest
plutowang
plutowangCOMMUNITY
Explore all skills by this author →
GitHub

tailwind-v4

Verify Tailwind v4 color usage matches theme-defined semantic names.

Updated Aug 27, 2026
Search Tags:#consistency#frontend#react#tailwind#tailwind-v4#semantic-colors#css-theming
One-click install
npx skills add https://github.com/plutowang/term.conf --skill tailwind-v4-plutowang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind-v4
Source: https://github.com/plutowang/term.conf/tree/main/opencode/skills/global/tailwind-v4
Command: npx skills add https://github.com/plutowang/term.conf --skill tailwind-v4-plutowang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps frontend teams avoid hardcoding colors by enforcing Tailwind v4 color usage rules. It guides developers to prefer semantic color variables defined in the project's theme and fall back to standard Tailwind color classes when no custom theme is present.

Core Features & Use Cases

  • Detects and verify theme customizations in Tailwind v4 projects by inspecting source CSS entry points and the presence of the @theme directive.
  • Enforces semantic color usage (e.g., bg-brand, text-primary) and safely falls back to default Tailwind color classes (e.g., bg-blue-500) when no custom theme is defined.
  • Use Case: Applied during code review or CI checks for React, Angular, or any Tailwind-based frontend project to ensure consistency and avoid hardcoded hex values.

Quick Start

Use the tailwind-v4 skill to validate and enforce color usage in your Tailwind v4 project starting from src/index.css.

Frequently Asked Questions about tailwind-v4

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce semantic Tailwind v4 color usage in a React project?▼

To enforce semantic Tailwind v4 color usage, inspect the main CSS entry like src/index.css for the @theme directive and validate class names against theme-defined variables, warning against hardcoded hex values.

What is the best way to prevent hardcoded hex colors in Tailwind v4 class names?▼

Preventing hardcoded hex colors involves automating verification of class names against theme-defined semantic colors, ensuring developers use variables like bg-brand instead of literal hex values during code reviews or CI checks.

Does Tailwind v4 semantic color enforcement work with Angular frontend projects?▼

Yes, Tailwind v4 semantic color enforcement works with Angular and other frontend projects by inspecting the main CSS entry point for the @theme directive and applying color usage rules consistently across the tech stack.

What happens to Tailwind v4 color classes when no custom theme is defined?▼

When no custom theme is defined, Tailwind v4 color rules safely fall back to standard default Tailwind color classes, such as bg-blue-500, ensuring styles remain functional without semantic theme variables.

How do I verify Tailwind v4 theme customizations during code review?▼

Verify Tailwind v4 theme customizations during code review by inspecting the source CSS entry point for the @theme directive and checking that frontend class names adhere to the defined semantic color variables.

Related Skills

Explore More Software Engineering Skills→
BerryKuipersBerryKuipers
7

semantic-theming

Enforce semantic theming in Tailwind projects by preventing raw color literals.

Community
Advanced
cynthiateeterscynthiateeters

CSS color standards

Enforce HSL color standards and CSS custom properties in :root.

Community
Basic
valec3valec3
1

tailwind-4

Guide Tailwind CSS styling with cn(), semantic tokens, and responsive utilities.

Community
Basic
csim-sgcsim-sg

daisy-ui

Build UI components with DaisyUI v5 and Tailwind CSS 4.

Community
Intermediate