Tailwind + Sveltekit in 2023

“If you like tailwind then use it, if you don't like tailwind then don’t use it. Nobody cares” — Firship

I’m not here to discuss the pros and cons, the pitfalls and advantages of tailwind. Resort to the depths of Twitter for an informed and concise discussion on this topic. Ha

Once you’ve reached the conclusion that Tailwindcss will best serve you and your project’s needs when it comes to adding styles to your million-dollar start-up web application, read this.

I’m going to keep this really short, you’re welcome.

1. Create SvelteKit Project

Create your SvelteKit application, feel free to choose any initial configuration you want. Use typescript if you’re a real web developer, and ignore the test setup if you’re ChatGPT v3.

npm create svelte@latest my-app
cd my-app
npm install

2. Install Tailwind dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

At this point, you should have 3 essential files.

1. svelte.config.js
2. tailwind.config.js
3. postcss.config.cjs

We’re going to add a third and a fourth real quick. You can run:

touch src/app.css
touch src/routes/+layout.svelte

3. Configuration

I’ve added some common aliases below for convenience, feel free to delete them and create your own. You will also need to add these to your tsconfig.json if you’re using typescript.

/**
 * svelte.config.js
 */

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';


/** @type {import('@sveltejs/kit').Config} */
const config = {
 // Consult https://kit.svelte.dev/docs/integrations#preprocessors
 preprocess: vitePreprocess(),

 kit: {
  adapter: adapter(),
  alias: {
   '$components': './src/components',
   '$stores': './src/stores',
   '$utils': './src/utils',
   "$actions": "./src/actions",
   "$lib": "./src/lib",
   '$assets': './src/lib/assets',
  }
 }
};

export default config;

/**
 * tailwind.config.js
 */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  mode: 'jit',
  // you dont need `purge: enabled: production` because you are using jit
  purge: [
    "./src/**/*.svelte",
    "./src/**/*.html"
  ],
  theme: {},
  plugins: [],
}

In the app.css:

// src/app.css

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

Finally in your +layout.svelte:

// src/routes/+layout.svelte
<script lang="ts">
 import '../app.css';
</script>

<slot/>

And you’re good to go! Here is the full project

Quality of life (Optional)

1. Use prettier to sort your tailwind classes. If you didn’t elect to use prettier when setting up the SvelteKit Project run:

touch .prettierrc
npm install prettier prettier-plugin-svelte

2. Use the “Inline Fold” VSCode extension to hide all the classes you’re not currently editing.

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold

Follow me for more Sveltekit content.