skills.rest
rizalord
rizalordCOMMUNITY
Explore all skills by this author →
Website𝕏@rizalord_GitHub

tailwindcss-development

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

Updated Aug 5, 2026
Search Tags:#frontend#responsive design#tailwind css#dark mode#utility classes#css styling#blade templates
One-click install
npx skills add https://github.com/rizalord/livecode-ptbeon --skill tailwindcss-development-rizalord
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/rizalord/livecode-ptbeon/tree/main/src/backend/.grok/skills/tailwindcss-development
Command: npx skills add https://github.com/rizalord/livecode-ptbeon --skill tailwindcss-development-rizalord

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 Guidance: Enforces CSS-first configuration with the @theme directive and @import "tailwindcss" instead of deprecated @tailwind directives and tailwind.config.js. - Deprecated Utility Replacement: Maps removed v3 utilities (bg-opacity-, flex-shrink-, overflow-ellipsis) to their v4 equivalents. - Layout & Component Patterns: Provides flexbox and grid layout snippets, gap-based spacing, and dark mode variants for cards, navbars, tables, and forms in Blade, JSX, or Vue templates. - Use Case: When building a responsive product card grid in a Laravel Blade template, the Skill generates grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 markup with matching dark mode variants. ## Quick Start Ask the AI to style a responsive three-column card grid with dark mode support using Tailwind CSS v4 in your Blade or JSX 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 defining custom colors as @theme { --color-brand: oklch(0.72 0.11 178); }. No separate tailwind.config.js file is needed, and corePlugins is not supported.

How to migrate Tailwind v3 utilities to v4?▼

Replace deprecated utilities with their v4 equivalents: bg-opacity-* becomes bg-black/*, flex-shrink-* becomes shrink-*, flex-grow-* becomes grow-*, and overflow-ellipsis becomes text-ellipsis. Also replace @tailwind directives with @import "tailwindcss".

Does Tailwind v4 still support the @tailwind directives?▼

No, Tailwind v4 replaces the @tailwind base, components, and utilities directives with a single standard CSS import: @import "tailwindcss". Using the old directives is a common migration pitfall.

How do I add dark mode to Tailwind components?▼

Use the dark: variant on utilities, such as class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white". If existing pages in the project support dark mode, new pages and components must follow the same convention.

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

Use gap utilities instead of margins for spacing between siblings, for example class="flex gap-8" on the parent container. This avoids margin-collapse issues and keeps spacing logic on the parent element.

When should I not use this Tailwind styling skill?▼

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

Related Skills

Explore More Software Engineering Skills→
fusenginefusengine
22

laravel-vite

Configure Vite for Laravel projects with HMR and production builds.

Community
Intermediate
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
LuisSambranoLuisSambrano
7

browser-tests

Guide browser-based web testing for deployment, responsive design, and user flows.

Community
Intermediate
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic