skills.rest
F41541
F41541COMMUNITY
Explore all skills by this author →
GitHub

tailwindcss-development

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

Updated Aug 29, 2026
Search Tags:#responsive design#css#tailwind css#dark mode#utility classes#frontend styling#blade
One-click install
npx skills add https://github.com/F41541/koperasi-app --skill tailwindcss-development-f41541
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/F41541/koperasi-app/tree/main/.agents/skills/tailwindcss-development
Command: npx skills add https://github.com/F41541/koperasi-app --skill tailwindcss-development-f41541

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 ensures generated markup follows Tailwind CSS v4 patterns, avoids deprecated v3 utilities, and respects existing project conventions like dark mode support. ## Core Features & Use Cases - Tailwind v4 Syntax Enforcement: Applies CSS-first configuration with the @theme directive and @import "tailwindcss" instead of deprecated @tailwind directives and tailwind.config.js. - Deprecated Utility Replacement: Automatically swaps removed v3 utilities (bg-opacity-, flex-shrink-, overflow-ellipsis) with their v4 equivalents. - Layout and Component Styling: Builds responsive grid layouts, flexbox page structures, cards, navbars, forms, and dark mode variants in Blade, JSX, or Vue templates. - Use Case: When building a dashboard with a sidebar and card grid, the Skill generates markup using gap utilities for spacing, dark: variants matching the project, and correct v4 class names. ## Quick Start Ask the AI to build 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 CSS 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 CSS v3 to v4?▼

Replace `@tailwind base/components/utilities` directives with a single `@import "tailwindcss"` statement. Then swap deprecated utilities like bg-opacity-* for bg-black/*, flex-shrink-* for shrink-*, and overflow-ellipsis for text-ellipsis.

Does Tailwind CSS v4 support corePlugins configuration?▼

No, `corePlugins` is not supported in Tailwind CSS v4. Configuration moved to a CSS-first approach using the `@theme` directive, so JavaScript-based plugin disabling from v3 no longer applies.

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

Gap utilities apply spacing only between siblings, avoiding margin collapse issues and extra space at container edges. Use `gap-8` on a flex or grid parent rather than margins on individual child elements.

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

Use the `dark:` variant prefix on utilities, such as `bg-white dark:bg-gray-900`. New pages and components should match the dark mode approach already used elsewhere in the project.

Related Skills

Explore More Software Engineering Skills→
optionioptioni

nuxt-ui

Build Vue UI components with @nuxt/ui v4 and Tailwind CSS theming.

Official
Advanced
loadinglucianloadinglucian
1

tailwindcss

Organize Tailwind CSS classes and extract reusable components in Blade, Vue, and React files.

Community
Intermediate
PMDevSolutionsPMDevSolutions
16

visual-qa-verification

Validate visual parity between a generated WordPress FSE theme and its Figma design.

Official
Advanced
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic