SvelteKit with Tailwind CSS

What is SvelteKit?

SvelteKit, built on top of Svelte, is a framework for rapidly developing robust, performant web applications. You can read more about Svelte here.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Setup SvelteKit with Tailwind CSS

First, let’s create a new SvelteKit project if you don’t have one set up already.

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

Install the Tailwind CSS dependencies.

npm install -D tailwindcss postcss autoprefixer

Create the Tailwind CSS config files.

npx tailwindcss init tailwind.config.cjs -p

In your svelte.config.js file, import vitePreprocess to enable processing <style> blocks as PostCSS.

// svelte.config.js

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	},
	preprocess: vitePreprocess()
};

export default config;

Add the paths to all of your template files in your tailwind.config.cjs file.

//tailwind.config.cjs

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

Create a ./src/app.css file and add the @tailwind directives for each of Tailwind’s layers.

/* app.css */

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

Create a ./src/routes/+layout.svelte file and import the newly-created app.css file.

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

<slot />

That’s it! You can now start using Tailwind CSS utility classes in your markup! 🚀

<!-- +page.svelte -->

<h1 class="text-3xl font-bold underline">Welcome to SvelteKit</h1>

Conclusion

The combination of SvelteKit & Tailwind CSS provides a powerful toolset for creating modern web applications that are both visually appealing and highly functional. Whether you’re building a small personal project or a large-scale enterprise application, the SvelteKit & Tailwind integration is a great choice for optimizing your design and development workflow.

Check out the repository at GitHub to see the source code.