How To Use Svelte JS with Tailwind CSS

tailwind CSS + Svelte JS

🔴 If you’re using Sveltekit. Check out this article instead.

Coming from React, I was amazed at how easy development with Svelte was, some of the features that required loads of libraries with React, are in fact offered out-of-the-box with Svelte. There are so many great things about Svelte, I was instantly “hooked” (no pun intended 😁) after reading the docs and have been using it ever since.

Tailwind is an amazing, responsive CSS utility library that allows you to write all of your styles as HTML classes, here is a link to a great tutorial if you want to get started with it.

I’ve been using tailwind with React, and the first thing I searched after discovering svelte was how to add Tailwind CSS to it. The purpose of the tutorial will be to give you a step by step guide, the link to the repo will be provided at the end of this guide.

We will be using PostCSS in this tutorial, head over to this link to learn all about it if you are new to this.

Create A Svelte App

First of all, create a svelte app by entering the following command.

npx degit sveltejs/template your-awesome-project
cd your-awesome-project && yarn
#Or if you are using npm
npx degit sveltejs/template your-awesome-project
cd your-awesome-project && npm install

Add dev dependencies

That was easy! next, install the following dev dependencies.

yarn add -D autoprefixer postcss-cli tailwindcss concurrently cross-env
#Or if you are using npm
npm install autoprefixer postcss-cli tailwindcss concurrently cross-env --save-dev

The cross-env package will allow you to set environment variables in your package.json scripts if you are running windows, as the usual ENV_VAR=value command will cause an error.

😷 Hey, wait a sec! This is me from the future with a Quick update…

[UPDATE]
Tailwind v2 and PostCSS v8 just dropped and at the time of this update (2020–11–23), there are breaking changes you might experience.

This will be fixed eventually but in the meantime, here is the combo that’ll work for you if you want to use the latest version of tailwind:

👉 tailwindcss@npm:@tailwindcss/postcss7-compat
👉 postcss@^7
👉 autoprefixer@^9

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli@^7 autoprefixer@^9 concurrently cross-env -D
#OR With NPM
npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-cli@^7 autoprefixer@^9 concurrently cross-env --save-dev

Read this to learn more: 👉 https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Now that’s done, I’ll relinquish the control to other me from the past 👇

Configure Post CSS and Tailwind

Rude interruption! Let’s just continue…

At the root directory of your project, create the Post CSS & Tailwind config files:

touch postcss.config.js public/tailwind.css
npx tailwindcss init

In postcss.config.js, paste this:

module.exports = () => ({ 
  plugins: [
    require("tailwindcss"), 
    require("autoprefixer")
  ],
})

In public/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Npm Scripts

Add the following scripts to your package.json (overwrite the original values set by svelte)

"scripts": {    
   "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": "yarn run build:tailwind && rollup -c",
   "start": "sirv public",
   "serve": "serve public -p 80",
   "dev": "concurrently \"rollup -c -w\" \"yarn run watch:tailwind\""
},

In the dev script, concurrently allows the svelte server to run alongside PostCSS that will watch your tailwind and generate an index.css file in the public folder of your project.

Running the server

yarn run dev
#Or if you are using npm
npm run dev

Open http://localhost:5000

Import The Generated Tailwind Style to Your Project

Open index.html from the public folder of your root project directory, and import the index.css generated by PostCSS

<!-- Paste me in public/index.html -->
<link rel='stylesheet' href='/index.css'>

Just like that, you have added tailwind CSS to your svelte app.

There is one last thing, the tailwind file can get really large, megabytes kind of large, There are lots of unused CSS classes in index.css. It’s okay in development mode, but you don’t want to ship that to your clients.

Luckily, there is a solution for that.

Purge Your CSS

⚠ This part of the guide will not be required if you have JIT enabled in your tailwind.config.js file.

If you have no idea about what JIT is, here is a great article that’ll get you up to speed (https://tailwindcss.com/docs/just-in-time-mode).

If you don’t have JIT enabled, I’m not done with you yet, keep scrolling… ;)

Purging your CSS can be CPU intensive and might slow down your environment if you were to do it in development mode.

For this reason, your CSS will only be purge when the NODE_ENV is set to production. this value is set during the build phase (see the build script in the package.json).

in tailwind.config.js (root directory), enter the following code:

purge: ["./src/**/*.svelte", "./src/**/*.html"],

That’s it! You can now use all your tailwind classes in svelte.

Thanks for taking the time to read!

Don’t be a stranger! Hit me up if you run into any issues and I’ll be more than happy to help out!

Did you enjoy this article? leave feedback and share it with someone who might find it useful.

Links:

🔗 Project Repository
🔗Tailwind with SvelteKit

Level Up Coding

Thanks for being a part of our community! Subscribe to our YouTube channel or join the Skilled.dev coding interview course.

Coding Interview Questions | Skilled.dev