DEV Community

Cover image for How to setup SvelteKit with Tailwind CSS
Arpit Jalan
Arpit Jalan

Posted on • Originally published at arpitjalan.com

How to setup 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
Enter fullscreen mode Exit fullscreen mode

Install the Tailwind CSS dependencies.

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Create the Tailwind CSS config files.

npx tailwindcss init tailwind.config.cjs -p
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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: []
};
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

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

<slot />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)