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
Gustavo Caetano | Sciencx (2024-06-19T00:10:31+00:00) Tutorial de instalação do Storybook com Tailwind. Retrieved from https://www.scien.cx/2024/06/19/tutorial-de-instalacao-do-storybook-com-tailwind/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.