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 create svelte@latest my-projectcd my-project
Install Tailwind CSS
Install
tailwindcss
and its peer dependencies, then generate yourtailwind.config.js
andpostcss.config.js
files.Terminalnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -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/vite-plugin-svelte'; /** @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.js
file.tailwind.config.js/** @type {import('tailwindcss').Config} */ export default { 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 />
- Terminal
npm 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>