Getting Tailwind CSS and Svelte working together

Following my last post I had to do some further work to get a Svelte and Tailwind CSS development environment up and running. I used this post (and its comments) as a guide:

A simpler way to add TailwindCSS to your Svelte project

inalbant ・ May 8 '20 ・ 2 min read

#tailwindcss #svelte #postcss #purgecss

To process the CSS when running the dev server, an additional npm package was required. I also forgot to install the prettier code formatter so I grabbed that too:

npm i npm-run-all prettier prettier-plugin-svelte --save-dev

The following scripts then needed to be added to package.json to enable reloading to occur properly when running npm run dev:

"scripts": {
  "autobuild": "rollup -c -w",
  "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
  "dev": "run-p autobuild watch:tailwind"
}

This is just another reminder for myself to eventually gather all the steps in one place. Check out the post above for more guidance about the setup.

I'm publishing this as part of 100 Days To Offload. You can join in yourself by visiting https://100daystooffload.com.