Install Tailwind CSS Svelte

Install Tailwind

First you need to install Tailwind and it's dependences then run the Tailwind npx command to setup your project.

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

Configuration

To properly setup Tailwind you need to make a few changes to your files. In the svelte.config.js file add the line below, below the import adapter line.

import { vitePreprocess } from '@sveltejs/kit/vite';

Set the preprocessor by adding preprocess: vitePreprocess() to the config object in svelte.config.js like below:

/** @type {import('@sveltejs/kit').Config} */
const config = {

  kit: {

    adapter: adapter()
  },

  preprocess: vitePreprocess()
};

After running the npx command, you should have a tailwind.config.cjs file, add content: ['./src/**/*.{html,js,svelte,ts}'], to the module.exports object to enable auto parsing for Tailwind.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

Importing Tailwind into Svelte

To import tailwind classes into you app, add the following Tailwind directives into your app.css file.

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

Then import the app.css file into your +layout.svelte.

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

<slot />

Running

Now Tailwind should be up and running, test it by running the following command.

npm run dev