sveltekit-tailwind.md

1 Install Svelte Kit

npm init svelte@next my-app
cd my-app

2 Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer svelte-preprocess
npx tailwindcss init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

3 Enable use of PostCSS in <style> blocks

path svelte.config.js

import preprocess from "svelte-preprocess";

const config = {
  preprocess: [
    preprocess({
      postcss: true,
    }),
  ],
}

4 Configure your template paths

path tailwind.config.cjs

module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

5 Add the Tailwind directives to your CSS

path ./src/app.css

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

6 Import the CSS file

path ./src/routes/__layout.svelte

<script>
  import "../app.css";
</script>

<slot />

7 Start your build process

npm run dev

8 Start using Tailwind in your project

path ./src/routes/index.svelte

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>