install skeleton svelte ui with tailwind css in svelte + sveltekit

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

Skeleton UI

SvelteKit


Install Skeleton Svelte UI with Tailwind CSS in SvelteKit.

Run below command to create sveltekit project.

npm create [email protected] 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>
a skeleton svelte ui with tailwind css in svelte + sveltekit

Run the server.

npm run dev