Installation
Install Tailwind CSS with SvelteKit
Setting up Tailwind CSS in a SvelteKit project.

Create your project
Start by creating a new SvelteKit project if you don't have one set up already. The most common approach is outlined in the Getting Started with SvelteKit introduction.
Terminalnpm init svelte@latest my-appcd my-app
Install Tailwind CSS
Using npm, install
tailwindcss
and its peer dependencies, and then run the following commands to generate bothtailwind.config.cjs
andpostcss.config.cjs
.Terminalnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init tailwind.config.cjs -p
Enable use of PostCSS in <style> blocks
In your
svelte.config.js
file, importvitePreprocess
to enable processing<style>
blocks as PostCSS.svelte.config.jsimport adapter from '@sveltejs/adapter-auto'; import { vitePreprocess } from '@sveltejs/kit/vite'; /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { adapter: adapter() }, preprocess: vitePreprocess() }; export default config;
Configure your template paths
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: [] };
Add the Tailwind directives to your CSS
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;
Import the CSS file
Create a
./src/routes/+layout.svelte
file and import the newly-createdapp.css
file.+layout.svelte<script> import "../app.css"; </script> <slot />
Start your build process
Run your build process with
npm run dev
.Terminalnpm run dev
Start using Tailwind in your project
Start using Tailwind’s utility classes to style your content, making sure to set
lang="postcss"
for any<style>
blocks that need to be processed by Tailwind.+page.svelte<h1 class="text-3xl font-bold underline"> Hello world! </h1> <style lang="postcss"> :global(html) { background-color: theme(colors.gray.100); } </style>