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!
Top comments (0)