tailwind-semantic-theme

Installation
SKILL.md

Tailwind Semantic Theme

Use shadcn's theming contract without adopting shadcn as a dependency.

Keep the token names and CSS structure. Adapt the file layout to the project in front of you.

Scope

  • Use this skill only when explicitly invoked by name or when the user explicitly asks for this methodology.
  • Target Tailwind v4 projects.
  • Prefer methodology first. If the user asks for implementation, turn the methodology into concrete edits in the existing project.
  • Do not add shadcn just to get this pattern.

Goals

  • Define theme values once as semantic CSS variables.
  • Keep light and dark mode on the same token names via :root and .dark.
  • Expose those tokens to Tailwind through @theme inline.
  • Preserve shadcn-compatible token names so future component adoption stays easy.
Related skills

More from sjunepark/custom-skills

Installs
21
First Seen
Mar 27, 2026