# SvelteKit - Tailwind CSS Setup

## Introduction

Hello and welcome back to my series of technical blog posts on SvelteKit! In this post, I will be introducing my next topic which is integrating [Tailwind CSS](https://tailwindcss.com/) with SvelteKit.

[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides a set of pre-defined CSS classes that can be used to style HTML elements. It allows you to create complex layouts and designs with minimal CSS code, making it a popular choice among developers.

Integrating TailwindCSS with SvelteKit can help streamline your development process by providing pre-defined styles that can be easily applied to your components.

## Install Tailwind CCS

To install [Tailwind CSS](https://tailwindcss.com/) and its dependencies, navigate to your SvelteKit project directory in your terminal and run the following command:

```bash
pnpm install -D tailwindcss postcss autoprefixer @tailwindcss/forms
```

This command will install the latest version of TailwindCSS, PostCSS, Autoprefixer and Tailwind Forms as dev dependencies in your project.

## Configure Tailwind CSS

Next, we need to create a configuration file for TailwindCSS. You can do this by running the following command in the root of our project directory:

```typescript
pnpx tailwindcss init tailwind.config.cjs -p
```

This command will generate a default `tailwind.config.cjs` file in your project root. The `-p` flag tells Tailwind CSS to generate a basic `postcss.config.cjs` file.

Now add the file paths to the Svelte template files in `tailwind.config.cjs` :

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
}
```

## Add Tailwind to our CSS

Create a `src/app.css` file and add Tailwind:

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

Then add `src/app.css` to our layout file `src/routes/+layout.svelte`:

```xml
<script>
  import "../app.css";
</script>

<slot />
```

## Use Tailwind

We are now ready to sprinkle some Tailwind magic, for example on the main page:

```xml
<div class="mx-auto max-w-2xl text-center p-16">
  <h1 class="text-4xl font-bold text-gray-900">Top 3</h1>

  <div class="mt-8">
    {#if data.todos.length > 0}
      <Todos todos={data.todos} />
    {:else}
      <NewTop3 />
    {/if}
  </div>
</div>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1678366160782/219b1634-0071-4195-bc4d-be19eea7e67d.png align="center")

Check out all the code in the [GitHub Repository](https://github.com/justinramel/svelte-kit-daily-top-3) to see how I've styled the other Svelte components. Thanks for reading!