bug: nativewind styles are not being applied
ghry5 opened this issue · comments
Provide environment information
System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M1 Pro
Memory: 986.19 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.1 - ~/.local/share/rtx/installs/node/20.11/bin/node
npm: 10.2.4 - ~/.local/share/rtx/installs/node/20.11/bin/npm
pnpm: 8.10.5 - ~/Library/pnpm/pnpm
Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman
Describe the bug
Nativewind styling is not being applied.
Link to reproduction
To reproduce
- git clone https://github.com/t3-oss/create-t3-turbo.git
- cd create-t3-turbo && pnpm i
- pnpm -F expo dev
- hit i for ios or a for android
Additional information
A quick manual search through the most recent commits revealed the breaking commit as 262bacf
Further investigation on the last working commit: 4dc3a40 showed that updating nativewind from ~4.0.23 -> ~4.0.36 seems to be the cause.
Looks like a issue was posted on nativewind repo regarding this at nearly the exact same time as this one.
nativewind/nativewind#836
Indeed this is still an issue, but even 4dc3a40 is not working with nativewind. However I'm using ae2d8e3, albeit with some bugs I had to manually fix, with styles being properly applied. Perhaps going forward the main branch should be reserved for verified, official releases so that we don't have to manually reset to a working commit when bugs occur.
Reverting nativewind back to "nativewind": "4.0.1", seemed to fix it for me.
I think I found a fix.
Upgrade "react-native-css-interop" to "~0.0.34" while using "nativewind":"4.0.36" in the apps/expo/package.json file and things should work correctly.
Struggled for a few hours before I found the fix.
Hope this helps !
@adriangonzy That doesn't seem to work on android (emulator, ubuntu). Reverting to 4.0.1 seems to be the only fix for me.
I tested on expo go and I made sure to clear metro cache.
I get a diffent error,
warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration.
and no styles are being applied.
this is my tailwind config
import type { Config } from "tailwindcss";
// @ts-expect-error - no types
import nativewind from "nativewind/preset";
import baseConfig from "@acme/tailwind-config/native";
export default {
content: ["./src/**/*.{ts,tsx}"],
presets: [baseConfig, nativewind],
} satisfies Config;
Do I need to add something here or change something?
I have no warnings on my side.
Here is my tailwind.config.ts in apps/expo
import type { Config } from "tailwindcss";
// @ts-expect-error - no types
import nativewind from "nativewind/preset";
import baseConfig from "@acme/tailwind-config/native";
export default {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
presets: [baseConfig, nativewind],
} satisfies Config;
@adriangonzy That doesn't seem to work on android (emulator, ubuntu). Reverting to 4.0.1 seems to be the only fix for me.
I tested on android emulator + macos (sonoma 14.4 Apple M1) and it works for me.
@adriangonzy That doesn't seem to work on android (emulator, ubuntu). Reverting to 4.0.1 seems to be the only fix for me.
I tested on android emulator + macos (sonoma 14.4 Apple M1) and it works for me.
Ah, that's actually great to know. Can I ask what your node version is?
Its v20.11.1
Doesn't seem to want to work for me on mac/ios either, I'm not really sure what's going on. Running the tailwind CLI manually works as expected, it just doesn't want to work during the build process. The issue likely lies in my metro.config.js and the path to my config but so far nothing seems to work.
Ok, working version for me seems to be 4.0.14
Literally the bare minimum version for me because this is the version gap-x starts working.
And lo and behold, there seems to be a commit that deals with the tailwind cli between 14 and 15. I tried passing 'npx tailwindcss' and 'yarn tailwindcss' to the cliCommand option in the metro.config, but nothing seems to work for version 4.0.15 and onward.
I think I found a fix. Upgrade
"react-native-css-interop"to"~0.0.34"while using"nativewind":"4.0.36"in the apps/expo/package.json file and things should work correctly. Struggled for a few hours before I found the fix. Hope this helps !
This worked for me.
A recent dependency bump seems to have fixed this for me atleast:
Got 4.0.36 working! The problem was yarn. I got away with using yarn v1 for far too long, but this seems to be the straw that broke the camel's back. Upgrading to yarn v4 seems have fixed everything. nativewind@4.0.36 now working on my intel mac with the iOS simulator, as well as on Ubuntu with android simulator.
Upgraded yarn like this:
> npx npkill
> yarn set version berry
> yarn install