skills.rest
daviddatuX25
daviddatuX25COMMUNITY
Explore all skills by this author →
GitHub

tailwindcss-development

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

Updated Jul 18, 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/daviddatuX25/Serbizyu-2.0 --skill tailwindcss-development-daviddatux25
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/daviddatuX25/Serbizyu-2.0/tree/main/.cursor/skills/tailwindcss-development
Command: npx skills add https://github.com/daviddatuX25/Serbizyu-2.0 --skill tailwindcss-development-daviddatux25

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling responsive layouts and UI components with Tailwind CSS requires knowing current v4 conventions, and outdated v3 patterns like @tailwind directives or deprecated utilities cause broken builds and inconsistent designs. ## Core Features & Use Cases - Tailwind v4 Guidance: Enforces CSS-first configuration with the @theme directive and @import "tailwindcss" syntax instead of legacy config files. - Layout & Component Patterns: Provides ready patterns for flexbox structures, responsive grid layouts, dark mode variants, and spacing with gap utilities. - Deprecated Utility Migration: Maps removed v3 utilities (bg-opacity-, flex-shrink-, overflow-ellipsis) to their v4 replacements. - Use Case: When building a responsive product card grid in a Blade or JSX template, invoke this Skill to generate correct v4 classes with dark mode support and proper gap-based spacing. ## Quick Start Ask the AI to build a responsive three-column card grid with dark mode support using Tailwind CSS v4 in your 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 a config file?▼

Tailwind v4 uses CSS-first configuration with the @theme directive directly in your CSS file, replacing tailwind.config.js. 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-*.

Does Tailwind v4 support dark mode variants?▼

Yes, Tailwind v4 supports dark mode using the dark: variant prefix on utilities. New pages and components should follow the existing project's dark mode conventions, such as bg-white dark:bg-gray-900.

Why is corePlugins not working in Tailwind v4?▼

The corePlugins option is not supported in Tailwind v4 because configuration moved to CSS-first @theme directives. Remove corePlugins from any legacy config and define theme values in CSS instead.

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, as it focuses only on utility-class styling in templates.

Related Skills

Explore More Software Engineering Skills→
fusenginefusengine
22

laravel-vite

Configure Vite for Laravel projects with HMR and production builds.

Community
Intermediate
AsyrafHussinAsyrafHussin
62

laravel-inertia-react

Define Laravel, Inertia, and React patterns for pages, forms, and layouts.

Community
Advanced
KyaniteLabsKyaniteLabs
3

color-system

Generate OKLCH color ramps and semantic token systems with WCAG 2.x contrast verification.

Official
Advanced
tenequmtenequm
32

shadcn-tailwind

Build UIs with Tailwind CSS v4 and shadcn/ui using CSS-first configuration.

Community
Intermediate