Other - Skeleton

Skeleton
  1. get started
  2. ›
  3. installation
  4. ›
  5. other

Other

Generic instructions for the Skeleton core.

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 or Discord.

The core of Skeleton is our Tailwind Plugin, which provides access to our framework agnostic design system and Tailwind-based features - everything except components. This comes with two prerequisites:

  • Node-based package management (NPM, PNPM, etc)
  • Tailwind CSS

The exact instructions for installing Skeleton will differ per framework, however we’ve provided a generic guide below.

1

Create a Project

Scaffold your web-based application using any framework (such as Nuxt, SolidStart, Laravel, etc.)

2
3

Install Skeleton

Install the Skeleton core package to gain access to the Skeleton Tailwind plugin.

Terminal window
npm i -D @skeletonlabs/skeleton@next
4

Configure Tailwind

Open tailwind.config in the root of your project. The structure of this file may differ slightly for your framework.

tailwind.config
import { skeleton } from '@skeletonlabs/skeleton/plugin';
import * as themes from '@skeletonlabs/skeleton/themes';


/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // IMPORTANT: preserve any settings provided here
  ],
  theme: {
    extend: {},
  },
  plugins: [
    skeleton({
      // NOTE: each theme included will increase the size of your CSS bundle
      themes: [themes.cerberus, themes.rose],
    }),
  ],
};
6

Set Active Theme

Open the file containing the <body> tag for your project and set the data-theme attribute to define your active theme.

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

Run the Project

Start the dev server for your framework of choice.

Support

While we officially limit support for Skeleton to React, Svelte, and Astro frameworks for now, we have a thriving community of users on GitHub and Discord. If you need further support (directly related to Skeleton) considering reaching out. Other members of the community may be able to assist you.