`SafeArea` Missing className

[chanphiromsok]

export interface EdgeInsets {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

expected avaiable className top-safe bottom-safe left-safe right-safe
https://docs.uniwind.dev/faq#how-do-i-enable-safe-area-classnames

[github-actions]

This issue has been automatically closed because it lacks a clear, minimal reproduction that we can use to verify the reported bug.

[Brentlok]

We don't have top-safe, left-safe etc. built in. All available safe area classNames are stated in the docs

[chanphiromsok]

We don't have top-safe, left-safe etc. built in. All available safe area classNames are stated in the docs

I’ve migrated from NativeWind, and none of these classes are available. In my use case, I need to combine absolute with bottom or top

[Brentlok]

I don't see this class mentioned there https://www.nativewind.dev/docs/tailwind/new-concepts/safe-area-insets. Could you point us to documentation about it?

[Brentlok]

So it looks like nativewind is simply using this package as a dependency: https://github.com/mvllow/tailwindcss-safe-area

We will add top-, left-, right-, bottom- and inset- classes to the uniwind core.
Btw you can always add your own custom utilities, we're not doing any magic for safe-area under the hood. Something like that added in your css file will work:

@utility top-safe {
    top: env(safe-area-inset-top);
}

[chanphiromsok]

So it looks like nativewind is simply using this package as a dependency: https://github.com/mvllow/tailwindcss-safe-area

We will add top-, left-, right-, bottom- and inset- classes to the uniwind core. Btw you can always add your own custom utilities, we're not doing any magic for safe-area under the hood. Something like that added in your css file will work:

@Utility top-safe {
top: env(safe-area-inset-top);
}

thanks hubert