SvelteKit with Tailwind CSS v3

A simple guide to add Tailwind CSS v3 to your SvelteKit project

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:

• forms to make form-styling more easy
• typography to style vanilla HTML

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 to see all the new features in action:

Watch on youtube.com

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