mcpField
T
tailwindcss

tailwindcss

github.com/marcioaltoeDesign & UI058 installsUpdated 1d ago
Repository

About tailwindcss

A skill for applying Tailwind CSS v4 in projects, aimed at developers working with an existing theme and design system. It emphasizes semantic tokens, discoverable classes, responsive layouts, and repository-specific validation.

Key features

  1. 01Use semantic theme tokens
  2. 02Keep class names statically discoverable
  3. 03Compose classes with merge helpers
  4. 04Avoid specificity hacks
  5. 05Build responsive, keyboard-aware layouts
  6. 06Validate with repository gates

Use cases

  1. 01Style components using Tailwind CSS v4
  2. 02Adapt styles to an existing design system
  3. 03Compose variants with overriding className values
  4. 04Check styling changes with project commands

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/marcioaltoe/skills --skill tailwindcss

After installing, type/tailwindcssin Claude Code to confirm it loaded.

Bundled filesreferences/patterns.md

Details

From the project README

Tailwind CSS v4

Prefer utilities for component styling. CSS still owns theme tokens, base rules, and styles that utilities do not express clearly. Use the installed Tailwind version and existing design system.

  • Use semantic tokens for theme-aware colors, borders, and states. Use names from the project's token source and design documentation; do not assume a universal shadcn vocabulary.
  • Keep class names complete and statically discoverable. Use lookup maps instead of interpolated fragments such as bg-${color}-500.
  • Group long classes for readability; no character-count gate. Use the project's cn/merge helper when composing variants or accepting overriding className values.
  • Resolve specificity through the style design and class merging, avoiding !important. Use @apply only where the repository permits it.
  • Build responsive layouts from content needs, preserve visible keyboard focus, and select supported v4 utilities rather than copying older idioms.
  • Validate through the repository's owning gates. Use its existing root/package commands and reuse valid evidence; styling does not add a separate lint/typecheck ritual.

Read references/patterns.md for the utility or variant being changed. Its token names are examples; use the actual theme inventory.

Comments

Markdown supported