In this section we will install Skeleton Svelte UI in Svelte + SvelteKit. Skeleton is a fully featured Svelte UI component library. Skeleton allows you to build fast and responsive web interfaces using Svelte + Tailwind. For this tutorial we will use SvelteKit for Skeleton Tailwind , You can Svelte.
Tool Use
Tailwind CSS
SvelteKit
Install Skeleton Svelte UI with Tailwind CSS in SvelteKit.
Run below command to create sveltekit project.
npm create svelte@latest my-app
cd my-app
npm install
npm run dev
Install Tailwind CSS.
npx svelte-add@latest tailwindcss
Install Skeleton in SvelteKit.
npm i @brainandbones/skeleton --save-dev
Tailwind Settings
Setup tailwind config and add the skeleton plugin in tailwind.config.cjs.
tailwind.config.cjs
const config = {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/@brainandbones/skeleton/**/*.{html,js,svelte,ts}'
],
theme: {
extend: {}
},
plugins: [require('@brainandbones/skeleton/tailwind.cjs')]
};
module.exports = config;
Add Skeleton theme
Create theme.css file and add theme color.
src/theme.css
:root {
/* --- Skeleton Theme --- */
/* primary (emerald) */
--color-primary-50: 236 253 245;
--color-primary-100: 209 250 229;
--color-primary-200: 167 243 208;
--color-primary-300: 110 231 183;
--color-primary-400: 52 211 153;
--color-primary-500: 16 185 129;
--color-primary-600: 5 150 105;
--color-primary-700: 4 120 87;
--color-primary-800: 6 95 70;
--color-primary-900: 6 78 59;
/* accent (indigo) */
--color-accent-50: 238 242 255;
--color-accent-100: 224 231 255;
--color-accent-200: 199 210 254;
--color-accent-300: 165 180 252;
--color-accent-400: 129 140 248;
--color-accent-500: 99 102 241;
--color-accent-600: 79 70 229;
--color-accent-700: 67 56 202;
--color-accent-800: 55 48 163;
--color-accent-900: 49 46 129;
/* warning (rose) */
--color-warning-50: 255 241 242;
--color-warning-100: 255 228 230;
--color-warning-200: 254 205 211;
--color-warning-300: 253 164 175;
--color-warning-400: 251 113 133;
--color-warning-500: 244 63 94;
--color-warning-600: 225 29 72;
--color-warning-700: 190 18 60;
--color-warning-800: 159 18 57;
--color-warning-900: 136 19 55;
/* surface (gray) */
--color-surface-50: 249 250 251;
--color-surface-100: 243 244 246;
--color-surface-200: 229 231 235;
--color-surface-300: 209 213 219;
--color-surface-400: 156 163 175;
--color-surface-500: 107 114 128;
--color-surface-600: 75 85 99;
--color-surface-700: 55 65 81;
--color-surface-800: 31 41 55;
--color-surface-900: 17 24 39;
}
Import theme.css in layout main file.
src/routes/__layout.svelte
<script>
import '../app.css';
import '../theme.css';
</script>
<slot />
Import tailwind skeleton svelte button.
src/routes/index.svelte
<script>
import { Button } from '@brainandbones/skeleton';
</script>
<div class="flex justify-center items-center h-screen gap-2">
<div>
<h1 class="text-center text-2xl">Welcome to SvelteKit</h1>
<Button variant="text">Skeleton</Button>
<Button variant="filled-primary">Skeleton</Button>
<Button variant="ring-accent">Skeleton</Button>
<Button variant="ghost-warning">Skeleton</Button>
<button class="px-4 py-2 bg-purple-500 text-white">Skeleton</button>
</div>
</div>
Run the server.
npm run dev