fix: minor NativeWindStyleSheet fixes

src/style-sheet/index.ts

@@ -11,7 +11,7 @@ export const NativeWindStyleSheet = {
   setDimensions: runtime.setDimensions.bind(runtime),
   setAppearance: runtime.setAppearance.bind(runtime),
   setPlatform: runtime.setPlatform.bind(runtime),
-  setPreprocessed: runtime.setPreprocessed.bind(runtime),
+  setCSS: runtime.setPreprocessed.bind(runtime),
   setDangerouslyCompileStyles:
     runtime.setDangerouslyCompileStyles.bind(runtime),
 };

src/style-sheet/runtime.ts

@@ -123,13 +123,13 @@ export class StyleSheetRuntime extends ColorSchemeStore {
 
   setDimensions(dimensions: Dimensions) {
     this.window = dimensions.get("window");
-    const screen = dimensions.get("screen");
-    this.orientation = screen.height >= screen.width ? "portrait" : "landscape";
+    this.orientation =
+      this.window.height >= this.window.width ? "portrait" : "landscape";
 
     this.dimensionListener?.remove();
     this.dimensionListener = dimensions.addEventListener(
       "change",
-      ({ window, screen }) => {
+      ({ window }) => {
         const topics: string[] = ["window"];
 
         if (window.width !== this.window.width) topics.push("width");
@@ -138,7 +138,7 @@ export class StyleSheetRuntime extends ColorSchemeStore {
         this.window = window;
 
         const orientation =
-          screen.height >= screen.width ? "portrait" : "landscape";
+          window.height >= window.width ? "portrait" : "landscape";
         if (orientation !== this.orientation) topics.push("orientation");
         this.orientation = orientation;
 

website/docs/api/native-wind-style-sheet.md

@@ -0,0 +1,21 @@
+# NativeWindStyleSheet
+
+A StyleSheet is an abstraction similar to CSS StyleSheets and React Native's StyleSheet.
+
+## Methods
+
+### setPlatform(platform: Platform.OS)
+
+Override the platform used by the platform prefixes. Defaults to Platform.OS
+
+### setCss(boolean)
+
+Override if the StyleSheet should use setCss or native styles. Defaults to `true` if Platform.OS === `web` && React Native Web >0.18.
+
+### setDimensions(dimensions: Dimensions)
+
+Override how window dimensions are calculated. Defaults to Dimensions from React Native.
+
+### setAppearance(appearance: Appearance)
+
+Override the app's appearance. Defaults to Appearance from React Native.

website/docs/api/tailwind-provider.md

@@ -1,29 +0,0 @@
----
-title: TailwindProvider
-sidebar_label: <TailwindProvider />
----
-
-All components need to be within the context of the TailwindProvider.
-
-```tsx
-import { TailwindProvider } from "tailwindcss-react-native";
-
-function MyAppsProviders({ children }) {
-  return <TailwindProvider>{children}</TailwindProvider>;
-}
-```
-
-## Options
-
-| Prop               | Values            | Default                                   | Description                           |
-| ------------------ | ----------------- | ----------------------------------------- | ------------------------------------- |
-| initialColorScheme | `ColorSchemeName` | `Appearance.getColorScheme() ?? 'light'`  | Set an ColorScheme value.             |
-| webOutput          | `css`, `native`   | `ReactNativeWeb >=0.8 ? 'css' : 'native'` | Specify how web styles are outputted. |
-
-## Advanced options
-
-| Prop     | Values                   | Default     | Description                                                 |
-| -------- | ------------------------ | ----------- | ----------------------------------------------------------- |
-| platform | Override the Platform.OS | Platform.OS | Used to match platform media queries                        |
-| style    | Compiled style object    | `undefined` | For manual injection via the [CLI](../guides/cli-native.md) |
-| media    | Compiled media object    | `undefined` | For manual injection via the [CLI](../guides/cli-native.md) |

website/docs/guides/tailwindcss-react-native.md

@@ -10,7 +10,7 @@ The TailwindProvider is no longer required, unless you wish to inject styles or
 
 Nativewind defaults to CSS for web if using React Native Web >=0.18
 
-You can control this setting via the `webOutput` option on `TailwindProvider`.
+You can control this setting via the `NativeWindStyleSheet.setPreprocessed(false)`
 
 ## useTailwind()
 

website/sidebars.js

@@ -69,8 +69,8 @@ const sidebars = {
       items: [
         "api/styled",
         "api/StyledComponent",
-        "api/tailwind-provider",
         "api/use-color-scheme",
+        "api/native-wind-style-sheet",
         "api/use-tailwind",
       ],
     },