Vite + React - Skeleton

Requirements

Tooling	Minimum Version
Vite	6
React	18
Tailwind	3

Installation

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

GitHub

Discord

Create a Project

Start by creating a new Vite project. The template flags 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 its dependencies.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss@3.4.17 init -p

Configure Tailwind

Locate tailwind.config in the root of your project and make the following changes:

import { skeleton, contentPath } from "@skeletonlabs/skeleton/plugin";
import * as themes from "@skeletonlabs/skeleton/themes";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    contentPath(import.meta.url, "react"),
  ],
  theme: {
    extend: {},
  },
  plugins: [
    skeleton({
      // NOTE: each theme included will increase the size of your CSS bundle
      themes: [themes.cerberus, themes.rose],
    }),
  ],
};

Add Tailwind Directives

Open /src/index.css and add the following Tailwind directives:

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

We also recommend removing all existing CSS styles in /src/index.css and /src/App.css.

Set the Active Theme

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

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

Done

Start the dev server using the following command.

npm run dev