AutoGineer
Generated banner for Tailwindcss Development
Generated logo for Tailwindcss Development

Tailwindcss Development

LaravelOfficialCreated by laravel

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Always invoke when the user's message includes 'tailwind' in any form. Also invoke for: building responsive grid layouts (multi-column card grids, product grids), flex/grid page structures (dashboards with sidebars, fixed topbars, mobile-toggle navs), styling UI components (cards, tables, navbars, pricing sections, forms, inputs, badges), adding dark mode variants, fixing spacing or typography, and Tailwind v3/v4 work. The core use case: writing or fixing Tailwind utility classes in HTML templates (Blade, JSX, Vue). Skip for backend PHP logic, database queries, API routes, JavaScript with no HTML/CSS component, CSS file audits, build tool configuration, and vanilla CSS.
— the description by laravel

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides specialized assistance for developers working with Tailwind CSS v3. It focuses on applying utility classes effectively within HTML templates like Blade, JSX, and Vue. The skill emphasizes adherence to project-specific conventions, the use of modern layout techniques like Flexbox and Grid, and the correct implementation of dark mode variants. It guides users in writing clean, maintainable markup by prioritizing gap utilities over margins and encouraging component extraction for repeated patterns.

What it does

  • Generates and refines Tailwind CSS utility classes for UI components.
  • Provides patterns for responsive grid and flexbox layouts.
  • Ensures dark mode support using standard dark variants.
  • Advises on class organization and reduction of redundant styling.
  • Suggests component extraction for repeated UI patterns.
  • Validates class usage against Tailwind CSS v3 standards.

When to use it

  • When building or updating responsive layouts with Tailwind.
  • When styling UI components like cards, tables, or navigation bars.
  • When implementing dark mode support for new or existing components.
  • When refactoring messy utility classes to improve maintainability.
  • When needing to ensure consistent spacing using gap utilities.

Advantages

  • Promotes consistent styling across the codebase.
  • Reduces visual clutter by favoring gap utilities over margins.
  • Ensures compatibility with project-specific component frameworks.
  • Helps maintain accessibility and dark mode parity.

Usage examples

“Create a responsive 3-column product grid using Tailwind CSS.”
The agent provides a grid container with appropriate grid-cols and gap classes, ensuring it adapts from a single column on mobile to three columns on large screens.
“How do I make this navbar support dark mode?”
The agent suggests adding dark: variants to the background and text classes to ensure the navbar adapts correctly to the user's color scheme.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/laravel/tailwindcss-development/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip tailwindcss-development.zip -d .agents/skills

Documentation by laravel

Tailwind CSS development

Documentation

Use search-docs for detailed Tailwind CSS v3 patterns and documentation.

Basic usage

  • Use Tailwind CSS classes to style HTML. Before introducing new patterns, check and follow the project's existing Tailwind conventions.

  • Offer to extract repeated patterns into components that match the project's conventions, such as Blade, JSX, or Vue components.

  • Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.

Tailwind CSS v3 specifics

  • Always use Tailwind CSS v3 and verify that you use only classes it supports.

  • Configure Tailwind in the tailwind.config.js file.

  • Import Tailwind with the @tailwind directives:

<!-- v3 Import Syntax -->

@tailwind base;
@tailwind components;
@tailwind utilities;

Spacing

When listing items, use gap utilities for spacing. Don't use margins.

<!-- Gap Utilities -->

<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Dark mode

If existing pages and components support dark mode, new pages and components must support it the same way, typically using the dark: variant:

<!-- Dark Mode -->

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>

Common patterns

Flexbox layout

<!-- Flexbox Layout -->

<div class="flex items-center justify-between gap-4">
    <div>Left content</div>
    <div>Right content</div>
</div>
Grid layout

<!-- Grid Layout -->

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
</div>

Verification

  1. Check the visual rendering in the browser

  2. Test responsive breakpoints

  3. If the project uses dark mode, verify it

Common pitfalls

  • Using margins for spacing between siblings instead of gap utilities

  • Forgetting to add dark mode variants when the project uses dark mode

  • Not checking existing project conventions before adding new utilities

  • Overusing inline styles when Tailwind classes would suffice

Files

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
laravel
Publisher
Laravel (Official)
Source
laravel/boost · .ai/tailwindcss/3/skill/tailwindcss-development · commit 5f8d05d
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE.md)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by laravel or Laravel.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download tailwindcss-development.zip