Getting Tailwind CSS and Svelte working together

2020-11-12 · 148 words

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).

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.