skills.rest
IzzatFirdaus
IzzatFirdausCOMMUNITY
Explore all skills by this author →
GitHub

tailwindcss-development

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

1|Updated Aug 29, 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/IzzatFirdaus/task-enterprise-api --skill tailwindcss-development-izzatfirdaus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/IzzatFirdaus/task-enterprise-api/tree/main/.github/skills/tailwindcss-development
Command: npx skills add https://github.com/IzzatFirdaus/task-enterprise-api --skill tailwindcss-development-izzatfirdaus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling responsive layouts and UI components with Tailwind CSS often leads to deprecated v3 utilities, incorrect v4 configuration, inconsistent spacing, and missing dark mode variants. This Skill guides the AI to write correct Tailwind CSS v4 utility classes that follow the project's existing conventions. ## Core Features & Use Cases - Tailwind v4 Migration Guidance: Replaces deprecated utilities (bg-opacity-, flex-shrink-, overflow-ellipsis) with their v4 equivalents and enforces CSS-first @theme configuration over tailwind.config.js. - Layout & Component Styling: Builds responsive grid layouts, flexbox dashboards with sidebars, cards, tables, navbars, forms, and badges using utility classes. - Dark Mode & Spacing Conventions: Applies dark: variants consistently and uses gap utilities instead of margins for sibling spacing. - Use Case: When building a multi-column product card grid in a Blade template, the Skill generates responsive Tailwind v4 classes with proper gap spacing and dark mode support matching the project's conventions. ## Quick Start Ask the AI 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, for example `@theme { --color-brand: oklch(0.72 0.11 178); }`. The separate `tailwind.config.js` file and `corePlugins` option are no longer supported.

How do I import Tailwind CSS v4 in my stylesheet?▼

Use a standard CSS import statement `@import "tailwindcss";` instead of the v3 `@tailwind base;`, `@tailwind components;`, and `@tailwind utilities;` directives. This single import replaces all three directives.

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

Opacity utilities like bg-opacity-* are replaced with slash syntax such as bg-black/50, and flex-shrink-* becomes shrink-* while flex-grow-* becomes grow-*. Other replacements include overflow-ellipsis becoming text-ellipsis.

Should I use margin or gap for spacing between flex items?▼

Use `gap` utilities on the parent flex or grid container instead of margins on sibling elements. For example, `<div class="flex gap-8">` spaces children evenly without margin collapse or last-child overrides.

When should I not use this Tailwind styling skill?▼

Skip it for backend PHP logic, database queries, API routes, JavaScript without HTML/CSS components, CSS file audits, build tool configuration, and vanilla CSS work. It is scoped to writing utility classes in HTML templates.

Related Skills

Explore More Software Engineering Skills→
relaticlerelaticle
1.5k

tailwindcss-development

Standardize Tailwind CSS v4 styling across Blade, JSX, and Vue templates.

Official
Intermediate
freekmurzefreekmurze
999

livewire-4

Build reactive Livewire 4 components and interfaces for Laravel applications.

Community
Intermediate
richardnpaulrichardnpaul

browser-qa

Automate visual tests and interaction checks across browser pages.

Community
Advanced
grimmolfgrimmolf

Frontend CSS

Apply standardized CSS practices to resolve inconsistent frontend styling.

Community
Basic