skills.rest
mr-creative-hmh
mr-creative-hmhCOMMUNITY
Explore all skills by this author →
GitHub

tailwindcss-development

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

Updated Aug 25, 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/mr-creative-hmh/creative-tasks --skill tailwindcss-development-mr-creative-hmh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/mr-creative-hmh/creative-tasks/tree/main/.agents/skills/tailwindcss-development
Command: npx skills add https://github.com/mr-creative-hmh/creative-tasks --skill tailwindcss-development-mr-creative-hmh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling responsive layouts and UI components with Tailwind CSS requires knowing correct utility classes, v4 migration changes, and project conventions, and mistakes like deprecated utilities or wrong config approaches cause broken builds. ## Core Features & Use Cases - Tailwind v4 Guidance: Enforces CSS-first configuration with the @theme directive and @import "tailwindcss" syntax instead of deprecated v3 patterns. - Layout & Component Patterns: Provides ready patterns for flexbox layouts, responsive grid card layouts, dark mode variants, and spacing with gap utilities. - Deprecated Utility Replacement: Maps removed v3 utilities (bg-opacity-, flex-shrink-, overflow-ellipsis) to their v4 equivalents. - Use Case: When building a dashboard page with a sidebar and responsive card grid in a Blade or Vue template, invoke this Skill to generate correct v4 utility classes with dark mode support. ## Quick Start Ask the AI to build a responsive three-column card grid with dark mode support using Tailwind CSS v4 in your Blade or Vue 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, so no tailwind.config.js is needed. Define custom values like colors inside @theme blocks, for example --color-brand: oklch(0.72 0.11 178).

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

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

What replaced bg-opacity and flex-shrink in Tailwind v4?▼

Tailwind v4 replaced opacity utilities with slash syntax like bg-black/* and text-black/*, and renamed flex-shrink-* to shrink-* and flex-grow-* to grow-*. The overflow-ellipsis utility became text-ellipsis.

Does Tailwind v4 support dark mode variants?▼

Yes, Tailwind v4 supports dark mode using the dark: variant prefix on utilities, such as dark:bg-gray-900. New pages and components should follow the same dark mode conventions already used in the project.

When should I not use this Tailwind styling approach?▼

Skip it for backend PHP logic, database queries, API routes, JavaScript without HTML or CSS, CSS file audits, and build tool configuration. It targets writing utility classes in HTML templates, not vanilla CSS or server-side code.

Related Skills

Explore More Software Engineering Skills→
TijmenWierengaTijmenWierenga

tailwindcss-development

Apply Tailwind CSS v4 utilities to HTML, JSX, and Vue templates.

Community
Intermediate
JoeyMckenzieJoeyMckenzie

wayfinder-development

Generate typed route helpers for Laravel Wayfinder across React, Vue, Svelte, and Inertia projects.

Community
Advanced
lawalletiolawalletio
3

tailwind-css-patterns

Design Tailwind CSS utility-first patterns for React, Vue, and Svelte components.

Official
Advanced
GatsbyhateyouGatsbyhateyou

retro-css-architecture

Organize CSS for 8-bit components with custom properties and pixel fonts.

Community
Basic