DEV Community

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

Collapse
 
brorjoeljonsson profile image
Joel Jonsson

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

Collapse
 
alancwoo profile image
Alan

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

Collapse
 
jadbox profile image
Jonathan Dunlap

I've created a template for sapper based on this: github.com/jadbox/sapper-tailwind-...

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.