How to Use Tailwind (and JIT) with SvelteKit

Tailwind is my favorite CSS framework, and I've recently been using Svelte (with SvelteKit), which is becoming my favorite frontend framework.

So how do you use Tailwind with SvelteKit? Turns out it's quite simple.

First, let's make a new SvelteKit project and install Tailwind + Autoprefixer

npm init svelte@next my-project
yarn -D add tailwindcss autoprefixer

Next, create a postcss.config.cjs file and paste the following

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}

This tells PostCSS (which Vite, the tooling SvelteKit uses, is bundled with by default) to use Tailwind and Autoprefixer.

NOTE: The file must end in .cjs so Vite knows that it is a CommonJS file)

After that, create a file called tailwind.config.cjs then paste the following

module.exports = {
    mode: 'jit',
    purge: ['./src/**/*.svelte'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {}
    },
    variants: {
      extend: {}
    },
    plugins: []
};

This is just the default Tailwind config with JIT enabled and purge set to purge unused styles from all Svelte files.

Finally, we need to create a CSS file and import it inside of __layout.svelte so we can use Tailwind on any page.

/* src/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

<!-- src/routes/__layout.svelte -->
<script>
    import '../global.css';
</script>

...and we're done! Now you can use Tailwind in your SvelteKit project!

Thanks for reading. If you found this post useful, please consider sharing it and checking me out on Twitter , GitHub, and my portfolio.