secondsky/tailwind-v4-shadcn

O que tailwind-v4-shadcn faz?

Configuração testada em produção para Tailwind CSS v4 com shadcn/ui, Vite e React. Use ao: inicializar projetos React com Tailwind v4, configurar shadcn/ui, implementar modo escuro, depurar problemas com variáveis CSS, corrigir alternância de temas, migrar do Tailwind v3 ou encontrar problemas de cores/temas. Abrange: padrão @theme inline, arquitetura de variáveis CSS, modo escuro com ThemeProvider, composição de componentes, configuração do vite.config, pegadinhas comuns da v4 e padrões testados em produção.

Visão Geral

Este skill fornece uma base de código testada em produção para usar Tailwind CSS v4 com shadcn/ui, Vite e React. Ele resolve problemas comuns encontrados ao configurar ou migrar para a v4, especialmente relacionados a variáveis CSS, modo escuro e tema.

Principais Tópicos

1. Padrão @theme inline

No Tailwind v4, use @theme inline para definir tokens de design que são expostos como variáveis CSS. Isso substitui a abordagem @tailwind base/components/utilities.

/* styles.css */
@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

2. Arquitetura de Variáveis CSS

O shadcn/ui usa variáveis CSS para temas. A separação entre tokens de design (definidos em @theme) e variáveis CSS de tema (definidas em :root) é crucial.

:root {
  --background: #ffffff;
  --foreground: #09090b;
}

.dark {
  --background: #09090b;
  --foreground: #fafafa;
}

3. Modo Escuro com ThemeProvider

Use ThemeProvider de next-themes (ou similar) para alternar entre classes. No React, envolva sua aplicação:

import { ThemeProvider } from "next-themes";

function App() {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <YourApp />
    </ThemeProvider>
  );
}

4. Composição de Componentes

Os componentes do shadcn/ui usam tailwind-merge e class-variance-authority. Exemplo de botão:

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

5. Configuração do vite.config

Garanta que o Vite processe o CSS corretamente. Use o plugin @tailwindcss/vite:

// vite.config.ts
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import tailwindcss from "@tailwindcss/vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

6. Pegadinhas Comuns da v4

• Variáveis não sincronizadas: Certifique-se de que as variáveis CSS em :root correspondam aos tokens --color-* em @theme inline.
• Import duplicado: Evite importar tailwindcss mais de uma vez no CSS.
• Modo escuro quebrado: Use @custom-variant dark (&:is(.dark *)) dentro do CSS, ou confie no ThemeProvider com a classe dark.

Fluxo de Trabalho

1. Inicialize o projeto com Vite + React.
2. Instale o Tailwind v4 e o plugin @tailwindcss/vite.
3. Configure vite.config com o plugin.
4. Crie um arquivo CSS global com @import "tailwindcss"; e as definições de tema.
5. Adicione variáveis CSS para modo claro e escuro em :root e .dark.
6. Use @theme inline para mapear variáveis CSS para tokens do Tailwind.
7. Instale o shadcn/ui via CLI e configure o utilitário cn.
8. Envolva a aplicação com ThemeProvider para alternância de temas.

Recursos

• Tailwind CSS v4 Documentation
• shadcn/ui Documentation
• next-themes

Contribuição

Sinta-se à vontade para abrir issues ou enviar PRs se encontrar problemas ou tiver melhorias!