skills.rest
bill80362
bill80362COMMUNITY
Explore all skills by this author →
GitHub

tailwindcss-development

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

Updated Aug 14, 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/bill80362/laravel-thread-admin --skill tailwindcss-development-bill80362
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/bill80362/laravel-thread-admin/tree/main/.junie/skills/tailwindcss-development
Command: npx skills add https://github.com/bill80362/laravel-thread-admin --skill tailwindcss-development-bill80362

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, new import syntax, removed utilities) that make older patterns fail silently or break builds. ## Core Features & Use Cases - Tailwind v4 Guidance: Enforces CSS-first configuration with the @theme directive, the @import "tailwindcss" syntax, and replacements for deprecated v3 utilities like bg-opacity-* and flex-shrink-*. - Layout & Component Patterns: Provides ready patterns for flexbox and grid layouts, responsive card grids, spacing with gap utilities, and dark mode variants. - Use Case: When building a Filament or Blade dashboard page with a responsive card grid and dark mode support, this Skill ensures the markup uses correct v4 utilities, consistent spacing, and matching dark mode variants. ## Quick Start Ask the AI to build a responsive three-column 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 a config file?▼

Tailwind v4 uses CSS-first configuration with the @theme directive directly in your CSS file, so no tailwind.config.js is needed. Define custom values like colors inside @theme blocks, for example --color-brand: oklch(0.72 0.11 178).

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

Tailwind v4 replaces the v3 @tailwind base, components, and utilities directives with a single @import "tailwindcss" statement. Using the old @tailwind directives in v4 is a common mistake that breaks the build.

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

Tailwind v4 removed deprecated utilities: bg-opacity-* becomes bg-black/* with numeric opacity, flex-shrink-* becomes shrink-*, and flex-grow-* becomes grow-*. Similar replacements exist for text, border, divide, ring, and placeholder opacity utilities.

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 and text-gray-900 dark:text-white. New pages and components should follow the same dark mode conventions already used in the project.

When should I not use this Tailwind styling skill?▼

Skip it for backend PHP logic, database queries, API routes, JavaScript without HTML or CSS components, CSS file audits, build tool configuration, and vanilla CSS work. It is focused on 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
mwguerramwguerra
35

filament-plugin-scaffold

Generate a Filament v3+ plugin scaffold with Plugin class, ServiceProvider, and optional Pest tests.

Community
Advanced
gzyxdsgzyxds

ui-ux-pro-max

Standardizes UI/UX design quality across web and mobile projects with accessibility audits and responsive behavior.

Community
Advanced
Software-Design-ClubSoftware-Design-Club
1

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic