skills.rest
kettleofketchup
kettleofketchupCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

tailwind

Configure Tailwind CSS v4 themes using CSS-first directives.

Updated Apr 3, 2026
Search Tags:#theming#frontend#css#configuration#tailwind#brand-sync#light-dark-mode
One-click install
npx skills add https://github.com/kettleofketchup/KettleOfSkills --skill tailwind-kettleofketchup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwind
Source: https://github.com/kettleofketchup/KettleOfSkills/tree/main/plugins/tailwind/skills/tailwind
Command: npx skills add https://github.com/kettleofketchup/KettleOfSkills --skill tailwind-kettleofketchup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Tailwind CSS v4 moved all configuration from legacy JavaScript files to CSS-first directives, breaking existing workflows for developers used to earlier Tailwind versions. Manually syncing theme colors with project brand skills is error-prone and leads to inconsistent styling across assets. This skill eliminates that friction by providing clear, step-by-step guidance for v4 configuration, theming, and brand color synchronization.

Core Features & Use Cases

  • CSS-first Configuration Guidance: Covers all Tailwind v4 directives including @theme, @theme inline, @import, @plugin, @source, and @custom-variant, with reference documentation for full syntax details.
  • Multi-Pattern Theming Workflows: Provides step-by-step processes for flat static themes, light/dark mode with runtime switching, and dark-only single-theme projects.
  • Brand Skill Synchronization: Includes logic to detect project brand skills, enforce a single source of truth for brand colors, and propagate updates between brand records and Tailwind theme tokens to avoid drift.
  • Use Case: For example, if you need to update your SaaS product's primary brand color across light and dark modes, this skill walks you through updating the canonical brand record first, then propagating the change to your Tailwind CSS entry file to ensure consistency.

Quick Start

Use the tailwind skill to update your project's primary brand color and sync it across all active theme modes.

Frequently Asked Questions about tailwind

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

FAQPage Schema
How do I configure Tailwind CSS v4 themes using CSS instead of JavaScript?▼

Tailwind CSS v4 configuration uses CSS-first directives like @theme and @import instead of legacy JavaScript files. This approach streamlines theme management by defining tokens directly in your CSS entry file.

What is the best way to set up light and dark mode switching in Tailwind v4?▼

Light and dark mode in Tailwind v4 is set up using CSS-first directives and custom variants. This provides step-by-step workflows for runtime switching, flat static themes, and dark-only single-theme projects.

How do I sync brand colors with Tailwind theme tokens to prevent styling drift?▼

Sync brand colors with Tailwind theme tokens by detecting project brand records and enforcing a single source of truth. This propagation prevents styling drift between brand assets and CSS configuration.

When do I need to use @theme inline versus @theme in Tailwind CSS?▼

Use @theme inline versus @theme in Tailwind CSS when you need specific directive configuration for content source detection and plugin integration. Correct usage ensures proper token mapping and styling output.

Does Tailwind v4 still require a JavaScript config file for custom plugins?▼

Tailwind v4 does not require a JavaScript config file for custom plugins. It uses CSS-first directives like @plugin and @source to integrate plugins and configure content detection directly in your CSS.

Why are my Tailwind v4 theme colors not updating across light and dark modes?▼

Tailwind v4 theme colors fail to update across modes when brand records and Tailwind tokens fall out of sync. Updating the canonical brand record first ensures changes propagate correctly to all active themes.

Related Skills

Explore More Software Engineering Skills→
marcusagmmarcusagm
4

tailwind-patterns

Configure Tailwind v4 CSS-first themes with @theme directives and container queries.

Community
Advanced
Shaarav4795Shaarav4795

color-palette

Generate an 11-shade color scale and Tailwind v4 CSS template from a brand hex.

Community
Intermediate
Oscar-Ivan-SalasOscar-Ivan-Salas

tailwind-patterns

Standardize frontend styling with CSS-first Tailwind v4 patterns.

Community
Intermediate
Jorge-IvanJorge-Ivan
1

tailwindcss-core

Configure Tailwind CSS themes, utilities, and variants directly in CSS files.

Community
Intermediate