"unknown or invalid utility" for reproducible default utilities

[shayypy]

Hi there, sorry if this is documented somewhere but I couldn't find anything about it. I'm getting console warnings for a few utility classes whose definitions seem to be supported by RN as I was using them previously with nativewind (I switched because this library's syntax was better for my use case). Namely:

• line-clamp-2
• brightness-50
• truncate
• Custom inline class-styles (like max-h-[calc(100%_-_1rem)]), but not [margin-inline:auto] as a standalone entry
• Custom aspectRatio definition in tailwind.config.js (referred to as standard in the warning, but the full usage class is aspect-standard

This is happening for me with & without providing a config file, so I don't think it's something to do with my tailwind config.

Platform: web & tvOS simulator. I'm using Expo, if it's relevant.

Thanks

[jaredh159]

i could be wrong, but i don't think that any of those classes map to RN native style objects. this library is focused on only on RN native, not web. NativeWind tries to cover all the web utilities, so if you had been using NativeWind and you're targeting web, i would expect you to get a decent number of unknown utility warnings.

now, if RN added some utilities to their native style props, then we should definitely add those, they do that from time to time, and we try to keep up when we notice that. but if the utilities would only work in a web environment, we don't add them in this library.

[shayypy]

Actually, it seems you are right. I guess I never noticed the lacking styles on the simulator. I'll have to come up with alternatives to these utilities.

aspectRatio does seem to be supported as style though, so now it seems my issue lies in the loading of the config file.

// tailwind.config.js
console.log("config loaded");
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      aspectRatio: {
        standard: "4 / 3",
      },
    },
  },
  darkMode: "class",
};
// LOG: config loaded

import tw from "@/lib/tailwind";

<Image style={tw`aspect-standard`} ... />
// WARN: `standard` unknown or invalid utility [Component Stack]

import tw from "@/lib/tailwind";

<Image style={tw.style("...", { aspectRatio: "4 / 3" })} ... />
// Renders a 4:3 image

This seems to be a valid extension according to the Tailwind docs, so I'm not sure what I'm doing wrong here.

[jaredh159]

we do support aspect ratio, here's the tests, if that helps. do any of these utilities do the trick for you? you should bea ble to use aspect-4/3 i think to get what you're wanting.

https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/src/__tests__/aspect-ratio.spec.ts#L10

[shayypy]

That does work, thank you. Unfortunately I fear I will experience this again if I need to extend the theme, but seeing as the problems I initially raised in this issue are solved, I'll close this issue. Also, is there documentation for all the supported utilities? Naturally none of these except square and video appear in Intellisense since they don't appear to be stock TW features

[jaredh159]

as far as documentation on supported utilities, we have this:

https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/supported-utilities.md

but i'm not 100% it's been kept all the way up to date, it might be missing something, as i don't think i've been diligent to add to it when we add new ones. i should audit it at some point.

about extending the theme and customizing, if you run into an issue with doing that, let me know, standard customizations and extensions should work, many people use them extensively.