Requirements
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-tscd my-skeleton-appnpm 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 yournode_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