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

[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.

[wongjn]

You seem to have a mix of Tailwind v3 and v4:

"devDependencies": {
  "@tailwindcss/cli": "^4.1.11",
  …
  "tailwindcss": "^3.4.3"
},

If you are intending to use v4, then you'd want to look at using CSS-based configuration rather than the legacy JavaScript configuration format:

• Dark mode
• Font families
• Colors
• Legacy JavaScript plugins

[askeijaz]

The reason why v3 is showing is because I had to finally downgrade to v3, when all possible solutions did not work. After posting i had removed the v4 line from my package.json file.

[themeix]

I am facing a similar type of problem on Next.js. From v3 to v4 tailwind.config.js not producing CSS classes.

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.