Add Tailwind CSS to an existing Svelte application.

This guide assumes you already have a Svelte application up and running. If not please follow the guide on how to create a new Svelte application first.

Start by running the following commands:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The latter of these commands will have created a tailwind.config.cjs and postcss.config.cjs file. Modify the content section of your tailwind config as follows:

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

Add the tailwind directives to your main css file.

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

Finally, ensure you import the css file into your app before you build or run your application.

<script lang="ts">
    import '../app.css';
</script>