Skip to content

darkMode: 'class' not respected in Tailwind CSS v4 CLI with Hugo (class-based dark utilities not generated) #18547

@SIFAR786

Description

@SIFAR786

What version of Tailwind CSS are you using?
Tailwind CSS v4.1.11

What build tool (or framework if it abstracts the build tool) are you using?
postcss 11.0.1, hugo v0.148.1+extended+withdeploy darwin/arm64 BuildDate=2025-07-11T12:56:21Z VendorInfo=brew

What version of Node.js are you using?
Node v23.5.0

What browser are you using?
Chrome

What operating system are you using?
macOS

Reproduction URL

A Tailwind Play link or public GitHub repo that includes a minimal reproduction of the bug. Please do not link to your actual project, what we need instead is a minimal reproduction in a fresh project without any unnecessary code. This means it doesn't matter if your real project is private/confidential, since we want a link to a separate, isolated reproduction anyways.

A reproduction is required when filing an issue — any issue opened without a reproduction will be closed and you'll be asked to create a new issue that includes a reproduction. We're a small team and we can't keep up with the volume of issues we receive if we need to reproduce each issue from scratch ourselves.

Describe your issue
When using Tailwind CSS v4.1.11 with a Hugo static site and the following config:

module.exports = {
  darkMode: 'class',
  content: [
    './layouts/**/*.html',
    './content/**/*.md'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'Montserrat', 'sans-serif']
      },
      colors: {
        primary: '#1e3a8a',
        accent: '#38bdf8',
        bgLight: '#f8fafc',
        bgDark: '#181825'
      }
    }
  },
  plugins: [require('@tailwindcss/typography')],
}

and running the CLI with:

"tailwind": "tailwindcss -i ./assets/css/tailwind.css --config ./tailwind.config.js --content './layouts/**/*.html,./content/**/*.md' --minify -o static/css/output.css"

so i initially created this workaround script in package.json, that worked in generating all the styles in output.css and being applied to site (except dark mode was still not working). I think it was still not reading darkMode setting from tailwind.config.js.

"tailwind": "tailwindcss -i ./assets/css/tailwind.css --config $PWD/tailwind.config.js --content './layouts/**/*.html,./content/**/*.md' --minify > static/css/output.css"

Expected:
Class-based dark mode utilities (e.g., .dark:bg-gray-800) are generated, and toggling the dark class on enables dark mode.

Actual:
Only media-query-based dark utilities are generated (inside @media (prefers-color-scheme: dark) { ... }).
Toggling the dark class has no effect.
Downgrading to Tailwind v3 (e.g., 3.4.3) with the same config and CLI command works perfectly and generates class-based dark utilities.

Steps to Reproduce:
Use the config and CLI command above in a Hugo project.
Inspect the generated CSS for .dark:bg-gray-800 or similar class-based selectors.
Observe that only media-query-based dark utilities are present.

Environment:

  • Tailwind CSS v4.1.11
  • Node.js v23.5.0
  • macOS
  • Hugo v0.148.1

Repo/Minimal (package.json):

{
  "name": "modern",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "tailwind": "tailwindcss -i ./assets/css/tailwind.css --config $PWD/tailwind.config.js --content './layouts/**/*.html,./content/**/*.md' --minify -o static/css/output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@tailwindcss/cli": "^4.1.11",
    "@tailwindcss/typography": "^0.5.9",
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.6",
    "tailwindcss": "^3.4.3"
  },
  "dependencies": {
    "browserslist": "^4.25.1",
    "caniuse-lite": "^1.0.30001727",
    "electron-to-chromium": "^1.5.182",
    "escalade": "^3.2.0",
    "fraction.js": "^4.3.7",
    "nanoid": "^3.3.11",
    "node-releases": "^2.0.19",
    "normalize-range": "^0.1.2",
    "picocolors": "^1.1.1",
    "postcss-value-parser": "^4.2.0",
    "source-map-js": "^1.2.1",
    "update-browserslist-db": "^1.1.3"
  },
  "description": ""
}

Notes:
Using the -o flag, absolute config path, and all recommended CLI options does not resolve the issue.
This breaks all class-based dark mode toggling for Hugo and similar static site generators.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions