Installing Tailwind in a Svelte Project

Before using Tailwind utilities inside Svelte components, Tailwind must be installed and connected to the project.

In this chapter, you will set up Tailwind CSS inside a Svelte application and verify that the styling system works correctly.

Installing Tailwind CSS

Open the terminal inside your Svelte project and install Tailwind:

npm install -D tailwindcss @tailwindcss/vite

These packages add Tailwind and its Vite integration to the project.

Configuring the Vite Plugin

Open vite.config.js and update it:

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    svelte(),
    tailwindcss()
  ]
});

This enables Tailwind support inside the Svelte project.

Importing Tailwind

Open src/app.css and add:

@import "tailwindcss";

This imports Tailwind’s utility classes into the application.

Connecting the CSS File

Open src/main.js and import the stylesheet:

import './app.css';

Now Tailwind styles are available throughout the application.

Testing Tailwind

Open App.svelte and add the following code:

<h1 class="text-4xl font-bold text-purple-600">
  Tailwind Is Working
</h1>

If the text appears large, bold, and purple, Tailwind has been installed successfully.