Overview

This article will show you how to setup Tailwind CSS in a SvelteKit project.

Steps

1. Set up the project and install taliwindcss and its peer dependencies vis npm.

Terminal
npm init svelte@next sveltekit-demo
cd sveltekit-demo
npm install -D tailwindcss postcss autoprefixer

2. Generate tailwind.config.cjs and postcss.config.cjs configuration files

Terminal
npx tailwind init tailwind.config.cjs -p
mv postcss.config.js postcss.config.cjs

3. Configure your template paths in tailwind.config.cjs

./tailwind.config.cjs
1module.exports = {
2  content: ['./src/**/*.{html,js,svelte,ts}'],
3theme: {
4  extend: {}
5}

4. Add the Tailwind directives to your CSS

• Create a ./src/app.css file and add the @tailwind directives for each of Tailwind's layers.

  ./src/app.css
  1@tailwind base;
  2@tailwind components;
  3@tailwind utilities;

5. Import the CSS file

• Create a layout svelte file and import the app.css file we've just created in the step 4.

  ./src/routes/__layout.svelte
  1<script>
  2  import "../app.css"
  3</script>
  4
  5<slot />

6. Run npm development

Terminal
npm run dev

7. Try using Tailwind

• Open up index.svelte and try this.

  ./src/routes/index.svelte
  1<h1 class='font-bold underline'>Hello Tailwind!!!</h1>