Use Sveltekit and Tailwind CSS

Since you're using SvelteKit, you can also look at using the Svelte Adder for Tailwind.

From their README:

You must start with a fresh copy of the official SvelteKit template, which is currently created by running this command:

npm init svelte@next

Once that is set up, run this command in your project directory to set up Tailwind CSS:

npx svelte-add tailwindcss # --jit

That command will perform the Tailwind setup for you, so you don't have to create all the configs yourself.

Luckily, setting up Tailwind CSS in Sveltekit is easy.

1. Install Sveltekit

If you don't have a Sveltekit project already, now's the time to create one.

npm init svelte@next
npm install

2. Install Tailwind CSS

Assuming you already have Svelte

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

If you want to use just in type compilation for Tailwind, install that, too.

npm install -D @tailwindcss/jit

3. Run Tailwind setup

npx tailwindcss init -p

Next, change the created tailwind.config.js to a commonjs module by renaming it to tailwind.config.cjs. You just need to change the extension to cjs.

Then, inside the config, setup which pages/components to purge from.

// tailwind.config.cjs
module.exports = {
    purge: ['src/app.html', 'src/**/*.svelte'],
...
}

4. Create styles.css

Create a styles.css file in the src folder.

// ./src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Now, create a layout component to import the styles from.

// ./src/routes/$layout.svelte
<script>
    import '../style.css';
</script>

5. Connect Sveltekit with Tailwind

This is the final step.

In your svelte.config.cjs file, add postcss as a preprocessor.

// svelte.config.cjs
module.exports = {
    // add this
    preprocess: sveltePreprocess({
        postcss: true,
        defaults: {
            style: 'postcss',
        },
    }),
}

And create a postcss.config.cjs file in the root of the project.

// postcss.config.cjs
module.exports = {
    plugins: {
        'tailwindcss': {},
        autoprefixer: {},
    },
};

If you're using @tailwindcss/jit, replace tailwindcss above with @tailwindcss/jit.

That's it! You're now ready to use Sveltekit and Tailwind CSS.

P.S. Credit goes to Matt Lehrer for writing a great blog post on the subject.

The OP @Nick states:

There aren't any official docs for this integration.

In fact, there is, at least on TailwindCSS's site:

https://tailwindcss.com/docs/guides/sveltekit

They're not unlike the steps outlined in another answer here (in fact, they may be authored by the same person?)

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.

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

Install Tailwind CSS Install tailwindcss and its peer dependencies via npm, and then run the following commands to generate both tailwind.config.cjs and postcss.config.cjs.

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

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

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.

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

<slot />

Run your build process with npm run dev.

Start using Tailwind’s utility classes to style your content.

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