🏠

Tailwind CSS Concept Explained

Organizing Your Styles & Customizing

Create a "Dark Mode" version of your site.

Skill ID: OrganizingStyles_47

Description: Offer an alternative color scheme with dark backgrounds and light text.

Where to apply: The entire website.

Key Tailwind Classes:

dark:bg-gray-800 dark:text-white

Gotcha: Forgetting to configure darkMode: 'class' (or 'media' ) in your tailwind.config.js file. Without this setting, the dark: variants won't do anything. If using darkMode: 'class' , you also need JavaScript to add/remove the "dark" class to your <html> element.

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

🏠