skills.rest
stacktracelabs
stacktracelabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tailwindcss-development

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

Updated Jun 24, 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/stacktracelabs/laravel-vue-starter-kit --skill tailwindcss-development-stacktracelabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/stacktracelabs/laravel-vue-starter-kit/tree/main/.agents/skills/tailwindcss-development
Command: npx skills add https://github.com/stacktracelabs/laravel-vue-starter-kit --skill tailwindcss-development-stacktracelabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling responsive layouts and UI components with Tailwind CSS requires knowing current utility conventions, and Tailwind v4 introduced breaking changes (CSS-first config, new import syntax, removed utilities) that make older patterns invalid. ## Core Features & Use Cases - Tailwind v4 Guidance: Enforces CSS-first @theme configuration, @import "tailwindcss" syntax, and replacements for deprecated v3 utilities like bg-opacity-* and flex-shrink-*. - Layout & Component Patterns: Provides ready patterns for responsive grids, flexbox layouts, spacing with gap utilities, and dark mode variants. - Use Case: When building a dashboard page with a sidebar and a responsive card grid in a Blade template, this Skill ensures correct v4 classes, consistent spacing, and matching dark mode support. ## Quick Start Ask the assistant 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 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, 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 is a common migration mistake.

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

Tailwind v4 removed deprecated utilities: bg-opacity-* becomes bg-black/*, flex-shrink-* becomes shrink-*, flex-grow-* becomes grow-*, and overflow-ellipsis becomes text-ellipsis. Opacity values remain numeric.

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

Use the dark: variant on utilities, such as bg-white dark:bg-gray-900, so components adapt to the color scheme. New pages and components should match the 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/CSS, CSS file audits, build tool configuration, and vanilla CSS work. It targets writing utility classes in HTML templates only.

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
EyesLight6EyesLight6

tailwindcss-development

Create and correct Tailwind CSS utility classes for responsive HTML components.

Community
Intermediate
abzhawabzhaw

tailwind-css

Applies Tailwind utility classes to build responsive, themed Next.js dashboards.

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

Frontend CSS

Enforce consistent CSS methodologies and design tokens across stylesheets.

Official
Basic