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:
View Website
View Website
View Website
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.
Comments (0)