# SvelteKit with Tailwind CSS v3

[Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3) launched just a few days ago, so now you can use it in your projects! If you're using [SvelteKit](https://kit.svelte.dev/) - 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](https://github.com/EinLinuus/sveltekit-tailwindcss-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:

```bash
# 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](https://tailwindcss.com/)** (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](https://github.com/tailwindlabs/tailwindcss-forms)** to make form-styling more easy
- **[typography](https://github.com/tailwindlabs/tailwindcss-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.

```bash
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:

```js
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:

```js
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:

```js
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:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

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

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

<slot></slot>
```

## Test and enjoy

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

```bash
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](https://twitter.com/simonswiss) (TailwindLabs) to see all the new features in action:

%[https://www.youtube.com/watch?v=mSC6GwizOag]

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