DEV Community

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

Collapse
 
jayliu50 profile image
Jay Liu • Edited

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
Collapse
 
arperyan profile image
Ryan Arpe • Edited

Hi @JayLiu,

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

Thanks again!.

Ryan