Skip to main content
affpapa.org
RU EN
skill CX Codex

tailwind-css · manutej — Claude Code skill: Tailwind utilities on tap

A Tailwind CSS skill covering utility classes, responsive variants, dark mode and production optimization. Handy when you build UI and want to stay in your markup.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a claude-code
Open on GitHub

What tailwind-css does

The skill hands your agent a reference for Tailwind CSS: layout, spacing, typography, colors, borders and rounding. Each section pairs a short markup example with the classes it uses, so the agent copies real combinations instead of guessing utility names.

Everything lives in a single SKILL.md file with the description and examples. No scripts, no extra dependencies, so installing means dropping that file into your platform's skills folder. Claude reads it from ~/.claude/skills/tailwind-css/SKILL.md, Cursor from .cursor/skills/tailwind-css/SKILL.md, GitHub Copilot from .github/skills/tailwind-css/SKILL.md.

The skill describes Tailwind in general, not a pinned framework version. If Tailwind isn't configured in your project yet, the classes in the examples produce no styles — set up the framework first. The description text is truncated, so framework integration is mentioned only in passing.

What it helps with

  • build a responsive grid without a separate CSS file
  • add dark mode with the dark: variant
  • extract repeated classes into a component
  • swap the default palette for your own tokens
  • trim the final CSS before shipping

Example prompts for the agent

  • Build a product card in Tailwind with a three-column grid and padding
  • Add dark mode to this form using dark:
  • Show me how to extract these classes into a reusable component

How to install tailwind-css

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a claude-code

2Manually: put the files in place

~/.claude/skills/tailwind-css/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/tailwind-css/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about tailwind-css

How do I install tailwind-css in Claude?

Run npx skills add manutej/luxor-claude-marketplace --skill tailwind-css -a claude-code. The file lands at ~/.claude/skills/tailwind-css/SKILL.md.

What does the tailwind-css skill do?

It gives your agent a Tailwind utility reference: layout, spacing, typography, colors, borders. Responsive variants and dark mode examples come with it.

Do I need anything installed before this skill?

The skill itself is one file of examples. For the classes to render, Tailwind CSS has to be set up in your project.

Similar skills

Everything for Frontend and UI →

tailwind-css by other authors comes first.

tailwind-css PaulRBerg Guides coding agents on Tailwind CSS styling, v4 migrations, and class updates while enforcing real build checks and DOM inspection. CX Codex +1 3,000installs tailwind-responsive-ui pproenca A skill for Claude and other AI editors that helps turn Tailwind CSS interfaces into layouts that work on mobile and desktop. CX Codex +1 461installs tailwind-css-patterns giuseppe-trisciuoglio A skill that hands your agent ready Tailwind CSS patterns: responsive grids, cards, forms, dark mode. Useful when it styles React, Vue or Svelte components. CX Codex +1 17,700installs tailwindcss-responsive-darkmode JosiahSiegel A Tailwind CSS skill covering responsive layout, dark mode, runtime theme switching and FOUC prevention. CX Codex +1 476installs converting-css-to-tailwind spencerpauly This skill walks a plain CSS file and rewrites its rules as Tailwind utility classes in your markup. Handy when a project moves off hand-written CSS. CX Codex +1 423installs converting-css-modules-to-tailwind spencerpauly Moves one component off CSS Modules and onto Tailwind utility classes, then removes the module file and its import. CX Codex +1 392installs frontend-tailwind-best-practices sergiodxa Ten Tailwind CSS rules for frontend work: stack utilities, gap-based spacing, dark color schemes and className merging. Useful when an agent writes component styles. CX Codex +1 464installs

From the same set31

SQLAlchemy ORM Expert A SQLAlchemy 2.0+ skill for customer support backends: ticket models, sessions, async queries and PostgreSQL. Useful when you build on FastAPI. CX Codex +1 470installs pandas A skill that brings pandas expertise to support operations: SLA compliance, agent metrics, PostgreSQL pulls. Useful when you need to dig through tickets and build a report. CX Codex +1 469installs database-management-patterns A reference skill for PostgreSQL and MongoDB work: schema design, indexing, transactions, replication and sharding. CX Codex +1 466installs react-development A skill that feeds your coding agent React patterns: components, hooks, state and effects, taken from the official react.dev docs. CX Codex +1 464installs vector-database-management A skill for Pinecone, Weaviate and Chroma: indexes, embeddings, similarity search and RAG. Useful when you need semantic search in a project. CX Codex +1 459installs performance-benchmark-specialist Sets up benchmarks for shell tools: warmup runs, statistics, and target checks like <100ms and >90% cache hit rate. CX Codex +1 456installs PostgreSQL Database Administration A PostgreSQL administration skill: schema design, indexing, backups and query tuning. Useful when the agent writes SQL for a ticketing system or reporting. CX Codex +1 452installs langchain-orchestration A LangChain reference skill for your coding agent: chains, agents, memory, RAG and orchestration. Useful when the agent writes LangChain code and should stick to working patterns. CX Codex +1 451installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor