DEV Community

Gustavo Caetano
Gustavo Caetano

Posted on

1

Tutorial de instalação do Storybook com Tailwind

Instalação Storybook

Na pasta do seu projeto, execute o comando no terminal:

npx storybook@latest init
Enter fullscreen mode Exit fullscreen mode

Você deverá ver o seguinte texto no terminal:

Need to install the following packages:
storybook@8.1.10
Ok to proceed? (y)
Enter fullscreen mode Exit fullscreen mode

Responda com y.

O Storybook deve detectar se o seu projeto utiliza Vite ou Webpack:

Adding Storybook support to your "Vue 3" app 
• Detected Vite project. 
Setting builder to Vite.
Enter fullscreen mode Exit fullscreen mode

Se isso não acontecer, selecione a ferramenta utilizada no seu projeto nas opções que aparecerão no terminal.

Instalação Tailwind

Na pasta do projeto, instale o tailwind e outras dependências:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Utilize o seguinte comando para gerar os arquivos tailwind.config.js e postcss.config.js:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Arquivo tailwind.config.js:

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Altere o arquivo na segunda linha para:

content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
Enter fullscreen mode Exit fullscreen mode

OBS: Certifique-se de que o caminho './src/**/*.{vue,js,ts,jsx,tsx}' esteja de acordo com a sua estrutura de arquivos!

Arquivo postcss.config.js:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode

Crie o arquivo ./src/index.css e inclua o Tailwind base, components e utilities styles
Arquivo ./src/index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Agora, importe o ./src/index.css no ./src/main.js:

import './index.css'
Enter fullscreen mode Exit fullscreen mode

Integrando Tailwind e Storybook

Se estiver usando Webpack, execute o comando:

npx storybook@latest add @storybook/addon-styling-webpack
Enter fullscreen mode Exit fullscreen mode

Para todos os casos (Vite ou Webpack), vá ao arquivo ./storybook/preview.js e adicione:

import '../src/index.css';
Enter fullscreen mode Exit fullscreen mode

E, assim, seus stories estarão integrados com o Tailwind!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay