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.

module.exports = {
	darkMode: 'class',
    // ...
}

Update Content Settings

Add the following to the content settings. This ensures the Tailwind compiler sees utility classes for components within node_modules.

module.exports = {
	// ...
    content: [
        // Keep any existing values present and append the following:
        "./node_modules/@brainandbones/skeleton/**/*.{html,js,svelte,ts}"
    ],
    // ...
}

Add the Skeleton Plugin

Add the Skeleton plugin. This will automatically ingest and utilize the CSS variables defined in your theme. We'll setup the theme in the next step.

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