How to install Tailwind CSS with Svelte and Flowbite

#tailwindcss #svelte #javascript #opensource

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.

Flowbite is an open-source component library built with the utility classes from Tailwind CSS including buttons, modals, dropdowns, datepickers, and more.

Tailwind CSS is a modern utility-first CSS framework that you can use to quickly prototype and build websites and user interfaces.

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 svelte@next sveltekit-demo
cd sveltekit-demo

npm install
npx svelte-add@latest 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/flowbite@1.3.2/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/flowbite@1.3.0/dist/flowbite.min.css" />
  %svelte.head%
  </head>
  <body>
    <div id="svelte">%svelte.body%</div>
   <script src="https://unpkg.com/flowbite@1.3.2/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/flowbite@1.3.2/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.