Simplest way to set up Svelte with Tailwind CSS

I am not here to convince you to use utility-first CSS frameworks like Tailwind, there are plenty of good resources around this topic already. Besides, you are here for a reason.

I am writing this post to provide you the simplest way to set your Svelte project up and running with Tailwind. Here we go!

Initializing your project

Start by creating a new Svelte project:

npx degit sveltejs/template svelte-tailwind && cd svelte-tailwind

Install Svelte's dependecies:

npm install

Setting up Tailwind CSS

Install Tailwind and its dependencies:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Generate your tailwind.config.js and postcss.config.js configuration files:

npx tailwindcss init -p

Configure Tailwind to remove unused styles in production

In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: !process.env.ROLLUP_WATCH,
    content: ['./public/index.html', './src/**/*.svelte'],
    options: {
      defaultExtractor: content => [
        ...(content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []),
        ...(content.match(/(?<=class:)[^=>\/\s]*/g) || []),
      ],
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

There is a lot going on here, let me try to explain. We want to enable PurgeCSS only when rollup is running in production mode. We are going to parse our public/index.html and all the .svelte files under src and extract all the CSS class names used in our files and components. For this to work with Svelte's class directive, we have to use our custom defaultExtractor, matching the syntax used to apply classes conditionally.

Include Tailwind in your global CSS

Use the @tailwind directive to include Tailwind's base, components, and utilities styles in your App.svelte component (we will use svelte-preprocess to parse global styles):

<!-- App.svelte -->
...
<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Delete the public/global.css file and remove <link rel='stylesheet' href='/global.css'> from public/index.html not to interfere with the Tailwind styles.

Configure PostCSS with Svelte preprocessor

Install the Svelte preprocessor dependencies:

npm install -D svelte-preprocess postcss-load-config

Modify your rollup.config.js to include the postcss plugin in your Svelte preprocessors:

// rollup.config.js
...
import sveltePreprocess from "svelte-preprocess";
...
export default {
  ...
  plugins: [
    svelte({
      ...
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: true,
      }),
    }),
...

Time to try out our work!

Copy any of the preview layouts from Tailwind UI to your source, run npm run dev and visit http://localhost:5000:

Not what you are looking for?

If you are looking for ways to configure Tailwind CSS with other frameworks, check out the official installation guide.

Comments

[Piotr "MoroS" Mrożek]

When doing this from scratch, you might run into PostCSS complaining about the lack of configuration files and basically doing nothing. The one thing missing to glue everything together in this case is the postcss.config.js file. The simplest version of this file, that includes Tailwind and Autoprefixer, is given here: tailwindcss.com/docs/installation#...

EDIT: Alternatively, you can simply add PostCSS configuration for rollup.config.js instead of the postcss: true line (to keep the number of files in project root to a minimum):

//...
  postcss: {
    plugins: [
     require("tailwindcss"), 
     require("autoprefixer"),
    ],
  },
//...

[Anthony Gushu]

Thank you for the defaultExtractor point. That fixed the purging of dynamic class attributes for me which I was stuck on for my Sapper template!

[Anthony Gushu]

I gave you credit for that as well in my Tailwind 2 Sapper starter, thanks again!

[Justin Golden]

This is the first guide to actually work for me, although it takes an absurdly long time (over 30 seconds) to reload, despite being a hello world project and saying it takes 0.1 seconds.

[arnu515]

Use Tailwind's JIT mode by setting mode: "jit" in the tailwind.config.js file

[David Layton]

Is there a way that I can use @apply at a component level?

[Teddy Stanowski]

yes you can, so far everything is normally working.

[joshchu]

Hi, I'm kinda new to using tailwind with svelte. I was wondering if this setup would work just fine during production?