Oi Yuri, tudo bem?
O que mudou entre as versões
- Antes (Storybook 7, Next 13): Usava
tailwind.config.js separado - Agora (Storybook 10, Next 16): Tailwind vem pré-configurado no
postcss.config.mjs
PostCSS Configuration
- Antes:
postcss.config.js simples com apenas Tailwind - Agora: Usa formato
.mjs (ES Modules) e pode ter mais plugins
Solução passo a passo para variáveis de tema
1. Criar o arquivo tailwind.config.ts
Como Tailwind ainda é necessário, crie o arquivo na raiz do projeto:
import type { Config } from 'tailwindcss'
const config: Config = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
primary: {
DEFAULT: 'var(--color-primary)',
light: 'var(--color-primary-light)',
dark: 'var(--color-primary-dark)',
},
'theme-violet': {
DEFAULT: 'var(--color-violet)',
light: 'var(--color-violet-light)',
dark: 'var(--color-violet-dark)',
},
},
},
},
plugins: [],
}
export default config
2. Atualizar o postcss.config.mjs
Certifique-se que está assim:
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
export default config
3. Criar variáveis CSS globais
Crie um arquivo de estilos globais (ou atualize o existente) em app/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Variáveis de tema - ROOT */
:root {
--color-primary: #3b82f6; /* Altere para sua cor */
--color-primary-light: #60a5fa;
--color-primary-dark: #1e40af;
--color-violet: #a78bfa;
--color-violet-light: #c4b5fd;
--color-violet-dark: #7c3aed;
}
/* Tema alternativo (se necessário) */
[data-theme="violet"] {
--color-primary: #a78bfa;
--color-primary-light: #c4b5fd;
--color-primary-dark: #7c3aed;
--color-violet: #3b82f6;
--color-violet-light: #60a5fa;
--color-violet-dark: #1e40af;
}
@layer base {
body {
@apply bg-white dark:bg-slate-950;
}
}
4. Usar no seu projeto
Agora você pode usar no Tailwind:
// Exemplo de componente
export function MyComponent() {
return (
<div className="bg-primary text-theme-violet">
Seu conteúdo aqui
</div>
)
}
5. Configurar o Storybook 10 para variáveis
Atualize .storybook/preview.ts (ou .storybook/preview.tsx):
import type { Preview } from '@storybook/react'
import '../app/globals.css'
const preview: Preview = {
parameters: {
layout: 'centered',
backgrounds: {
default: 'light',
},
},
}
export default preview
Caso tenha outras dúvidas, conte com nosso apoio!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
