How to Disable Dark Mode in TailwindCSS

Dark mode is a popular feature in TailwindCSS, but there are scenarios where you may want to enforce light mode across your site regardless of the user's system preferences. This guide will walk you through the steps to disable dark mode in TailwindCSS.

Why Disable Dark Mode?

Some UI libraries or packages (e.g., laravel-livewire-tables) automatically apply dark mode classes, which may conflict with your desired design. If your application strictly requires light mode, disabling dark mode in TailwindCSS can ensure consistency.

Step-by-Step Guide to Disable Dark Mode

1. Configure `tailwind.config.js`

The tailwind.config.js file is where you define the dark mode behavior for your project. By default, TailwindCSS uses the media strategy, which respects the user's system settings for dark or light mode.

To disable dark mode entirely, set the darkMode property to false:

// tailwind.config.js
module.exports = {
  darkMode: false, // Completely disables dark mode
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

This ensures that TailwindCSS ignores any dark mode-specific classes.

2. Force Light Mode via HTML

If you are using a library that automatically applies dark mode (e.g., daisyUI or laravel-livewire-tables), you may need to force light mode globally. Add the following snippet to your <html> tag:

<html data-theme="light"></html>

This explicitly sets the theme to light mode, overriding any automatic dark mode settings.

3. Use the `class` Strategy with Light Mode Override

An alternative approach is to use the class strategy for dark mode and enforce light mode by setting a default theme in JavaScript.

Update your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then, add the following script to your HTML header:

<script>
  localStorage.theme = 'light'
</script>

This ensures that the light mode class is applied, overriding any browser or system-level preferences.

4. Enforce Light Mode with CSS

For a CSS-only solution, use the color-scheme property to force light mode:

@layer base {
  html {
    color-scheme: light !important;
  }
}

Add this to your global CSS file (index.css). This will make browsers render the site in light mode regardless of user settings.

FAQ

1. Why is dark mode still applied after disabling it in `tailwind.config.js`?

Some UI kits or libraries may use their own dark mode logic. Ensure you override their behavior using the data-theme="light" attribute or JavaScript.

2. Can I completely remove dark mode classes from TailwindCSS?

While you can disable dark mode functionality with darkMode: false, any dark mode classes in your code (e.g., dark:bg-gray-900) will still exist but won’t have any effect.

3. Will this affect TailwindCSS performance?

Disabling dark mode can slightly improve performance as Tailwind generates fewer classes, but the difference is minimal.

4. What if a third-party library like `daisyUI` applies dark mode?

Use data-theme="light" or force light mode using JavaScript to override library defaults.