How to add Tailwind CSS to a SvelteKit application

Things you’ll need:

  • SvelteKit project
  • Tailwind CSS package
  • Autoprefixer package


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:
  import "../app.css";

<slot />

Serve and enjoy:

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


Svelte Kitchen @ 2024