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 5d5ca4614cea25a4… — 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 v3 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 v3 Specifics

  • Always use Tailwind CSS v3 and verify you're using only classes it supports.
  • Configuration is done in the tailwind.config.js file.
  • Import using @tailwind directives:
@tailwind base;
@tailwind components;
@tailwind utilities;

Spacing

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

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

Flexbox Layout

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

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 browser for visual rendering
  2. Test responsive breakpoints
  3. Verify dark mode if project uses 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

1
2.9 KB

Agent reviews

0

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

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

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
open-gstack-browser

Launch GStack Browser — AI-controlled Chromium with the sidebar extension baked in.

Scan passed 0
migrate-radix-to-base

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

Scan passed 0