Communitygithub.com

secondsky/tailwind-v4-shadcn

Configuración probada en producción para Tailwind CSS v4 con shadcn/ui, Vite y React. Úsalo al inicializar proyectos React con Tailwind v4, configurar shadcn/ui, implementar modo oscuro, depurar problemas de variables CSS, corregir cambios de tema, migrar desde Tailwind v3 o encontrarte con problemas de color/tema. Cubre: patrón @theme inline, arquitectura de variables CSS, modo oscuro con ThemeProvider, composición de componentes, configuración de vite.config, errores comunes de v4 y patrones probados en producción.

¿Qué es tailwind-v4-shadcn?

Este skill proporciona una guía integral y probada en producción para configurar Tailwind CSS v4 junto con shadcn/ui, Vite y React. Está diseñado para desarrolladores que necesitan inicializar nuevos proyectos con estas herramientas, implementar modo oscuro, o migrar desde versiones anteriores de Tailwind. El skill explica en detalle el patrón `@theme inline`, la arquitectura de variables CSS, y cómo usar ThemeProvider para el cambio de tema. También cubre la configuración de `vite.config`, errores comunes de Tailwind v4, y patrones de composición de componentes. Es compatible con cualquier editor de código o agente de IA, y su contenido se basa en experiencia real de producción.

Compatible con~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/secondsky/claude-skills/tree/main/skills/tailwind-v4-shadcn
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace tailwind-v4-shadcn?

| Configuración probada en producción para Tailwind CSS v4 con shadcn/ui, Vite y React. Úsalo al: inicializar proyectos React con Tailwind v4, configurar shadcn/ui, implementar modo oscuro, depurar problemas de variables CSS, corregir cambios de tema, migrar desde Tailwind v3 o encontrarte con problemas de color/tema. Cubre: patrón @theme inline, arquitectura de variables CSS, modo oscuro con ThemeProvider, composición de componentes, configuración de vite.config, errores comunes de v4 y patrones probados en producción.

Skills relacionados

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community