How to add Tailwind CSS to a SvelteKit application

Things you’ll need:

• SvelteKit project
• Tailwind CSS package
• Autoprefixer package

---

Instructions:

Set up your SvelteKit project:

• Create a new SvelteKit project.

pnpm create svelte sveltekitchen

• Follow the prompts.

• Navigate to the project directory.

cd sveltekitchen

Install Tailwind CSS:

pnpm i -D tailwindcss

Install Tailwind CSS peer dependencies:

• install dependencies required by Tailwind CSS

pnpm i -D autoprefixer

Generate configuration files:

• Create Tailwind CSS and PostCSS configuration files.

pnpx tailwindcss init -p

Configure Tailwind CSS:

• Modify the content value of the configuration to handle files that might need to be processed.

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

Add Tailwind CSS directives:

• Create a global css file

touch src/app.css

• Add the following lines at the top to import Tailwind CSS styles:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Import CSS

• Create a root layout component:

touch src/routes/+layout.svelte

• Import the previously created CSS file:

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

<slot />

---

Serve and enjoy:

• Tailwind CSS is now integrated into your SvelteKit project, allowing you to utilize its utility classes.

---

Notes

• Recipe tested using:

  • @sveltejs/adapter-auto@2.1.0
  • @sveltejs/kit@1.22.3
  • autoprefixer@10.4.14
  • svelte@4.1.1
  • svelte-check@3.4.6
  • tailwindcss@3.3.3
  • tslib@2.6.0
  • typescript@5.1.6
  • vite@4.4.6