DEV Community

Paul Strickland
Paul Strickland

Posted on • Updated on • Originally published at pestrickland.co.uk

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:

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)