Vite + React - Skeleton

Requirements

Tooling	Minimum Version
Vite	6
React	18
Tailwind	4

Installation

WARNING: The following guide will install a pre-release version of Skeleton v3. Some features may be missing, incomplete, or non-functional at this time. Please report bugs and issues on GitHub or Discord.

Create a Project

Start by creating a new Vite project. This will install React and Typescript.

npm create vite@latest my-skeleton-app -- --template react-ts
cd my-skeleton-app
npm install

Install Skeleton

Install the Skeleton core and React component packages.

npm i -D @skeletonlabs/skeleton@next @skeletonlabs/skeleton-react@next

Install Tailwind

Install Tailwind and and the Tailwind Vite plugin.

npm install tailwindcss @tailwindcss/vite

Implement the plugin in vite.config in the root of your project.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
    react() // <-- Must come after Tailwind
  ],
});

Configure Tailwind

Open your global styleshset in /src/index.css and append the following at the top of the file.

@import 'tailwindcss';

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';
@import '@skeletonlabs/skeleton/themes/cerberus';

@source '../node_modules/@skeletonlabs/skeleton-react/dist';

NOTE: please verify the @source path resolves to your node_modules directory.

Set the Active Theme

Open index.html, then set the data-theme attribute on the HTML tag to define the active theme.

<html data-theme="cerberus">...</html>

Done

Start the dev server using the following command.

npm run dev