Tutorial de instalação do Storybook com Tailwind

This content originally appeared on DEV Community and was authored by Gustavo Caetano

Instalação Storybook

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

npx storybook@latest init

Você deverá ver o seguinte texto no terminal:

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

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.

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

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

npx tailwindcss init -p

Arquivo tailwind.config.js:

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Altere o arquivo na segunda linha para:

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

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: {},
  },
}

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;

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

import './index.css'

Integrando Tailwind e Storybook

Se estiver usando Webpack, execute o comando:

npx storybook@latest add @storybook/addon-styling-webpack

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

import '../src/index.css';

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

This content originally appeared on DEV Community and was authored by Gustavo Caetano