skills.rest
coleYab
coleYabCOMMUNITY
Explore all skills by this author →
𝕏@coleYabuGitHub

tailwindcss-development

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

Updated Aug 31, 2026
Search Tags:#frontend#responsive design#tailwind css#dark mode#utility classes#tailwind v4#css styling
One-click install
npx skills add https://github.com/coleYab/usacr --skill tailwindcss-development-coleyab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/coleYab/usacr/tree/main/.grok/skills/tailwindcss-development
Command: npx skills add https://github.com/coleYab/usacr --skill tailwindcss-development-coleyab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling responsive layouts and components with Tailwind CSS requires knowing current v4 syntax, deprecated utility replacements, and project conventions, which is error-prone when migrating from v3 or working across Blade, JSX, and Vue templates. ## Core Features & Use Cases - Tailwind v4 Guidance: Enforces CSS-first configuration with the @theme directive and @import "tailwindcss" syntax instead of deprecated tailwind.config.js and @tailwind directives. - Deprecated Utility Replacement: Maps removed v3 utilities like bg-opacity-*, flex-shrink-*, and overflow-ellipsis to their v4 equivalents. - Layout & Component Patterns: Covers responsive grids, flexbox structures, dark mode variants, and gap-based spacing for cards, navbars, forms, and dashboards. - Use Case: When building a responsive product grid in a React component, invoke this Skill to generate correct v4 utility classes with dark mode support and proper gap spacing. ## Quick Start Ask the AI to build a responsive three-column card grid with dark mode support using Tailwind CSS v4 in your JSX component.

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, for example `@theme { --color-brand: oklch(0.72 0.11 178); }`. The separate `tailwind.config.js` file and `corePlugins` option are no longer supported.

How do I import Tailwind CSS v4 in my stylesheet?▼

Use a standard CSS import statement: `@import "tailwindcss";`. The v3 directives `@tailwind base`, `@tailwind components`, and `@tailwind utilities` are deprecated and should be removed.

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

Opacity utilities like `bg-opacity-*` are replaced by slash syntax such as `bg-black/*`, and `flex-shrink-*` becomes `shrink-*` while `flex-grow-*` becomes `grow-*`. Other replacements include `text-ellipsis` for `overflow-ellipsis`.

Does Tailwind v4 support dark mode variants?▼

Yes, dark mode uses the `dark:` variant prefix, for example `bg-white dark:bg-gray-900`. New pages and components should follow the same dark mode conventions already present in the project.

Should I use margin or gap for spacing between elements in Tailwind?▼

Use `gap` utilities on the parent flex or grid container instead of margins on sibling elements, for example `<div class="flex gap-8">`. This reduces repetition and keeps spacing logic centralized.

When should I not use this Tailwind styling skill?▼

Skip it for backend PHP logic, database queries, API routes, JavaScript without HTML/CSS components, 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→
aarongmxaarongmx

tailwindcss-development

Apply and fix Tailwind CSS utility classes in Blade, JSX, and Vue templates.

Community
Intermediate
laguagulaguagu
58

ai-app

Scaffold Next.js AI applications with integrated UI and AI SDKs.

Community
Advanced
spencerpaulyspencerpauly
672

accessibility-auditing

Audit web pages for accessibility issues using browser snapshots and keyboard navigation checks.

Community
Intermediate
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

Generate accessible, responsive UIs with shadcn/ui and Tailwind CSS.

Official
Advanced