Setting Up Svelte 4, SvelteKit 2, TailwindCSS v3, and Flowbite-Svelte

To set up Svelte 4 with these dependencies as well as TailwindCSS and Flowbite-Svelte, we use the latest Svelte installation npx sv create with some minor changes later on.

Install Svelte:

npx sv create ./
Template: SvelteKit minimal
Typechecking: Typescript syntax
Add options: none
Package Manager: npm

Modify Files

After installing, delete package-lock.json and node_modules folder. Replace the dependencies inside package.json with the dependencies.txt in this repository.

Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.js -p

Create src/app.css and add these lines:

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

and import it in src/routes/+layout.svelte by replacing all of the contents inside with

<script lang="ts">
  import "../app.css"
</script>

<slot/>

Setup Flowbite-Svelte

Since Flowbite and Flowbite-Svelte are already included in the package.json, just update the config files to include Flowbite-Svelte.

Update app.css:

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

@layer components {
  @import "flowbite";
}

Update tailwind.config.js
Note: Flowbite-Svelte uses primary and gray in its components. Modify the colors here.
Note: Fonts are configured here as well. Import them first in src/app.css.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite/**/*.js"
  ],
  theme: {
    extend: {
      colors: { // Flowbite-Svelte uses primary and gray in its components. Modify the colors here.
        primary: { // Red
          50: "#fef2f2",
          100: "#fee2e2",
          200: "#fecaca",
          300: "#fca5a5",
          400: "#f87171",
          500: "#ef4444",
          600: "#dc2626",
          700: "#b91c1c",
          800: "#991b1b",
          900: "#7f1d1d",
        },
        secondary: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
        },
         gray: { // Zinc
          50: "#fafafa",
          100: "#f4f4f5",
          200: "#e4e4e7",
          300: "#d4d4d8",
          400: "#a1a1aa",
          500: "#71717a",
          600: "#52525b",
          700: "#3f3f46",
          800: "#27272a",
          900: "#18181b",
        },
      },
      fontFamily: {
        rubik: ["Rubik", "sans-serif"], // Sample custom font. Font should be imported first in src/app.css
      },
    },
  },
  plugins: [require("flowbite/plugin"), require("@tailwindcss/typography")], // Typography is completely optional, btw.
};

Final Install

Just do npm install to reinstall dependencies and then npm run dev to start local dev.