Using TailwindCSS with SvelteKit

Setting up SvelteKit with TailwindCSS is now more straightforward than it used to be even a couple of weeks ago. Still, you may look around more than necessary find how to do it, so here is the basic setup.

Updated 20th Aug 2022 - The original content has been left at the end of the post if you're on earlier versions of SvelteKit

SvelteKit docs
TailwindCSS docs

You may also be interested in

SvelteKit + .env
SvelteKit + Heroku

---

Updated content

---

Create a svelte app

npm create svelte@latest my-app
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

Note: Official tailwind docs make you install svelte-preprocess, but at time of writing it's included in the skeleton

Update the config files

svelte.config.js

import preprocess from "svelte-preprocess";

const config = {
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
}

tailwind.config.cjs

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

Remove boilerplate CSS (if using demo template) or create app.css in the src root if using skeleton

app.css

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

Create ./src/routes/+layout.svelte if using skeleton or check it if using demo template

+layout.svelte

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

<slot />

---

Original content

---

Create a svelte app

npm create svelte@latest my-app
cd my-app
npx svelte-add@latest tailwindcss
npm i

Remove boilerplate CSS (if using demo template) or create app.css if using skeleton

app.css

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

Using tailwind colors

With the 3.x release, all colors are included. If you want to add your custom ones, or rename the ones that tailwind provides, you can do so in the config file:

tailwind.config.cjs

//Add on top
const colors = require('tailwindcss/colors');

//Add in config
colors: {
    white: colors.white,
    black: colors.black,
    red: colors.red,
    orange: colors.orange,
    amber: colors.amber,
    yellow: colors.yellow,
    green: colors.green,
    lime: colors.lime,
    emerald: colors.emerald,
    teal: colors.teal,
    cyan: colors.cyan,
    sky: colors.sky,      
    blue: colors.blue,
    indigo: colors.indigo,
    violet: colors.violet,
    purple: colors.purple,
    fuchsia: colors.fuchsia,
    pink: colors.pink,
    rose: colors.rose,
    gray: colors.gray,
    neutral: colors.neutral,
    stone: colors.stone,
    zinc: colors.zinc,
    slate: colors.slate,
    },

And you're good to go.