Discussion on: How to configure Tailwindcss for Svelte and Storybook (2020 Update)

Awesome article! Other guides were out of date and didn't get things working, but I was able to get up and running mainly because of your writeup.

In addition to the instructions above, this is what I had to do to get things running:

PostCSS 8 issues (At the time of writing 9 Jan 2021)

I had to use the compatibilty build for Tailwind:
- yarn remove tailwindcss postcss autoprefixer
- yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
In package.json, I also had to change from "postcss-import": "^14" to "postcss-import": "^12" for the same reason.

Other notes

I had to yarn add autoprefixer for npx tailwind init to work
To install storybook, I ran npx -p @storybook/cli sb init --type svelte
I believe the dependency is svelte-preprocess rather than svelte-preprocessor

Hi @JayLiu,

Thanks for your info. I struggled to get it to work and your comment, helped alot.

Thanks again!.

Ryan

DEV Community