How to configure Tailwindcss on SvelteKit 1.0

SvelteKit 1.0? Yes! It was released! Announcing SvelteKit 1.0.

There are some differents between 1.0 and lower versions. SvelteKit 1.0 have included vitePreprocess as an official preprocessor, we can find posts that encourage us to use svelte-preprocess but that is kinda the old way, more about preprocess.

Now it is supposed to be easier and faster!

All the commands are meant to be executed from the root or base directory of your project.

Creating a SvelteKit project.

First, we need a project if you have a project with SvelteKit 1.0 you can skip this step, the command we need to create a project is:

npm create svelte@latest my-app

You have to make some choices like if you want TypeScript or some additional libraries such as Eslint or Prettier, but it isn't relevant for this guide.

Now that we have a project we can start configuring Tailwindcss.

Installing Tailwindcss.

Now we have to install Tailwindcss and Postcss:

npm add -D tailwindcss autoprefixer postcss-load-config

Autoprefixes is a plugin of Postcss but it is a must-have for me.

Initializing and configuring Tailwindcss.

Nice! It is installed now we have to configure it. It begins with the command:

npx tailwindcss init

It should add a new file to our root directory tailwind.config.cjs. We have to replace the content of this file with:

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  // adding this section
  content: [
    './src/**/*.{js,ts,svelte}',
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Create a new file in your directory:

touch postcss.config.cjs

And fill it with:

// postcss.config.cjs
module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}

Inside your /src directory add a file for your styles.

touch src/app.css

And add these lines there:

/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Let's set some styles!

The easy way to import Tailwindcss into your project is creating a layout into your /routes directory.

touch src/routes/+layout.svelte

It could be like this:

<!-- +layout.svelte -->
<script>
  import "../app.css"
</script>

<slot />

If we refresh our app now, we'll see that something changed.

Now we should be able to add Tailwindcss classes and use it!

We can test it easily by changing our +page.svelte file to add some classes.

<h1 class="text-red-600 text-xl">Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

You should see something like this:

Svelte-Add way.

svelte-add is a tool to add libraries or tooling to your svelte project.

To add Tailwindcss we just need:

npx svelte-add@latest tailwindcss

This command will do the same changes that we did early in this guide automatically.

You can read more about svelte-add with Tailwindcss here.

Thanks to Martias who show me svelte-add.

This guide would have a translation to Spanish in my blog enbonnet.com.