Vite/Vue3 | Storybook | Tailwind - How to setup and configure

[awaritefe]

There really is no good documentation or info on this so wanted to share how i got it to work so anyone else looking to use Tailwind with a Vite/Storybook project can try it how i got it to work.

This is assuming you've set a project up using Vite for Vue.js and then followed the installation process for Storybook.

I also used PNPM but im pretty sure you can follow along with NPM.

Tailwind uses PostCSS to compile your CSS. If you are using Vite, their are configuration mismatches between Storybook and Vite which make configuring Tailwind in a project tricky.

1. Install Tailwind using the PostCSS setup [https://tailwindcss.com/docs/installation/using-postcss]. The Vite setup is a headache and solutions online seem longwinded.

2. in your build in the .storybook folder, Add import "../src/style.css"; into your preview.js file at the top.

3. in your build in the .storybook folder, Add vue to your stories config in your main.js:

You can test if it works by adding a tailwind class: border border-red-500 around the Vite HelloWorld number counter button and inspecting it.

IMPORTANT Make sure you do this with the environments off and then run your pnpm(or npm) run dev and pnpm(or npm) run storybook after this has been done or it may not work while its all running.

Hope this helps!

[SherazJutt]

Thanks alot it worked ❤️

The official documentation is very confusing, and I don't find it useful.