skills.rest
webdevarif
webdevarifCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevarifGitHub

neuro-tailwind

Generates production-ready Tailwind CSS v3 and v4 utility classes, themes, and component patterns.

Updated Apr 18, 2026
Search Tags:#responsive design#tailwind css#dark mode#component patterns#utility classes#frontend styling#oklch colors
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill neuro-tailwind-webdevarif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neuro-tailwind
Source: https://github.com/webdevarif/claude-skills/tree/main/neuro-tailwind
Command: npx skills add https://github.com/webdevarif/claude-skills --skill neuro-tailwind-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing correct Tailwind CSS requires knowing exact utility class names, version-specific syntax differences between v3 and v4, and best practices for responsive design, dark mode, and theming. This Skill eliminates guesswork by providing verified class names, configuration patterns, and ready-to-use component markup. ## Core Features & Use Cases - Version-aware guidance: Detects whether a project uses Tailwind v3 (tailwind.config.js) or v4 (CSS-first @theme config) and applies the correct syntax, including renamed classes like bg-linear-to-r and shrink-0. - Theming and color systems: Implements HSL (shadcn/ui pattern), oklch (v4 default), and hex color systems with semantic tokens, plus class-based and media-based dark mode setups. - Component and layout patterns: Provides copy-ready markup for buttons, cards, modals, tables, forms, navigation, grids, fluid typography with clamp(), container queries, and animations. - Use Case: When building a responsive dashboard with a sidebar, sticky header, and dark mode toggle in a Next.js project, this Skill supplies the exact grid classes, CSS variable switching pattern, and next-themes integration code. ## Quick Start Ask the AI to build a responsive card grid with dark mode support using Tailwind CSS for your project.

Frequently Asked Questions about neuro-tailwind

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: import Tailwind with @import "tailwindcss" and define design tokens inside an @theme block, such as --color-primary or --font-sans. JavaScript config is optional, and content detection is automatic.

What is the difference between Tailwind v3 and v4?▼

Tailwind v4 replaces tailwind.config.js with CSS-first @theme configuration, uses oklch colors, has built-in container queries, and renames classes like bg-gradient-to-r to bg-linear-to-r. It also delivers faster builds via Lightning CSS but requires modern browsers.

How do I add dark mode to a Tailwind CSS project?▼

In v3, set darkMode: "class" in tailwind.config.js; in v4, define a @custom-variant for dark or rely on the default media-query behavior. Use CSS variables that switch values under a .dark class, or pair with next-themes in Next.js apps.

Should I use oklch, HSL, or hex colors in Tailwind?▼

Use oklch for v4 projects needing perceptually uniform, wide-gamut colors; HSL for shadcn/ui or v3 projects needing easy lightness manipulation; and hex for simple projects like Shopify or WordPress themes where color manipulation is unnecessary.

Why is my Tailwind dark mode class not working?▼

The .dark class must be placed on the html element or a parent, not the element itself. Also verify every color has a dark: variant or uses switching CSS variables, since hardcoded classes like bg-white never change automatically.

Does Tailwind v4 support container queries?▼

Yes, container queries are built into Tailwind v4 using the @container class on a parent and variants like @md: or @lg: on children. In v3, container queries require an official plugin to achieve the same behavior.

Related Skills

Explore More Software Engineering Skills→
theslashdojotheslashdojo

config

Install, configure, and migrate Tailwind CSS across v3 and v4 projects.

Official
Advanced
2389-research2389-research
90

css-development:refactor

Refactor CSS inline styles and utility classes into semantic components with dark mode variants and tests.

Official
Advanced
jaysoojaysoo
1

visual-ui-tester

Identify visual regressions in web UIs with Playwright MCP tests across breakpoints.

Community
Intermediate
auxi-wardrobeauxi-wardrobe
1

ck:ui-styling

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

Official
Advanced