DEV Community

[Update] Using Svelte with Tailwindcss - A better approach

sarioglu on November 04, 2019

Updated 2020/01/27, GitHub link for the Sapper template is added below 🎉 I've been using Tailwind since its early days and it is a complete life c...

Read full post

Case09 • Dec 22 '19 • Edited

Great solution! One thing that i'm still struggling with, i can't seem to use regular classes in my svelte files like <div class="bg-red-200">...</div>. It works if i rerun sapper dev. If i use @apply inside tag it works fine. Btw i added inside _layout.svelte. Any idea how to get this working without having to rerun npm run dev every time?

sarioglu • Jan 2 '20

I'm not sure why it is happening. I will check this issue when I create the sapper template.

Srini Raju • Jan 8 '20 • Edited

I faced the same problem but fixed it with the following change.

Change line12 in postcss.config.js
from : const production = !process.env.ROLLUP_WATCH
to : const production = process.env.NODE_ENV !=='development'

sarioglu • Jan 27 '20

Thanks for the information! In fact, using process.env.NODE_ENV in both setups would be better. However since process.env.ROLLUP_WATCH is used to determine mode in rollup.config.js, I wanted to be consistent with it. I've changed it to process.env.NODE_ENV in Sapper template.

Mike • Nov 24 '19

Thanks for sharing that. I'm having issues with responsive classes such as sm:block. Using it throws an error saying that class doesn't exist. Are others able to use responsive classes with the approach explained in this article?

sarioglu • Nov 26 '19

Hi Mike,
Thanks for your comment. Unfortunately I couldn't reproduce this issue. But it can be caused by one of following reasons:

If it is a production-only bug, it may be due to Purgess config. You can refer to tailwindcss.com/docs/controlling-f... for correct usage.
responsive variant may be disabled in your tailwind config. You can solve it using tailwindcss.com/docs/display#respo...

Mike • Nov 27 '19

Thanks for your response. I cloned your repo and changed App.svelte's style to the following:

h1 {
  @apply bg-black text-white md:text-red-200;
}

This throws the same error I see in my project:

