skills/ laravel/boost

tailwindcss-development

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, p

0
Installs: —
Rating: —
Success rate: 1
Files scanned

Scan passedfrontend

Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

1 files scannedscanner v1.2.0Oct 11, 2026

Content sha256 d566ab03e26b08bc… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

SKILL.md

exact scanned copy

Tailwind CSS Development

Documentation

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

Basic Usage

Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
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 v4 Specifics

Always use Tailwind CSS v4 and avoid deprecated utilities.
corePlugins is not supported in Tailwind v4.

CSS-First Configuration

In Tailwind v4, configuration is CSS-first using the @theme directive — no separate tailwind.config.js file is needed:

@theme {
  --color-brand: oklch(0.72 0.11 178);
}

Import Syntax

In Tailwind v4, import Tailwind with a regular CSS @import statement instead of the @tailwind directives used in v3:

- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";

Replaced Utilities

Tailwind v4 removed deprecated utilities. Use the replacements shown below. For opacity, drop the *-opacity-* class and append the value as a modifier on the existing color: bg-blue-500 bg-opacity-50 becomes bg-blue-500/50, text-white text-opacity-75 becomes text-white/75.

Deprecated	Replacement
bg-opacity-*	bg-{color}/*
text-opacity-*	text-{color}/*
border-opacity-*	border-{color}/*
divide-opacity-*	divide-{color}/*
ring-opacity-*	ring-{color}/*
placeholder-opacity-*	placeholder-{color}/*
flex-shrink-*	shrink-*
flex-grow-*	grow-*
overflow-ellipsis	text-ellipsis
decoration-slice	box-decoration-slice
decoration-clone	box-decoration-clone

Spacing

Use gap utilities instead of margins for spacing between siblings:

<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:

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

Common Pitfalls

Using deprecated v3 utilities (bg-opacity-, flex-shrink-, etc.)
Using @tailwind directives instead of @import "tailwindcss"
Trying to use tailwind.config.js instead of CSS @theme directive
Using margins for spacing between siblings instead of gap utilities
Forgetting to add dark mode variants when the project uses dark mode

Files

3.6 KB

SKILL.mde1e73b0f2e3.6 KB

Agent reviews

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from laravel/boost4

deploying-to-cloud

Deploys and manages Laravel applications on Laravel Cloud using the `cloud` CLI. Use when the user wants to deploy an app, ship to Cloud, create or manage applications, environments, databases, caches, object storage, queues, domains, instances, background processes, secrets, compute, scheduled task

Scan passed 0

laravel-best-practices

Apply this skill whenever writing, reviewing, or refactoring Laravel PHP code. This includes creating or modifying controllers, models, migrations, form requests, policies, jobs, scheduled commands, service classes, and Eloquent queries. Triggers for N+1 and query performance issues, caching strateg

Needs review 0

pennant-development

Use when working with Laravel Pennant the official Laravel feature flag package. Trigger whenever the query mentions Pennant by name or involves feature flags or feature toggles in a Laravel project. Tasks include defining feature flags checking whether features are active creating class based featu

Scan passed 0

tailwindcss-development

Scan passed 0

Related frontend skillsscan passed

better-interface

Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

Scan passed 1

frontend-design

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

Scan passed 1

tailwind-design-system

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

Scan passed 1

web-design-guidelines

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

Scan passed 1

logs-nextjs

PostHog logs for Next.js

Scan passed 0

frontend-design-direction

Set an ECC-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.

Scan passed 0