Adding Tailwind CSS Utilities to Svelte Applications

If you are using SvelteKit, the Tailwind Docs make it easy to set up Tailwind in your app.

This post will walk through adding Tailwind to a regular Svelte app, one without the framework features and server-side rendering of SvelteKit.

Spin up a new Svelte application and pass the --template svelte flag, with my-svelte-app being a generic placeholder used in this example for the name of your application:

npm create vite@latest my-svelte-app --template svelte

Once the project is fully scaffolded, run:

cd my-svelte-app
npm install
npm run dev

cd places you in your project directory, npm install installs all the dependencies and packages listed in your project's package.json file, and npm run dev starts up the Vite development server, which compiles and serves your app so you can view and test changes as you develop.

Next, install Tailwind:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your vite.config.js file:

// vite.config.js

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

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

Update your tailwind.config.js file:

// tailwind.config.js

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

Create a styles.css file in your src folder and drop in these Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import './styles.css' in your App.svelte component:

// App.svelte

<script>
  import './styles.css'
</script>

Add Tailwind styling:

<script>
  import './styles.css'
</script>

<main>
  <div>
    <h1 class="border-4 border-white rounded-full p-4 text-4xl text-teal-400">Hello, Tailwind</h1>
  </div>
</main>

If not already doing so, run npm run dev to start your server and navigate to http://localhost:5173/ to see the Tailwind utilities applied:

Thank you for reading! If you enjoyed this article, please consider sharing it with your network.

Unrelated reading recommendation: Siddhartha by Herman Hesse