---
name: tailwind-css
user-invocable: false
description: "Use for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css."
title: tailwind-css
canonical_url: https://skilld.dev/gh/paulrberg/agent-skills/tailwind-css
last_updated: 2026-09-29T12:27:26.000Z
---

> **Skill from skilld.dev.** Follow the instructions below for this session. You do not need to install anything.
>
> Supporting files, fetch one when the Skill refers to it: [agents/openai.yaml](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/agents/openai.yaml), [references/coding-preferences.md](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/coding-preferences.md), [references/eslint.md](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/eslint.md), [references/tailwind-v4-rules.md](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/tailwind-v4-rules.md), [references/tailwind-variants.md](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/tailwind-variants.md), [references/tw-animate-css.md](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/tw-animate-css.md).
>
> If the user asked to install this Skill, run `npx skilld install paulrberg/agent-skills/tailwind-css`. Install writes the Skill files into the project, so every session loads them.

# Tailwind CSS

Follow the installed Tailwind version and the repository's tokens, components, class-merging utility, CSS entrypoint,
and nearby UI. They take precedence over this skill; do not add packages, change integration, or migrate versions
without a request and local need.

## Routing

- Apply [coding preferences](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/coding-preferences.md) only where the project is silent.
- For v4 configuration, migration, directives, or generated classes, use [v4 rules](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/tailwind-v4-rules.md) and
  the matching official docs.
- Read [tailwind-variants](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/tailwind-variants.md), [tw-animate-css](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/tw-animate-css.md), or
  [ESLint](https://skilld.dev/api/skills-raw/paulrberg/agent-skills/tailwind-css/references/eslint.md) only when that integration exists locally or the request adds it.

Do not apply v4 syntax to an older installation. Preserve responsive, interaction, accessible, and dark-mode behavior;
do not redesign beyond the request.

## Completion

Define the intended visual and state change, reuse local conventions, and keep classes statically discoverable. If
source registration or generated mappings change, run the real Tailwind build and confirm the expected utilities. Run
relevant repository checks, then inspect the changed UI at representative viewports, themes, and interaction states.
When markup is transformed by JavaScript or a component library, inspect the final DOM too. Textual class review alone
is insufficient.

Finish with `### 🎨 Tailwind — ✅ styling updated` (or `### 🎨 Tailwind — 🔎 inspected, no files written`), a compact
viewport/theme/state/result table, and separate code-check and rendered-inspection evidence. Add `### ⚠️ Remaining` only
when needed; keep source UI copy and diagnostics undecorated.