Install Svelte with Tailwind

Svelte+Tailwind.md

Install Svelte

npx degit sveltejs/template svelte-tutorial1
cd svelte-tutorial1
npm install

Install Tailwind

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

Edit rollup to have

import sveltePreprocess from "svelte-preprocess";

...
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [require("tailwindcss"), require("autoprefixer")],
        },
      }),
...

Overwrite tailwind.config.cjs

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

Create tailwind.svelte in base dir

<slot />

<style global>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

Edit main.js

import "../tailwind.svelte";

Test if it works by adding in App.svelte

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