How to configure svelte with tailwind and svelte-spa-router

svelte-tailwind-svelte-spa-router config.txt

npx degit sveltejs/template project-name

cd project-name

npm install

npm install svelte-spa-router

// Temporary issue postcss works only with: [email protected] (remove @9.8.6 if the issue was solved)

npm install [email protected] postcss-cli tailwindcss concurrently cross-env --save-dev

npx tailwindcss init -p

code .

touch ./public/tailwind.css

// Add in it the 3 lines bellow:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";


// In 'tailwind.config.js' file add the extensions for svelte (or vue/other)
purge: [
    './src/**/*.html',
    './src/**/*.svelte',
    './src/*.svelte',
    './public/index.html'
  ],


// Add the index.css to the index.html file
<link rel='stylesheet' href='/index.css'>
	

// In package.json replace the default "scripts" commands with the ones bellow

"watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
"build:tailwind": "cross-env NODE_ENV=production postcss public/tailwind.css -o public/index.css",
"build": "npm run build:tailwind && rollup -c",
"start": "sirv public",
"serve": "sirv public -p 80",
"dev": "concurrently \"rollup -c -w\" \"npm run watch:tailwind\""


// Run and see if all works as expected
npm run dev