DEV Community

Discussion on: A simpler way to add TailwindCSS to your Svelte project

alancwoo profile image

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

jadbox profile image
Jonathan Dunlap

I've created a template for sapper based on this:

npx degit "jadbox/sapper-template#rollup-tailwind" sapper-tailwind

Thread Thread
justageek profile image
Brian Smith

Hi Jonathan, I see this in my editor when looking at index.svelte
Error in svelte.config.js

Error: ENOENT: no such file or directory, uv_cwdsvelte

any ideas, the app seems to run ok.