What is the tailwindcss-development skill?
The tailwindcss-development skill is a SKILL.md inside Laravel's laravel/boost repository. It tells an AI coding agent how to write Tailwind CSS v3 classes in Blade, JSX and Vue templates: gap utilities over margins, dark variants that match the project, existing conventions first, and a browser check at the end.
The skill's description opens with a blunt rule: invoke it whenever the user's message mentions tailwind in any form. It lives in the laravel/boost repository, a Laravel project whose own description calls it an MCP server for AI-powered local development.
This copy sits in the folder named for Tailwind version 3. Its body tells the agent to use only classes that v3 supports, configure through tailwind.config.js, and import with the three @tailwind directives.
What changes in your agent's output
- Siblings are spaced with gap utilities such as flex gap-8, not with margins on each child.
- If your existing pages support dark mode, new components ship with dark: variants that follow the same approach.
- The agent checks the Tailwind conventions already in your project before adding a new pattern, and offers to extract repeated markup into a Blade, JSX or Vue component.
- Redundant classes are removed, and shared classes move to a parent or child element so groups of elements stay logical.
What the skill covers
- Responsive grids, for example multi-column card grids and product grids.
- Page structures built with flex or grid, such as dashboards with sidebars, fixed topbars and mobile-toggle navigation.
- UI components including cards, tables, navbars, pricing sections, forms, inputs and badges.
- Dark mode variants, spacing fixes and typography fixes.
- Two ready patterns: a flex row with items-center justify-between gap-4, and a grid that runs grid-cols-1, md:grid-cols-2, then lg:grid-cols-3.
Who the tailwindcss-development skill is for
Best for
- Laravel and Blade projects, though the description also names JSX and Vue templates.
- Teams that want an agent to respect the utility style already in the codebase instead of inventing a new one.
- Quick layout work: a card grid, a navbar or a pricing section with dark mode support. For palette decisions behind the dark variants, see dark-mode-design.
- Pairing with a review pass such as web-design-guidelines once the classes are written.
Not for
- Backend PHP logic, database queries, API routes, or JavaScript with no HTML or CSS component. The skill lists all of these as skip cases.
- Auditing plain CSS files, configuring the build tool, or writing vanilla CSS.
- Choosing a visual direction. The skill styles with utilities and does not design; see frontend-design for that.
- Tailwind version 4 projects, since the instructions in this folder say to always use v3. For a token-first setup, see tailwind-design-system.
Use it with UiChemy
The skill writes Tailwind classes in your own templates and never touches WordPress. If the page is headed for WordPress, UiChemy AI to WordPress imports an AI build as an editable page. Test how utility classes carry over on one page, then click Get Started.
How to install Tailwind CSS Development Skill for UI Classes
git clone https://github.com/laravel/boost.gitClone the repository
Run
git clone https://github.com/laravel/boost.git. The README gives no skill install command, only a pointer to the Laravel Boost documentation on the Laravel website.Copy the skill folder
Copy
.ai/tailwindcss/3/skill/tailwindcss-developmentinto the folder where your agent loads skills. The folder holds a single SKILL.md and no extra files.Check the search-docs reference
The skill tells the agent to use
search-docsfor detailed v3 documentation. If your setup has no tool by that name, point the agent at the Tailwind v3 docs yourself.
Check that it loaded
Ask your agent for a three column card grid with Tailwind. With the skill loaded it should use grid-cols-1 md:grid-cols-2 lg:grid-cols-3 with gap-6, and it should add dark: variants if your project already uses dark mode.
Key features
- Triggers on any Tailwind mentionThe description says to invoke the skill whenever the message includes tailwind in any form, plus for responsive grids, page structures, component styling, dark mode and spacing or typography fixes.
- Tailwind v3 classes onlyThe body says to use Tailwind CSS v3 and verify that only classes it supports appear. Configuration goes in tailwind.config.js and styles import through the @tailwind base, components and utilities directives.
- Gap over marginsWhen listing items, the agent uses gap utilities for spacing and avoids margins. The skill's example is a flex container with gap-8 and two child divs.
- Dark mode parityIf existing pages and components support dark mode, new ones must support it the same way, typically with the dark: variant, for example bg-white dark:bg-gray-900.
- Project conventions firstThe agent checks and follows existing Tailwind conventions in the project before introducing new patterns.
- Component extraction offerThe skill asks the agent to offer extracting repeated patterns into components that match the project's conventions, such as Blade, JSX or Vue.
- Class hygieneThe agent weighs class placement, order, priority and defaults, removes redundant classes, and places classes on parent or child elements to reduce repetition.
- Flexbox and grid patternsTwo reference patterns are included: flex items-center justify-between gap-4 for a header row, and grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 for cards.
- Three-step verificationAfter writing classes, the agent checks the browser for visual rendering, tests the responsive breakpoints, and verifies dark mode if the project uses it.
- Named pitfallsThe skill lists margins used between siblings, missing dark variants, ignored project conventions and overused inline styles as mistakes to avoid.
Frequently asked questions
What is the tailwindcss-development skill?
It is a SKILL.md file in Laravel's laravel/boost repository, written by the laravel author and licensed MIT. It guides an AI coding agent when writing or fixing Tailwind utility classes in HTML templates such as Blade, JSX and Vue.
Which Tailwind version does the skill target?
The body of this copy says to always use Tailwind CSS v3, verify that only supported classes appear, configure through tailwind.config.js and import with @tailwind directives. The description mentions v3 and v4 work, but the instructions in this folder are written for v3.
How do I install the tailwindcss-development skill?
The README has no skill install command. Clone the laravel/boost repository, then copy the .ai/tailwindcss/3/skill/tailwindcss-development folder into the directory your agent reads skills from. The folder contains only SKILL.md, so the copy step is a single folder.
When does the skill activate?
The description says to invoke it whenever a message includes tailwind in any form. It also applies to responsive grids, flex or grid page structures, UI components, dark mode variants, and spacing or typography fixes. It skips backend PHP, database queries and build tool configuration.
Does it work with Claude Code, Cursor or Codex?
The repository material for this skill does not list supported agents. It is a plain SKILL.md with name and description frontmatter, so any agent that loads skills in that format can read it. Copy the folder to wherever your agent expects skills.
How does the skill handle dark mode?
It treats dark mode as a parity rule. If existing pages and components support dark mode, new ones must too, typically through the dark: variant. Its verification list also tells the agent to confirm dark mode renders correctly when the project uses it.
Will it write Tailwind for me outside templates?
No. The skill skips JavaScript with no HTML or CSS component, CSS file audits, build tool configuration and vanilla CSS. Its core use case is writing or fixing utility classes in HTML templates, so use another tool for config or stylesheet work.
What mistakes does the skill warn about?
It names four: using margins between siblings instead of gap utilities, forgetting dark mode variants where the project uses dark mode, adding utilities without checking existing conventions, and overusing inline styles when Tailwind classes would do.