docs

apps/website/docs/customization/colors.md

@@ -6,31 +6,25 @@ You can customize your colors in the same manner as Tailwind CSS. Please refer t
 
 Unlike the web, which uses a common color palette, native platforms have their own unique system colors which as access through [PlatformColor](https://reactnative.dev/docs/platformcolor)
 
-NativeWind allows you to use access PlatformColor via the special `platformColor()` syntax in your theme.
+NativeWind allows you to use access PlatformColor via the `platformColor()` utility.
 
 ```js
 // tailwind.config.js
 
-const { platformSelect } = require("nativewind");
+const { platformSelect, platformColor } = require("nativewind/theme");
 
 module.exports = {
   theme: {
     extend: {
       colors: {
         error: platformSelect({
           // Now you can provide platform specific values
-          ios: "platformColor(systemRed)",
-          android: "platformColor(?android:colorError)",
+          ios: platformColor("systemRed"),
+          android: platformColor("?android:colorError"),
           default: "red",
         }),
       },
     },
   },
 };
 ```
-
-:::note
-
-There are no quotes between the brackets in `platformColor(systemRed)`
-
-:::

apps/website/docs/tailwind/flexbox/flex-basis.mdx

@@ -0,0 +1,17 @@
+import Compatibility from "../\_compatibility.mdx"
+import Usage from "../\_usage.mdx"
+
+# Flex Basis
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility
+supported={[ "basis-{n}", "basis-[n]" ]}
+none={[
+"basis-auto",
+]}
+/>

apps/website/docs/tailwind/flexbox/flex-direction.mdx

@@ -0,0 +1,23 @@
+import Compatibility from "../\_compatibility.mdx"
+import Usage from "../\_usage.mdx"
+
+# Flex Direction
+
+## Usage
+
+<Usage />
+
+:::tip
+React Native has a different default flex direction to web. We highly recommend explicting setting the Flex Direction on your components.
+:::
+
+## Compatibility
+
+<Compatibility
+supported={[
+"flex-row",
+"flex-row-reverse",
+"flex-col",
+"flex-col-reverse",
+]}
+/>

apps/website/docs/tailwind/flexbox/flex-grow.mdx

@@ -0,0 +1,17 @@
+import Compatibility from "../\_compatibility.mdx"
+import Usage from "../\_usage.mdx"
+
+# Flex Grow
+
+## Usage
+
+<Usage />
+
+## Compatibility
+
+<Compatibility
+supported={[
+"grow",
+"grow-0",
+]}
+/>