Set up TailWind CSS in SvelteKit project

Rapidly build modern websites using TailWind CSS inside your SvelteKit projects.

Set up a new SvelteKit project and install Tailwind and AutoPrefixer

mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer

---

Create a postcss.config.cjs file in the root directory of your project

SvelteKit is bundled by Vite which comes with postcss support out of the box.

module.exports = {
    plugins: {
        autoprefixer: {},
        tailwindcss: {},
    },
}

---

TailWind Config

Create a tailwind.config.cjs in the root of your project. You can also run npx tailwind init, but be sure to rename the extension to .cjs

module.exports = {
  mode: 'jit',
  content: ['./src/**/*.svelte'],
}

---

Create and import the CSS

Add these tags somewhere in your CSS that PostCSS knows where to insert the tailwind styles. A good place to import these is within __layout.svelte inside our style tag.

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

That's it! You can now use TailWind CSS classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.