Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to configure svelte with tailwind and svelte-spa-router
npx degit sveltejs/template project-name
cd project-name
npm install
npm install svelte-spa-router
// Temporary issue postcss works only with: autoprefixer@9.8.6 (remove @9.8.6 if the issue was solved)
npm install autoprefixer@9.8.6 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment