skills.rest
karuhun-developer
karuhun-developerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tailwindcss-development

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

1|Updated Jun 6, 2026
Search Tags:#frontend#tailwind css#dark mode#utility classes#responsive layout#css styling#blade templates
One-click install
npx skills add https://github.com/karuhun-developer/ecommerce --skill tailwindcss-development-karuhun-developer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/karuhun-developer/ecommerce/tree/main/.cursor/skills/tailwindcss-development
Command: npx skills add https://github.com/karuhun-developer/ecommerce --skill tailwindcss-development-karuhun-developer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling responsive layouts and UI components with Tailwind CSS requires knowing the correct utility classes, and Tailwind v4 introduced breaking changes (CSS-first config, removed utilities) that make older patterns fail silently. ## Core Features & Use Cases - Tailwind v4 Migration Guidance: Replaces deprecated v3 utilities (bg-opacity-, flex-shrink-) and @tailwind directives with v4 equivalents like @import "tailwindcss" and @theme configuration. - Layout & Component Patterns: Provides ready patterns for flexbox layouts, responsive grids, dark mode variants, and gap-based spacing in Blade, JSX, or Vue templates. - Use Case: You are building a product grid page in a Laravel Blade template and need a responsive three-column card layout with dark mode support that follows Tailwind v4 conventions. ## Quick Start Ask the assistant to style a responsive product card grid with dark mode support using Tailwind CSS v4 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 colors inside @theme blocks, for example --color-brand, instead of a JavaScript config file.

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 the corePlugins option?▼

No, corePlugins is not supported in Tailwind v4. Configuration moved to CSS-first @theme directives, so plugin disabling must be handled through the new CSS-based approach.

Why should I use gap instead of margin for spacing in Tailwind?▼

Gap utilities apply spacing only between siblings inside flex or grid containers, avoiding margin collapse issues and extra space on outer edges. This produces cleaner layouts than adding margins to each child element.

How do I add dark mode support to Tailwind components?▼

Use the dark: variant prefix on utilities, such as dark:bg-gray-900 and dark:text-white, matching the existing dark mode conventions in your project. New components should follow the same pattern as existing pages.

Related Skills

Explore More Software Engineering Skills→
HubDigitalEPNHubDigitalEPN
1

tailwindcss-development

Automates Tailwind CSS v4 utility classes styling for HTML templates and layouts.

Official
Advanced
PTKDrakePTKDrake
1

tailwindcss-development

Style web components with Tailwind CSS v3/v4 responsive layouts and dark mode.

Community
Intermediate
signals-rentalsignals-rental
15

fluxui-development

Provide Flux UI component patterns for Livewire with Tailwind styling.

Official
Intermediate
hschnehschne
1

tailwind

Style Rails ERB views and Svelte components with Tailwind CSS and DaisyUI utilities.

Community
Intermediate