Tailwind CSS

Configure Tailwind

Let's modify a few settings in tailwind.config.cjs. This can be found in the root of your project directory.

Enabled Dark Mode Support

Append the following to enable dark mode. You can pair this with the Lightswitch utility to toggle light/dark modes.

const config = {
	darkMode: 'class',
    // ...
}

Update Content Settings

Add the following to the content settings. This resolves Skeleton's component styles within your project's node_modules.

const config = {
	// ...
    content: [
        // Keep existing values and append the following:
        require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
    ],
    // ...
}

Add the Skeleton Plugin

Add the Skeleton plugin. This will ensure Tailwind can generate color classes based on your theme. We'll add a theme in the following guide section.

const config = {
    // ...
    plugins: [
        // Keep any existing plugins present and append the following:
        require('@skeletonlabs/skeleton/tailwind/theme.cjs')
    ]
}