Tailwind CSS Svelte - Flowbite

Learn how to install and set up Tailwind CSS with Flowbite for your Svelte project and start developing modern web applications using interactive elements based on utility classes

Svelte is a modern and growing front-end compiler. Developers build boilerplate-free components using languages HTML, CSS and JavaScript. Svelte compiles your code to tiny, framework-less vanilla JS.

Install SvelteKit and Tailwind CSS

Before anything make sure that you install SvelteKit and Tailwind CSS. If you already have them installed, you can proceed to the next step.

npm init [email protected] sveltekit-demo
cd sveltekit-demo

npm install
npx [email protected] tailwindcss

Method 1: Using Flowbite-Svelte

Flowbite Svelte is an unofficial Flowbite component library for Svelte. All interactivities are handled by Svelte.

Install Flowbite-Svelte using NPM:

npm i -D flowbite-svelte

Update the tailwind.config.js file with the following details:

const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
  ],

  theme: {
    extend: {},
  },

  plugins: [
    require('flowbite/plugin')
  ],
  darkMode: 'class',
};

module.exports = config;

Method 2: Using Flowbite.js

If you prefer using flowbite.js, after installing Tailwind CSS, install flowbite:

npm i -D flowbite

Update tailwind.config.js by adding the following:

plugins: [
    require('flowbite/plugin')
  ],

Update src/__layout.svelte by adding flowbite.css:

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

Modify the src/app.html by adding flowbite.js as the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link rel="icon" href="%svelte.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
	%svelte.head%
    </head>
  <body>
    <div id="svelte">%svelte.body%</div>
    <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
  </body>
</html>

Method 3 Using CDN

This method uses the CDN and using Flowbite unpurged CDN JS/CSS. You don’t need to install TailwindCSS nor Flowbite. The Flowbite contains Tailwind CSS v3.0.1. So you can add CSS and JS link in the src/app.html. Place flowbite.min.css in the head and flowbite.min.js just before the body tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link rel="icon" href="%svelte.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css" />
  %svelte.head%
  </head>
  <body>
    <div id="svelte">%svelte.body%</div>
   <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
  </body>
</html>

If you want it only in a certain directories, create src/your-dir/__layout.svelte and add the Flowbite CSS in the svelte:head section.

<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" /></svelte:head> 
<slot />

If you are using Flowbite.js, you need to add rel="external" to the link tag for pages using Flowbite interactivities.

<a rel="external" href="path">Path</a>

By default, the SvelteKit runtime intercepts clicks on <a> elements and bypasses the normal browser navigation for relative (same-origin) URLs that match one of your page routes. — SvelteKit doc Adding a rel=external attribute to a link will trigger a browser navigation when the link is clicked.