skills.rest
alemamdevs
alemamdevsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwindcss-development

Writes and fixes Tailwind CSS v4 utility classes in HTML templates.

Updated Sep 10, 2026
Search Tags:#frontend#tailwind css#dark mode#utility classes#tailwind v4#responsive layout#css styling
One-click install
npx skills add https://github.com/alemamdevs/expense-tracker --skill tailwindcss-development-alemamdevs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/alemamdevs/expense-tracker/tree/main/.agents/skills/tailwindcss-development
Command: npx skills add https://github.com/alemamdevs/expense-tracker --skill tailwindcss-development-alemamdevs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling web interfaces with Tailwind CSS requires keeping up with version-specific syntax changes, deprecated utilities, and project conventions. This Skill guides AI agents to write correct Tailwind CSS v4 utility classes, avoid deprecated v3 patterns, and follow existing project conventions in Blade, JSX, or Vue templates. ## Core Features & Use Cases - Tailwind v4 Migration Guidance: Enforces CSS-first configuration with the @theme directive and @import "tailwindcss" syntax instead of deprecated @tailwind directives and tailwind.config.js. - Deprecated Utility Replacement: Maps removed v3 utilities (bg-opacity-, flex-shrink-, overflow-ellipsis) to their v4 equivalents. - Layout and Component Styling: Builds responsive grid layouts, flexbox page structures, cards, navbars, forms, and dark mode variants using dark: prefixes and gap utilities. - Use Case: When building a dashboard with a sidebar and card grid, the Skill generates responsive Tailwind classes with proper dark mode support and spacing conventions that match the existing codebase. ## Quick Start Ask the agent to style a responsive three-column card grid with dark mode support using Tailwind CSS in your Blade template.

Frequently Asked Questions about tailwindcss-development

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

FAQPage Schema
How do I configure Tailwind CSS v4 without tailwind.config.js?▼

Tailwind v4 uses CSS-first configuration with the `@theme` directive directly in your CSS file. Define custom values like `--color-brand: oklch(0.72 0.11 178)` inside `@theme` blocks instead of a JavaScript config file.

How to migrate from Tailwind v3 to v4 import syntax?▼

Replace the three `@tailwind base`, `@tailwind components`, and `@tailwind utilities` directives with a single `@import "tailwindcss"` statement. Also update deprecated utilities like bg-opacity-* to bg-black/* and flex-shrink-* to shrink-*.

What utilities replaced deprecated classes in Tailwind v4?▼

Tailwind v4 replaced opacity utilities like bg-opacity-* with slash syntax like bg-black/*, flex-shrink-* with shrink-*, flex-grow-* with grow-*, and overflow-ellipsis with text-ellipsis. The corePlugins option is no longer supported.

Does Tailwind v4 support dark mode variants?▼

Yes, Tailwind supports dark mode through the `dark:` variant prefix, such as `dark:bg-gray-900`. New pages and components should follow the same dark mode approach already used in the project.

When should I not use this Tailwind styling approach?▼

Skip this Skill for backend PHP logic, database queries, API routes, JavaScript without HTML/CSS, CSS file audits, build tool configuration, and vanilla CSS work. It focuses specifically on writing utility classes in HTML templates.

Related Skills

Explore More Software Engineering Skills→
baubytebaubyte

tailwindcss-development

Writes and fixes Tailwind CSS v3 utility classes in HTML templates.

Community
Basic
trypostittrypostit
483

tailwindcss-development

Guide Tailwind CSS v4 utility class creation across Blade, JSX, and Vue templates.

Official
Intermediate
aquariuscookaquariuscook

compatibility-testing

Run cross-browser, cross-platform, and cross-device compatibility tests with Playwright.

Community
Advanced
grimmolfgrimmolf

Frontend CSS

Apply standardized CSS practices to resolve inconsistent frontend styling.

Community
Basic