search

EricPKerr / sapper-tailwindcss

Sapper, Svelte, TailwindCSS, PurgeCSS starter with Prettier and ESLint enabled
76 stars 10 forks source link

How can I move the postcss configuration to a seperate file and use svelte-preprocess without breaking tailwind? #5

Closed ghost closed 4 years ago

ghost commented 4 years ago

As to be seen in my fork, a very simple modification I did in a personal project of mine broke the whole tailwind injection. Why? Any help is very much appreciated!

RStrydom commented 4 years ago

Hey @GitGangGuy , I was also looking at this template and also wanted the separate postcss config and svelte-preprocess setup.

Luckily before I got here I used another guide successfully - https://dev.to/sarioglu/using-svelte-with-tailwindcss-a-better-approach-47ph

I have combined the two and have it working as expected. I am not a fan of fragmenting things further so I have attached the files here. Although if @EricPKerr is interested we could create a PR to pull it into the main Repo.

Let me know if this works for you :smile: sapper-tailwindcss.zip

EricPKerr commented 4 years ago

Definitely - please open a PR and I will merge. Thanks!

ghost commented 4 years ago

@RStrydom Yeah, I saw that tutorial as well. But as I see in your solution, you have to import the tailwindcss svelte component everywhere you want to use it. Sure, just putting it in the _layout.svelte will allow you to use it everywhere, but I think the current way of importing the styles in the server.js is a better approach. Could anybody assist me with the source code I currently have (in my fork)? That would be amazing!

ghost commented 4 years ago

Alright, so I just force-pushed a possible fix for the problem on my fork - it works great and uses both svelte-preprocess AND rollup-plugin-postcss. (Svelte-Preprocess for Less support, global styles and overall greatness, and rollup-plugin-svelte for easy extraction of the tailwind styles to a single .css file). I'll open a pull request, feel free to modify & merge ;)