skills.rest
bamboounderwear
bamboounderwearCOMMUNITY
Explore all skills by this author →
GitHub

tailwind

Enforce Tailwind v4 token-based styling in Astro components.

Updated Apr 8, 2026
Search Tags:#code review#design tokens#tailwind css#dark mode#astro#css variables#oklch
One-click install
npx skills add https://github.com/bamboounderwear/astrodeck --skill tailwind-bamboounderwear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/bamboounderwear/astrodeck/tree/main/.claude/skills/tailwind
Command: npx skills add https://github.com/bamboounderwear/astrodeck --skill tailwind-bamboounderwear

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents broken theming and inconsistent UI styling caused by hardcoded Tailwind colors, inline styles, and incorrect Tailwind v4 setup that won’t adapt correctly in dark mode.

Core Features & Use Cases

  • Tailwind v4-safe utility writing using the correct AstroDeck approach (CSS-driven tokens, no tailwind.config.mjs).
  • Token-first color usage via CSS variables registered through the @theme directive so primary/foreground colors remain consistent.
  • Dark mode done correctly by using semantic tokens (e.g., bg-background text-foreground) instead of relying on dark: utility prefixes.
  • Anti-pattern detection guidance to catch hardcoded color utilities and style="..." usage (based on the repository learnings).

Quick Start

Use the tailwind skill whenever you are reviewing or editing class names or global styling so any colors and layout styles remain token-driven, OKLCH-based, and compatible with Tailwind v4 dark mode.

Frequently Asked Questions about tailwind

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Tailwind v4 dark mode without tailwind.config.mjs in Astro?▼

Configure Tailwind v4 dark mode by registering OKLCH tokens through the @theme directive in globals.css and using semantic classes like bg-background, completely removing tailwind.config.mjs.

Why are my Tailwind CSS colors not switching correctly in dark mode?▼

Tailwind CSS dark mode fails when using hardcoded color utilities. Replace them with @theme-registered OKLCH CSS variables and apply semantic utility classes like text-foreground for proper theming.

What is the best way to enforce design tokens in Tailwind CSS code reviews?▼

Enforce design tokens in Tailwind CSS code reviews by detecting hardcoded color utilities and inline styles, ensuring all className usage applies @theme-registered OKLCH CSS variables for consistent theming.

Does Tailwind v4 work with @astrojs/tailwind for Astro projects?▼

Tailwind v4 in Astro does not support @astrojs/tailwind or tailwind.config.mjs. Astro projects must use a CSS-driven approach with the @theme directive to register OKLCH tokens for themeable styling.

How do I remove inline styles and hardcoded colors from Astro components?▼

Remove inline styles and hardcoded colors from Astro components by replacing them with semantic Tailwind utility classes mapped to @theme-registered OKLCH CSS variables, ensuring theme-safe styling.

When should I use OKLCH color values in Tailwind CSS variables?▼

Use OKLCH color values in Tailwind CSS variables when registering tokens through the @theme directive to ensure perceptually uniform color rendering and proper dark mode overrides in Astro.

Related Skills

Explore More Design & Creative Skills→
recca0120recca0120
11

tailwind-v4

Enforce token-first Tailwind CSS v4 styling and ban literal pixel arbitraries.

Community
Intermediate
jmgomezdevjmgomezdev

tailwind

Enforce Tailwind CSS best practices for React component styling with cn().

Community
Intermediate
blockmatic-iceboxblockmatic-icebox
4

Tailwind v4 + shadcn/ui

Convert Tailwind v4 design tokens into a CSS-variable theming system for React apps.

Official
Advanced
themewagonthemewagon
1

tailwind

Enforce Tailwind v4 design tokens by replacing hardcoded colors and inline styles.

Official
Advanced