Issue with Dark Mode Styles After Upgrading to Tailwind CSS v3.4.0

[mdwekat]

Upon upgrading to Tailwind CSS v3.4.0 in a NativeWind project, there is a noticeable issue where the dark mode style modifiers fail to function. This problem specifically occurs with the new version of Tailwind CSS, impacting the application of conditional dark mode styles.

To Reproduce
Steps to reproduce the behavior:

1. Set up a NativeWind project with nativewind version 4.0.16.
2. Upgrade Tailwind CSS to version 3.4.0.
3. Configure dark mode in the application to apply styles using the class method.
4. Implement a component with distinct styles for dark mode. Example code:

   return function Test() {
     return (
       <View className="bg-red-500 dark:bg-blue-500">
         <Text>Hello!</Text>
       </View>
     );
   } 

Expected behavior
The component should display a blue background (dark:bg-blue-500) in dark mode.

Actual Behavior
The component maintains the red background (bg-red-500) irrespective of dark mode activation, indicating a failure in applying the dark mode-specific styles.

Additional context
This styling issue was not present before updating to Tailwind CSS v3.4.0.

[marklawlor]

Please provide a full reproduction. This could be caused by a number of reasons and there is not enough information here for me to provide you an explanation.

[mdwekat]

Maybe this has something to do with it
PR #12584

Update:
Somehow setting the darkMode to media in my tailwind.config.js fixed the issue.

/// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'media',
  // ...
}

Update 2:
Here is a minimal RN app that shows the issue
https://github.com/mdwekat/nw-tw-3-4

Notes:

• when setting the darkMode from media to class you need to rebuild the app and open it again.
• Tested on ios only.

[mdwekat]

After upgrading tailwindcss to v3.4.1 the issue has been resolved I think they rolled back to the old behavior of applying the dark mode (#12717)