docs: fix internal links to use absolute paths

mgcrea · mgcrea · commit 3477f08eaa55 · 2025-11-25T00:24:29.000+01:00
diff --git a/docs/src/content/docs/advanced/arbitrary-values.md b/docs/src/content/docs/advanced/arbitrary-values.md
@@ -183,7 +183,7 @@ CSS units not available in React Native:
 
 ## Related
 
-- [Spacing](../reference/spacing/) - Preset spacing values
-- [Sizing](../reference/sizing/) - Preset sizing values
-- [Borders](../reference/borders/) - Preset border values
-- [Transforms](../reference/transforms/) - Preset transform values
+- [Spacing](/reference/spacing/) - Preset spacing values
+- [Sizing](/reference/sizing/) - Preset sizing values
+- [Borders](/reference/borders/) - Preset border values
+- [Transforms](/reference/transforms/) - Preset transform values
diff --git a/docs/src/content/docs/advanced/babel-configuration.md b/docs/src/content/docs/advanced/babel-configuration.md
@@ -81,7 +81,7 @@ Configure which props to transform.
 }
 ```
 
-See [Custom Attributes](./custom-attributes/) for more details.
+See [Custom Attributes](/advanced/custom-attributes/) for more details.
 
 ### `stylesIdentifier`
 
@@ -107,7 +107,7 @@ Customize the StyleSheet constant name.
 }
 ```
 
-See [Custom Styles Identifier](./custom-styles-identifier/) for more details.
+See [Custom Styles Identifier](/advanced/custom-styles-identifier/) for more details.
 
 ### `colorScheme`
 
@@ -145,7 +145,7 @@ Configure custom color scheme hook.
 }
 ```
 
-See [Custom Color Scheme Hook](./custom-color-scheme-hook/) for more details.
+See [Custom Color Scheme Hook](/advanced/custom-color-scheme-hook/) for more details.
 
 ### `schemeModifier`
 
@@ -183,7 +183,7 @@ Configure `scheme:` modifier color suffixes.
 }
 ```
 
