Tailwind CSS

Configure Tailwind

Let's modify a few settings in tailwind.config.cjs. This is usually located in the root of your project directory.

Enabled Dark Mode Support

Append darkMode: class to support Tailwind's 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 will ensure the Tailwind compiler can locate utility classes for Skeleton features within node_modules.

const config = {
	// ...
    content: [
        // Keep existing values and append the following:
        require('path').join(require.resolve('@brainandbones/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 setup our theme in the following step.

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