SvelteKit with Tailwind CSS v3

Tailwind CSS version 3 launched just a few days ago, so now you can use it in your projects! If you're using SvelteKit - this article is a simple guide so you can add Tailwind CSS v3 to your project.

Don't worry - you don't need to have an existing SvelteKit project - we'll start at the beginning :)

Don't want to read, just code? Click here to use the template

1. Setup a SvelteKit project

First up, we need a SvelteKit project. If you already have one, you can skip this step.

The setup is done by a few simple commands:

# Setup
npm init svelte@next my-app
# Navigate into the project's folder
cd my-app
# Install the dependencies
npm install

2. Install the dependencies

We'll install the following dependencies:

  • tailwindcss (obviously)
  • postcss because we use TailwindCSS as a PostCSS plugin
  • cssnano to optimize the CSS
  • autoprefixer to add prefixes to CSS-properties for better browser-support
  • svelte-preprocess to run PostCSS as a preprocessor

And (optional) these first-party Tailwind CSS plugins:

Because we need them to preprocess our CSS and not in the production build, we can save them as development dependencies with the -D flag.

npm i tailwindcss postcss cssnano autoprefixer svelte-preprocess @tailwindcss/forms @tailwindcss/typography -D

3. Configure PostCSS

Now we have the dependencies installed, we need to configure them correctly. Create a file postcss.config.cjs in the project's root folder and add this:

const tailwindcss = require("tailwindcss")
const autoprefixer = require("autoprefixer")
const cssnano = require("cssnano")

const mode = process.env.NODE_ENV
const dev = mode === "development"

const config = {
    plugins: [
        tailwindcss(), // first load Tailwind CSS
        autoprefixer(), // then run autoprefixer
        !dev && // optimize the code for production
            cssnano({
                preset: "default",
            }),
    ],
}

module.exports = config

4. Configure Tailwind CSS

We also need a Tailwind CSS config file, so create one called tailwind.config.js in the project's root folder:

const config = {
    mode: "jit",
    content: ["./src/**/*.{html,js,svelte,ts}"],
    theme: {
        extend: {},
    },
    // Only add this if you installed the Tailwind CSS plugins:
    plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
}

module.exports = config

5. Add PostCSS to SvelteKit

In your svelte.config.js, import the installed svelte-preprocess module and add it to the preprocess array:

import adapter from "@sveltejs/adapter-auto"
import preprocess from "svelte-preprocess" // <- Import it here

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [ // <- Create this option
        preprocess({ // <- Add the module
            postcss: true, // <- Set this to enable PostCSS
        }),
    ],
    kit: {
        adapter: adapter(),
        target: "#svelte",
    },
}

export default config

6. Add the CSS to the code

We need a main CSS file, so let's create it in src/app.css with the following content:

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

And don't forget to import the styles in your layout (so it applies to the whole project):

<script>
    // src/routes/__layout.svelte
	import "../app.css";
</script>

<slot></slot>

Test and enjoy

That's it! You can now start your project with

npm run dev -- --open

and check if everything is working!

I hope this article helped you and you enjoy the full power of Tailwind CSS version 3 :)

If you didn't already, check out this awesome video from Simon Vrachliotis (TailwindLabs) to see all the new features in action:

What's new in Tailwind CSS v3.0?

Thank you so much for reading and don't forget to follow so you don't miss new articles 🤗🚀