DEV Community

A simpler way to add TailwindCSS to your Svelte project

Ibrahim on May 08, 2020

So currently, from what I found, there are only about 3 or 4 articles that show you how to add TailwindCSS to a Svelte app. And I'm pretty sure the...

Read full post

tobx • Aug 14 '20 • Edited

Running npm run dev starts two servers for me. The second stating that port 5000 is already used and it uses a random one.

I think the first is coming from the script start:dev and the second from autobuild. I guess start:dev is not required at all, because autobuild respectively rollup -c -w is already running sirv.

Anders Bech Mellson • Aug 14 '20

I think you're right. I changed the dev script to "run-p autobuild watch:tailwind" which works just fine

tobx • Aug 15 '20

Alright, then I leave it like that and by the way thank you for the post!

bluephoen1x • Jul 14 '20

The run-p keyword used in the scripts in the package.json will lead port 5000 of localhost could not be used and jump to another random port. I change it to run-s, now it is OK. What is the reason of this?

Anders Bech Mellson • Aug 14 '20

I had the same problem and changed my dev script to: "dev": "run-p autobuild watch:tailwind" - which seems to work fine for me

Johannes Zillmann • Aug 5 '20

Thanks for that post!
2 questions:

(1) Why do you (and seemingly everybody else) put tailwind.css into the public folder ? It seems to me that only the generated index.css needs to be there and it makes more sense to put tailwind.css under src/ !?
(2) With this setup my @apply rules in the style section seem to get lost or not effective (Before i had it working with the setup of dev.to/sarioglu/using-svelte-with-...). Any way to make this work as well ?

Today's dumb idea • Aug 7 '20

2) This tutorial seems to follow a minimalist mindset and only compiles postcss files, not svelte files. If you want to process postcss in svelte files, follow the other tutorial for everything but purgecss. Everything else that differs is because he is calling postcss directly instead of using svelte-preprocessor which you need for running postcss in svelte files.

1) Source file doesn't have to be there, may need to be moved depending on your tooling. If you follow the other tutorial, both files and the generating npm commands should be deleted and contents put in the <style global> instead.

Fatimah • May 15 '20

Thanks for this tutorial. I found it really helpful

Rafael Beckel • Sep 29 '20 • Edited

I'm currently experimenting with Tailwind and still getting my head around the ugly but useful convention of placing lots of modifiers in the markup directly. Quick question: if Svelte automatically scopes our CSS for each component, what would be the advantage of using Tailwind at all? Wouldn't it be cleaner to have the styles inside Svelte's tag instead?</p>

Liz Lam • Jul 17 '20

Exactly what I was looking for. Thanks for the post!

nongomacoders • May 26 '20

Great post.
I get the following error on npm run build
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.

nongomacoders • May 26 '20

Ok. This solves it.
npm install --save-optional win-node-env

Rey Anthony Renacia • Sep 15 '20

this is brilliant, worked for me!

Murty Gudipati • Sep 14 '20

Excellent tutorial. Should replace the one written by Tailwind author :)

Joel Jonsson • May 28 '20

Do you have a clue how to get this to work with sapper?

Alan • Jun 11 '20

For my sapper project I was able to get it running by following steps 1-3 as above then branching off as below:

Step 4: Create static/tailwind.css and add imports
Step 5: Add <link rel='stylesheet' href='index.css' /> to src/template.html
Step 6: Adjust run scripts as follows:

"scripts": {
    "dev": "run-p start:dev watch:tailwind",
    "build": "npm run build:tailwind && sapper build --legacy",
    "watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
    "build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "start:dev": "sapper dev",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run"
}

Then can simply start up with npm run dev