tailwind-config

Manage centralized Tailwind configuration and design tokens across monorepo packages.

21|2|Updated Nov 5, 2023
One-click install
npx skills add https://github.com/motormetrics/motormetrics --skill tailwind-config-motormetrics
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tailwind-config
Source: https://github.com/motormetrics/motormetrics/tree/main/.claude/skills/tailwind-config
Command: npx skills add https://github.com/motormetrics/motormetrics --skill tailwind-config-motormetrics

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Tailwind configuration drifts across multiple apps in a monorepo, making styling inconsistent and hard to maintain.

Core Features & Use Cases

  • Centralized Tailwind config extension and token sharing across apps.
  • Add custom colors, typography scales, and design tokens once and apply across all packages.
  • Use case: when introducing a new brand color or spacing scale, update the shared config and rebuild to apply across the frontend.

Quick Start

Update the shared tailwind.config.ts in the monorepo and rebuild to apply the new design tokens.

Frequently Asked Questions about tailwind-config

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

FAQPage Schema
How do I share Tailwind config across multiple packages in a monorepo?

To share Tailwind config across a monorepo, use a centralized tailwind.config.ts file to propagate design tokens, dark-mode mappings, and plugin configurations consistently across all apps. Update the shared config and rebuild to apply changes.

Why does my Tailwind styling drift between apps in a multi-package repository?

Tailwind styling drifts when configuration is duplicated or manually managed across apps. Centralizing your design tokens in a shared configuration file ensures that colors, typography, and spacing scales remain consistent across all packages.

What is the best way to add a new brand color to a frontend design system?

The best way to add a new brand color is by updating the shared tailwind.config.ts in your monorepo. This automatically propagates the new design token and dark-mode mappings across all frontend apps during the build process.

Can I synchronize dark-mode mappings and CSS variables across different environments?

Yes, you can synchronize dark-mode mappings and CSS variables across environments by defining them once in a shared Tailwind configuration. This ensures all packages in the monorepo receive consistent theming updates.

How do I update spacing scales and typography tokens across all apps?

To update spacing scales and typography tokens across all apps, modify the centralized tailwind.config.ts file. Rebuilding the monorepo applies the new design system tokens consistently across every package.

Does centralized Tailwind configuration work with existing plugin configurations?

Yes, centralized Tailwind configuration works with existing plugins. A shared tailwind.config.ts propagates plugin configurations alongside custom colors and design tokens, ensuring unified behavior across all frontend apps.