Tailwind utility classes not available with nx/next

[donna-marijne]

Current Behavior

Some of the Tailwind utility classes seem to be unavailable when using the Nx integration with Next.js.

https://nx.dev/recipes/react/using-tailwind-css-in-react#using-tailwind-css-in-react-and-nextjs

Expected Behavior

For example, min-h-80 should apply a min-height of 20rem per Tailwind docs.

GitHub Repo

https://github.com/donna-marijne/tailwind-next

Steps to Reproduce

1. nx dev tailwind-next
2. Observe the height of the indigo element

We expect min-height: 20rem to be applied due to addition of the min-h-80 class.

Nx Report

Node   : 18.19.1
OS     : win32-x64
npm    : 10.4.0

nx (global)        : 18.0.7
nx                 : 18.3.2
@nx/js             : 18.3.2
@nx/jest           : 18.3.2
@nx/linter         : 18.3.2
@nx/eslint         : 18.3.2
@nx/workspace      : 18.3.2
@nx/devkit         : 18.3.2
@nx/eslint-plugin  : 18.3.2
@nx/next           : 18.3.2
@nx/react          : 18.3.2
@nrwl/tao          : 18.3.2
@nx/web            : 18.3.2
@nx/webpack        : 18.3.2
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/next/plugin
@nx/jest/plugin
@nx/eslint/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

I checked the same utility class in a standalone Next.js+Tailwind app and it works as expected.

[donna-marijne]

Seems that Nx deploys an older version of tailwindcss than Next does, and the min-h-* utilities were added surprisingly recently in tailwind. So, only a dependency issue after all.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.