Tailwind CSS

Configure Tailwind

The following settings must be applied to your tailwind.config.cjs. This file 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: [
		// NOTE: keep this line:
		'./src/**/*.{html,js,svelte,ts}',
		// Append the following for Skeleton:
		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 the appropriate color and design token classes for your project.

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