-See [Color Scheme - Scheme Modifier](../guides/color-scheme/#scheme-modifier-convenience) for more details.
+See [Color Scheme - Scheme Modifier](/guides/color-scheme/#scheme-modifier-convenience) for more details.
 
 ## Complete Example
 
@@ -255,8 +255,8 @@ npx react-native start --reset-cache
 
 ## Related
 
-- [Custom Attributes](./custom-attributes/)
-- [Custom Styles Identifier](./custom-styles-identifier/)
-- [Custom Color Scheme Hook](./custom-color-scheme-hook/)
-- [Custom Colors](./custom-colors/)
-- [Troubleshooting](./troubleshooting/)
+- [Custom Attributes](/advanced/custom-attributes/)
+- [Custom Styles Identifier](/advanced/custom-styles-identifier/)
+- [Custom Color Scheme Hook](/advanced/custom-color-scheme-hook/)
+- [Custom Colors](/advanced/custom-colors/)
+- [Troubleshooting](/advanced/troubleshooting/)
diff --git a/docs/src/content/docs/advanced/custom-attributes.md b/docs/src/content/docs/advanced/custom-attributes.md
@@ -175,6 +175,6 @@ export function Button({
 
 ## Related
 
-- [Babel Configuration](./babel-configuration/) - All plugin options
-- [Reusable Components](../guides/reusable-components/) - Building component libraries
-- [List Components](../guides/list-components/) - Styling lists
+- [Babel Configuration](/advanced/babel-configuration/) - All plugin options
+- [Reusable Components](/guides/reusable-components/) - Building component libraries
+- [List Components](/guides/list-components/) - Styling lists
diff --git a/docs/src/content/docs/advanced/custom-color-scheme-hook.md b/docs/src/content/docs/advanced/custom-color-scheme-hook.md
@@ -210,6 +210,6 @@ function MyComponent() {
 
 ## Related
 
-- [Color Scheme](../guides/color-scheme/) - Using color scheme modifiers
-- [Babel Configuration](./babel-configuration/) - All plugin options
-- [Custom Colors](./custom-colors/) - Extend color palette
+- [Color Scheme](/guides/color-scheme/) - Using color scheme modifiers
+- [Babel Configuration](/advanced/babel-configuration/) - All plugin options
+- [Custom Colors](/advanced/custom-colors/) - Extend color palette
diff --git a/docs/src/content/docs/advanced/custom-colors.md b/docs/src/content/docs/advanced/custom-colors.md
@@ -219,6 +219,6 @@ If you see warnings about missing colors:
 
 ## Related
 
-- [Colors Reference](../reference/colors/) - Color utilities
-- [Color Scheme](../guides/color-scheme/) - Dark mode support
-- [Troubleshooting](./troubleshooting/) - Common issues
+- [Colors Reference](/reference/colors/) - Color utilities
+- [Color Scheme](/guides/color-scheme/) - Dark mode support
+- [Troubleshooting](/advanced/troubleshooting/) - Common issues
diff --git a/docs/src/content/docs/advanced/custom-styles-identifier.md b/docs/src/content/docs/advanced/custom-styles-identifier.md
@@ -99,5 +99,5 @@ Align with your team's coding standards:
 
 ## Related
 
-- [Babel Configuration](./babel-configuration/) - All plugin options
-- [Custom Attributes](./custom-attributes/) - Configure attribute transforms
+- [Babel Configuration](/advanced/babel-configuration/) - All plugin options
+- [Custom Attributes](/advanced/custom-attributes/) - Configure attribute transforms
diff --git a/docs/src/content/docs/advanced/troubleshooting.md b/docs/src/content/docs/advanced/troubleshooting.md
@@ -279,6 +279,6 @@ If you can't resolve your issue:
 
 ## Related
 
-- [Babel Configuration](./babel-configuration/) - Plugin options
-- [Custom Colors](./custom-colors/) - Theme configuration
-- [Quick Start](../getting-started/quick-start/) - Setup guide
+- [Babel Configuration](/advanced/babel-configuration/) - Plugin options
+- [Custom Colors](/advanced/custom-colors/) - Theme configuration
+- [Quick Start](/getting-started/quick-start/) - Setup guide
diff --git a/docs/src/content/docs/getting-started/how-it-works.md b/docs/src/content/docs/getting-started/how-it-works.md
@@ -88,7 +88,7 @@ The plugin automatically converts className-style props to their style equivalen
 | `ListHeaderComponentClassName` | `ListHeaderComponentStyle` |
 | `ListFooterComponentClassName` | `ListFooterComponentStyle` |
 
-You can configure custom attributes in the [Babel configuration](../advanced/babel-configuration/).
+You can configure custom attributes in the [Babel configuration](/advanced/babel-configuration/).
 
 ### 4. Import Management
 
@@ -142,6 +142,6 @@ Generates code that uses React Native's best practices:
 
 ## What's Next?
 
-- Explore [Basic Usage](../guides/basic-usage/) examples
-- Learn about [Dynamic ClassNames](../guides/dynamic-classnames/)
-- Understand [State Modifiers](../guides/state-modifiers/)
+- Explore [Basic Usage](/guides/basic-usage/) examples
+- Learn about [Dynamic ClassNames](/guides/dynamic-classnames/)
+- Understand [State Modifiers](/guides/state-modifiers/)
diff --git a/docs/src/content/docs/getting-started/installation.md b/docs/src/content/docs/getting-started/installation.md
@@ -25,4 +25,4 @@ pnpm add @mgcrea/react-native-tailwind
 
 ## Next Steps
 
-After installing the package, proceed to the [Quick Start](./quick-start/) guide to configure the Babel plugin and start using className in your components.
+After installing the package, proceed to the [Quick Start](/getting-started/quick-start/) guide to configure the Babel plugin and start using className in your components.
diff --git a/docs/src/content/docs/getting-started/quick-start.md b/docs/src/content/docs/getting-started/quick-start.md
@@ -58,6 +58,6 @@ npx react-native start --reset-cache
 
 ## What's Next?
 
-- Learn [How It Works](./how-it-works/) to understand the compile-time transformation
-- Explore [Basic Usage](../guides/basic-usage/) examples
-- Check out the [API Reference](../reference/spacing/) for available utilities
+- Learn [How It Works](/getting-started/how-it-works/) to understand the compile-time transformation
+- Explore [Basic Usage](/guides/basic-usage/) examples
+- Check out the [API Reference](/reference/spacing/) for available utilities
diff --git a/docs/src/content/docs/guides/basic-usage.md b/docs/src/content/docs/guides/basic-usage.md
@@ -108,6 +108,6 @@ The Babel plugin will merge them automatically:
 
 ## What's Next?
 
-- Learn about [Dynamic ClassNames](./dynamic-classnames/) for conditional styling
-- Explore [State Modifiers](./state-modifiers/) for interactive components
-- Check out the [Spacing Reference](../reference/spacing/) for available utilities
+- Learn about [Dynamic ClassNames](/guides/dynamic-classnames/) for conditional styling
+- Explore [State Modifiers](/guides/state-modifiers/) for interactive components
+- Check out the [Spacing Reference](/reference/spacing/) for available utilities
diff --git a/docs/src/content/docs/guides/color-scheme.md b/docs/src/content/docs/guides/color-scheme.md
@@ -262,6 +262,6 @@ export function ThemedApp() {
 
 ## What's Next?
 
-- Learn about [Custom Color Scheme Hook](../advanced/custom-color-scheme-hook/) to use theme providers
-- Explore [Custom Colors](../advanced/custom-colors/) for theme customization
-- Check out [Platform Modifiers](./platform-modifiers/) for platform-specific styling
+- Learn about [Custom Color Scheme Hook](/advanced/custom-color-scheme-hook/) to use theme providers
+- Explore [Custom Colors](/advanced/custom-colors/) for theme customization
+- Check out [Platform Modifiers](/guides/platform-modifiers/) for platform-specific styling
diff --git a/docs/src/content/docs/guides/compile-time-tw.md b/docs/src/content/docs/guides/compile-time-tw.md
@@ -268,6 +268,6 @@ export function StyledApp() {
 
 ## What's Next?
 
-- Learn about [Runtime tw](./runtime-tw/) for fully dynamic styling
-- Explore [State Modifiers](./state-modifiers/) for interactive components
-- Check out [Color Scheme](./color-scheme/) for dark mode support
+- Learn about [Runtime tw](/guides/runtime-tw/) for fully dynamic styling
+- Explore [State Modifiers](/guides/state-modifiers/) for interactive components
+- Check out [Color Scheme](/guides/color-scheme/) for dark mode support
diff --git a/docs/src/content/docs/guides/dynamic-classnames.md b/docs/src/content/docs/guides/dynamic-classnames.md
@@ -155,6 +155,6 @@ export function StatusCard({ status }) {
 
 ## What's Next?
 
-- Learn about [State Modifiers](./state-modifiers/) for cleaner interactive styling
-- Explore [Runtime tw](./runtime-tw/) for fully dynamic styling needs
-- Check out [Combining with Inline Styles](./basic-usage/#combining-with-inline-styles)
+- Learn about [State Modifiers](/guides/state-modifiers/) for cleaner interactive styling
+- Explore [Runtime tw](/guides/runtime-tw/) for fully dynamic styling needs
+- Check out [Combining with Inline Styles](/guides/basic-usage/#combining-with-inline-styles)
diff --git a/docs/src/content/docs/guides/list-components.md b/docs/src/content/docs/guides/list-components.md
@@ -201,7 +201,7 @@ export function CompleteList({ items }) {
 
 ## Custom Attributes
 
-You can configure additional custom attributes using the [Babel configuration](../advanced/babel-configuration/). For example, to support `ListEmptyComponentClassName`:
+You can configure additional custom attributes using the [Babel configuration](/advanced/babel-configuration/). For example, to support `ListEmptyComponentClassName`:
 
 ```javascript
 // babel.config.js
@@ -231,6 +231,6 @@ Then use it:
 
 ## What's Next?
 
-- Learn about [Custom Attributes](../advanced/custom-attributes/) for more control
-- Explore [Babel Configuration](../advanced/babel-configuration/) for plugin options
-- Check out [Reusable Components](./reusable-components/) for building component libraries
+- Learn about [Custom Attributes](/advanced/custom-attributes/) for more control
+- Explore [Babel Configuration](/advanced/babel-configuration/) for plugin options
+- Check out [Reusable Components](/guides/reusable-components/) for building component libraries
diff --git a/docs/src/content/docs/guides/platform-modifiers.md b/docs/src/content/docs/guides/platform-modifiers.md
@@ -170,6 +170,6 @@ export function PlatformCard({ title, description, imageUrl, onPress }) {
 
 ## What's Next?
 
-- Learn about [Color Scheme](./color-scheme/) for dark mode support
-- Explore [State Modifiers](./state-modifiers/) for interactive components
-- Check out [Custom Colors](../advanced/custom-colors/) for theme customization
+- Learn about [Color Scheme](/guides/color-scheme/) for dark mode support
+- Explore [State Modifiers](/guides/state-modifiers/) for interactive components
+- Check out [Custom Colors](/advanced/custom-colors/) for theme customization
diff --git a/docs/src/content/docs/guides/reusable-components.md b/docs/src/content/docs/guides/reusable-components.md
@@ -330,6 +330,6 @@ type CardProps = BaseProps & {
 
 ## What's Next?
 
-- Learn about [Custom Attributes](../advanced/custom-attributes/) for more control
-- Explore [Babel Configuration](../advanced/babel-configuration/) for plugin options
-- Check out [TypeScript setup](../getting-started/quick-start/#2-enable-typescript-support-typescript) for type safety
+- Learn about [Custom Attributes](/advanced/custom-attributes/) for more control
+- Explore [Babel Configuration](/advanced/babel-configuration/) for plugin options
+- Check out [TypeScript setup](/getting-started/quick-start/#2-enable-typescript-support-typescript) for type safety
diff --git a/docs/src/content/docs/guides/runtime-tw.md b/docs/src/content/docs/guides/runtime-tw.md
@@ -24,18 +24,16 @@ import { View, Text, Pressable } from "react-native";
 import { tw } from "@mgcrea/react-native-tailwind/runtime";
 import { useState } from "react";
 
-export function RuntimeExample() {
+export function RuntimeExample({ color }) {
   const [isActive, setIsActive] = useState(false);
 
   return (
-    <View style={tw`flex-1 p-4 bg-gray-100`}>
+    <View className="flex-1 p-4 bg-gray-100">
       <Pressable
         onPress={() => setIsActive(!isActive)}
-        style={tw`p-4 rounded-lg ${isActive ? "bg-green-500" : "bg-red-500"}`}
+        className={`p-4 rounded-lg ${isActive ? "bg-green-500" : "bg-red-500"}`}
       >
-        <Text style={tw`text-white font-bold text-center`}>
-          {isActive ? "Active" : "Inactive"}
-        </Text>
+        <Text style={tw`text-${color}-500 font-bold text-center`}>{isActive ? "Active" : "Inactive"}</Text>
       </Pressable>
     </View>
   );
@@ -157,13 +155,13 @@ const styles2 = tw`p-4 bg-blue-500`;
 
 ## Runtime vs Compile-Time
 
-| Feature | Compile-Time (`className`) | Runtime (`tw` tag) |
-|---------|---------------------------|-------------------|
-| Bundle Size | Only used styles (~4KB typical) | Full parser (~25KB) |
-| Performance | Zero overhead (pre-compiled) | Fast (memoized parsing) |
-| Dynamic Values | Conditional only | Fully dynamic |
-| Custom Colors | Via `tailwind.config.*` | Via `setConfig()` |
-| Type Safety | Full TypeScript support | Full TypeScript support |
+| Feature        | Compile-Time (`className`)      | Runtime (`tw` tag)      |
+| -------------- | ------------------------------- | ----------------------- |
+| Bundle Size    | Only used styles (~4KB typical) | Full parser (~25KB)     |
+| Performance    | Zero overhead (pre-compiled)    | Fast (memoized parsing) |
+| Dynamic Values | Conditional only                | Fully dynamic           |
+| Custom Colors  | Via `tailwind.config.*`         | Via `setConfig()`       |
+| Type Safety    | Full TypeScript support         | Full TypeScript support |
 
 ## Complete Example
 
@@ -211,17 +209,13 @@ export function DynamicThemeApp() {
         <View style={tw`flex-row gap-2`}>
           <Pressable
             onPress={() => setTheme("primary")}
-            style={tw`flex-1 p-3 rounded-lg ${
-              theme === "primary" ? "bg-primary" : "bg-gray-300"
-            }`}
+            style={tw`flex-1 p-3 rounded-lg ${theme === "primary" ? "bg-primary" : "bg-gray-300"}`}
           >
             <Text style={tw`text-center font-semibold`}>Primary</Text>
           </Pressable>
           <Pressable
             onPress={() => setTheme("secondary")}
-            style={tw`flex-1 p-3 rounded-lg ${
-              theme === "secondary" ? "bg-secondary" : "bg-gray-300"
-            }`}
+            style={tw`flex-1 p-3 rounded-lg ${theme === "secondary" ? "bg-secondary" : "bg-gray-300"}`}
           >
             <Text style={tw`text-center font-semibold`}>Secondary</Text>
           </Pressable>
@@ -231,25 +225,19 @@ export function DynamicThemeApp() {
         <View style={tw`flex-row gap-2`}>
           <Pressable
             onPress={() => setSize("sm")}
-            style={tw`flex-1 p-2 rounded-lg ${
-              size === "sm" ? "bg-blue-500" : "bg-gray-300"
-            }`}
+            style={tw`flex-1 p-2 rounded-lg ${size === "sm" ? "bg-blue-500" : "bg-gray-300"}`}
           >
             <Text style={tw`text-center text-sm`}>Small</Text>
           </Pressable>
           <Pressable
             onPress={() => setSize("md")}
-            style={tw`flex-1 p-3 rounded-lg ${
-              size === "md" ? "bg-blue-500" : "bg-gray-300"
-            }`}
+            style={tw`flex-1 p-3 rounded-lg ${size === "md" ? "bg-blue-500" : "bg-gray-300"}`}
           >
             <Text style={tw`text-center text-base`}>Medium</Text>
           </Pressable>
           <Pressable
             onPress={() => setSize("lg")}
-            style={tw`flex-1 p-4 rounded-lg ${
-              size === "lg" ? "bg-blue-500" : "bg-gray-300"
-            }`}
+            style={tw`flex-1 p-4 rounded-lg ${size === "lg" ? "bg-blue-500" : "bg-gray-300"}`}
           >
             <Text style={tw`text-center text-lg`}>Large</Text>
           </Pressable>
@@ -266,6 +254,6 @@ export function DynamicThemeApp() {
 
 ## What's Next?
 
-- Learn about [Compile-Time tw](./compile-time-tw/) for zero runtime overhead
-- Explore [Dynamic ClassNames](./dynamic-classnames/) for hybrid optimization
-- Check out [Custom Colors](../advanced/custom-colors/) for theme configuration
+- Learn about [Compile-Time tw](/guides/compile-time-tw/) for zero runtime overhead
+- Explore [Dynamic ClassNames](/guides/dynamic-classnames/) for hybrid optimization
+- Check out [Custom Colors](/advanced/custom-colors/) for theme configuration
diff --git a/docs/src/content/docs/guides/state-modifiers.md b/docs/src/content/docs/guides/state-modifiers.md
@@ -192,6 +192,6 @@ export function LoginForm() {
 
 ## What's Next?
 
-- Learn about [Platform Modifiers](./platform-modifiers/) for platform-specific styling
-- Explore [Color Scheme](./color-scheme/) for dark mode support
-- Check out [Dynamic ClassNames](./dynamic-classnames/) for more conditional patterns
+- Learn about [Platform Modifiers](/guides/platform-modifiers/) for platform-specific styling
+- Explore [Color Scheme](/guides/color-scheme/) for dark mode support
+- Check out [Dynamic ClassNames](/guides/dynamic-classnames/) for more conditional patterns
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
@@ -8,7 +8,7 @@ hero:
     file: ../../assets/logo.svg
   actions:
     - text: Get Started
-      link: ./getting-started/installation/
+      link: /getting-started/installation/
       icon: right-arrow
       variant: primary
     - text: View on GitHub
@@ -116,6 +116,6 @@ const _twStyles = StyleSheet.create({
 ## Ready to get started?
 
 <Card title="Installation Guide" icon="🚀">
-  Follow our [installation guide](./getting-started/installation/) to set up React Native Tailwind in your
+  Follow our [installation guide](/getting-started/installation/) to set up React Native Tailwind in your
   project.
 </Card>
diff --git a/docs/src/content/docs/reference/api.md b/docs/src/content/docs/reference/api.md
@@ -186,6 +186,6 @@ The programmatic API has some overhead since it parses at runtime:
 
 ## Related
 
-- [Runtime tw](../guides/runtime-tw/) - For fully dynamic styling
-- [Custom Colors](../advanced/custom-colors/) - Extend color palette
-- [Troubleshooting](../advanced/troubleshooting/) - Common issues
+- [Runtime tw](/guides/runtime-tw/) - For fully dynamic styling
+- [Custom Colors](/advanced/custom-colors/) - Extend color palette
+- [Troubleshooting](/advanced/troubleshooting/) - Common issues
diff --git a/docs/src/content/docs/reference/aspect-ratio.md b/docs/src/content/docs/reference/aspect-ratio.md
@@ -96,5 +96,5 @@ The aspect ratio is calculated as `width / height`. When combined with `w-full`,
 
 ## Related
 
-- [Sizing](./sizing/) - Width and height utilities
-- [Layout](./layout/) - Flexbox utilities
+- [Sizing](/reference/sizing/) - Width and height utilities
+- [Layout](/reference/layout/) - Flexbox utilities
diff --git a/docs/src/content/docs/reference/borders.md b/docs/src/content/docs/reference/borders.md
@@ -117,5 +117,5 @@ description: Border width, radius, and style utilities
 
 ## Related
 
-- [Colors](./colors/) - Border color utilities
-- [Shadows](./shadows/) - Shadow and elevation
+- [Colors](/reference/colors/) - Border color utilities
+- [Shadows](/reference/shadows/) - Shadow and elevation
diff --git a/docs/src/content/docs/reference/colors.md b/docs/src/content/docs/reference/colors.md
diff --git a/docs/src/content/docs/reference/layout.md b/docs/src/content/docs/reference/layout.md
diff --git a/docs/src/content/docs/reference/shadows.md b/docs/src/content/docs/reference/shadows.md
diff --git a/docs/src/content/docs/reference/sizing.md b/docs/src/content/docs/reference/sizing.md
diff --git a/docs/src/content/docs/reference/spacing.md b/docs/src/content/docs/reference/spacing.md
diff --git a/docs/src/content/docs/reference/transforms.md b/docs/src/content/docs/reference/transforms.md
diff --git a/docs/src/content/docs/reference/typography.md b/docs/src/content/docs/reference/typography.md

Original file line number	Diff line number	Diff line change
`@@ -25,4 +25,4 @@ pnpm add @mgcrea/react-native-tailwind`
`25`	`25`
`26`	`26`	`## Next Steps`
`27`	`27`
`28`		`-After installing the package, proceed to the [Quick Start](./quick-start/) guide to configure the Babel plugin and start using className in your components.`
	`28`	`+After installing the package, proceed to the [Quick Start](/getting-started/quick-start/) guide to configure the Babel plugin and start using className in your components.`