[!] (plugin svelte) CssSyntaxError: /home/mikenikles/dev/github/sarioglu/svelte-tailwindcss-template/src/App.svelte:3:3: `@apply` cannot be used with `.md\:text-red-200` because `.md\:text-red-200` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.md\:text-red-200` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.
src/App.svelte

Are you able to use responsive classes such as md:text-red-200?

sarioglu • Nov 27 '19

I'm afraid it is a limitation of tailwindcss. It cannot @apply variants directly. You can use it directly or find a workaround at tailwindcss.com/docs/functions-and...

Mike • Nov 29 '19

Thank you, that helped fix the issue. @screen and regular Tailwind utility classes works as documented.

Patrick Göler von Ravensburg • Jan 28 '20

Thanks for sharing. I ran into a small issue where the production flag in the postcss config is always false and therefore purgecss is not invoked. The NODE_ENV is "development" even when running npm run build in my case. I am on windows and I am resolving this by changing the build script to set NODE_ENV=production && sapper build --legacy. With that purgecss is invoked and everything is fabulous, thanks again.

sarioglu • Jan 29 '20

Same for me too. I didn't mention that because I couldn't find any official information whether it is an expected behavior or not. Thank you for mentioning.

fillipvt • Feb 14 '20

This still happens even though I'm using set NODE_ENV=production && sapper export --legacy I find this super weird. Not sure what to do at all.

The only way for me to avoid having all the classes in production is to use purgecss in both dev and prod. What a bummer

Dana Woodman • Jul 23 '20

What about?

NODE_ENV=production sapper export --legacy

Habib Mustofa • Jun 15 '20

Ahh, simply.
This is great! Thank you!

Note:
If anyone facing css linting warning in @tailwind keyword, just add type="text/postcss".

<style type="text/postcss" global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Malte H • Nov 27 '19

Thank you so much for sharing this!
Got my build time down from 2:20 to just 19 seconds!

One note: noticing that my dev builds are slower than my production ones, i found that (at least for me) always executing purgecss gave me even better timings: 8 seconds!

i.e. replaced
...(production ? [purgecss] : []
with
purgecss

sarioglu • Nov 28 '19

Thank you for sharing your results! Glad to help you out.

I think it worths to disable Purgecss in development. I frequently use DevTools to add/remove some styles to get an instant preview. Therefore, I can sacrifice some seconds for better development experience 🙂

taffit • Jan 3 '20

Thanks a lot for this wonderful article! Much appreciated!

I included it in Sapper by following exactly your description and then, instead of importing and including it in src/App.svelte, I just included it in src/routes/_layout.svelte. This way it should be included in all pages rendered by Sapper.

Works like a charm and, as you mentioned, no additional workflow side-by-side with Sapper/Svelte.

Thanks man!

Guillaume Martigny • Dec 20 '19

You just solve a whole day of headache. I could kiss you!

I had to add a few bolts to make it work fully for me:

added /html/ and /body/ to the whitelistPatterns (purgecss remove style to html or body for some reason)
added emitCss: true to the svelte-loader options when using webpack (allow me to use postcss syntaxe in svelte component)
updated the defaultExtractor regexp to /[\w-/:]+(?<!:)/g (support for svelte class directive)

sarioglu • Jan 2 '20

Thank you! I've updated the template according to your comments. Issue with html and body was happening because index.html is in public folder. Purgecss config now checks every folder under project directory.

Matt Greer • Oct 1 '20

Thanks for making these templates. I noticed after switching the sapper template to typescript with node scripts/setupTypeScriptRollup.js,Tailwind stopped working. The TS script creates some conflicts in rollup.config.js. They are easy to fix though.

remove the extra sveltePreprocess import
in both client and server, in the svelte() call, remove the extra preprocess: sveltePreprocess() lines that got added

I am brand new to Svelte, so might have something wrong, but this seemed to both get me TypeScript and Tailwind.

sarioglu • Oct 2 '20

Thank you Matt! I've noticed this issue. scripts/setupTypeScriptRollup.js does not check if there is an existing sveltePreprocess. So it results with a silent failure. Your fix is correct. I am going to examine the script deeper to find a solution.

claxx moldii • Dec 25 '19

i think this is great! i made a recipe blog based on the sapper at master-tailwind method you mentioned above. i would like to try this method instead. do you have any plans on coming out with sapper-tailwind template on github? i can't figure out which goes into the server and which into client configs as you said. i'm a noob with those sort of things and more of a UI/UX guy. thank you for this! i'll try it out on a svelte project. cheers!

sarioglu • Jan 2 '20

Thanks for your reply. I'm planning to create the sapper version soon.

Andrew Mao • Feb 11 '21

This doesn't seem to work for adding custom utilities: tailwindcss.com/docs/adding-new-ut...

If I try to add a new utility class, e.g.:

  @layer utilities {
    .body-12-caps {
      @apply font-sans font-bold not-italic uppercase;
      font-size: 0.75rem /* 12px */;
      line-height: 1.125rem /* 18px */;
      letter-spacing: 0.1em;
    }
  }

and try to use it with @apply, then I see something like the following:

`@apply` cannot be used with `.body-12-caps` because `.body-12-caps` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.body-12-caps` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

Leo Nistor • Jan 13 '20

Great article! I'm also using .prettierrc.json and .eslintrc.json from this article.

Toby Miller • Nov 5 '19

A better approach indeed!

Dĵ ΝιΓΞΗΛψΚ • Dec 29 '19

thank you so much for this! working perfectly...

Juan Fernando • Mar 4 '20

Any workaround to make it work with svelte-vscode?

Corey Thompson • Nov 4 '19

Thank you!! I found the previous Tailwind implementation a bit lackluster, I'm excited to give it a try again!

claxx moldii • Jan 30 '20

thank you! this is a lot of help!

dustypaws • Apr 10 '20

It's just a minor annoyance, but since I've made those changes, the bundle.js.map file gets send twice on every request. Don't know why really. Everything else seems to be working great tho. :)

josfk • Apr 23 '20

Thanks so much for sharing!! Have you done or are you aware of any public recipe which used this svelte-tw-template?

Muhammad Taha • Jun 22 '20

This doesn't remove unused tailwindcss in dev mode but should remove it when building, right?

Tahmid Faisal • May 10 '22

everything works fine but important modifier like !bg-red-100 doesn't work.why and how can i fix it?

Aaron Wilder • Mar 28 '20 • Edited

Something is wrong with your sapper-template. When exporting, builds are 2 or 3 megs because the extra Tailwind CSS is not getting purged.

Leandro Pelegrini • Jun 2 '20

Need extra config now, Tailwind added purgecss. tailwindcss.com/docs/controlling-f...