Roots Sage Tailwind Dark mode not working

sage
1

Tailwind Dark mode is not working with my installation

Steps

  1. composer create-project roots/sage

  2. Chose Tailwind as the framework

  3. yarn build gave me this error

Module build failed: ModuleBuildError: Module build failed: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.

Executed “yarn add autoprefixer@^9.8.6 -D” & “yarn add postcss-loader@~3.0.0 -D”

based on this - https://github.com/roots/sage/issues/2580

  1. In my tailwind.config.js enabled darkMode media

module.exports = {
darkMode: ‘media’,
theme: {
colors: {
primary: ‘#525ddc’,
white: ‘#fff’,
gray: {
100: ‘#f7fafc’,
200: ‘#edf2f7’,
300: ‘#e2e8f0’,
400: ‘#cbd5e0’,
500: ‘#a0aec0’,
600: ‘#718096’,
700: ‘#4a5568’,
800: ‘#2d3748’,
900: ‘#1a202c’,
},
transparent: ‘transparent’,
},
shadows: {
outline: ‘0 0 0 3px rgba(82,93,220,0.3)’,
},
container: {
center: true,
padding: ‘1rem’,
},
},
variants: {
// Define variants
},
plugins: [
globalStyles,
],
}

In my header.blade.php I added the class

<header class="banner bg-primary  dark:bg-gray-300">
  <div class="container">
    <a class="brand" href="{{ home_url('/') }}">{{ get_bloginfo('name', 'display') }}</a>
    <nav class="nav-primary">
      @if (has_nav_menu('primary_navigation'))
        {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']) !!}
      @endif
    </nav>
  </div>
</header>

I see the bg-primary is showing up. but not the dark mode.

In my mac appearance is set to dark, still no luck. Not sure what is missing. Appreciate your help.

This is my node version 12.18.3

2

This topic was automatically closed after 42 days. New replies are no longer allowed.