After using npx gluestack-ui init, files such as metro.config.js and tailwind.config.js are generated, and the nativewind plugin is introduced into the project. This plugin plays a crucial role in using Tailwind CSS within an Expo project. In my most recent use of npx gluestack-ui init to introduce the gluestack-ui with the nativewind version ^4.0.36, the metro.config.js file was empty. However, the v4 version of nativewind requires the following code to be added to the metro.config.js file for it to take effect:
const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
const config = getDefaultConfig(__dirname);
module.exports = withNativeWind(config, { input: './global.css' });
Without this code, Tailwind CSS will not function at all.
Reference link:
https://www.nativewind.dev/v4/getting-started/expo-router