`,
+ },
+ {
+ title: 'Align-top',
+ text: 'Use align-top to align the top of an element and its descendants with the top of the entire line.',
+ code: `...`,
+ },
+ {
+ title: 'Align middle',
+ text: 'Use align-middle to align the middle of an element with the baseline plus half the x-height of the parent.',
+ code: `...`,
+ },
+ {
+ title: 'Align bottom',
+ text: 'Use align-bottom to align the bottom of an element and its descendants with the bottom of the entire line.',
+ code: `...`,
+ },
+ {
+ title: 'Align text top',
+ text: "Use align-text-top to align the top of an element with the top of the parent element's font.",
+ code: `...`,
+ },
+ {
+ title: 'Align text bottom',
+ text: "Use align-text-bottom to align the bottom of an element with the bottom of the parent element's font.",
+ code: `...`,
+ },
+ {
+ title: 'Justify Content (justify-{alignment})',
+ text: "Utilities for controlling how flex and grid items are positioned along a container's main axis.",
+ code: '',
+ },
+ {
+ title: 'Start',
+ text: "Use justify-start to justify items against the start of the container's main axis:",
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Center',
+ text: "Use justify-center to justify items along the center of the container's main axis:",
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'End',
+ text: "Use justify-end to justify items against the end of the container's main axis:",
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Space between',
+ text: "Use justify-between to justify items along the container's main axis such that there is an equal amount of space between each item:",
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Space around',
+ text: "Use justify-around to justify items along the container's main axis such that there is an equal amount of space on each side of each item:",
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Space evenly',
+ text: "Use justify-evenly to justify items along the container's main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justify-around:",
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Stretch',
+ text: "Use justify-stretch to allow content items to fill the available space along the container's main axis:",
+ code: `
+
01
+
02
+
03
+
`,
+ },
+];
+
+export const justifyItems: classRenderer[] = [
+ {
+ title: 'Start',
+ text: 'Use justify-items-start to justify grid items against the start of their inline axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
06
+
`,
+ },
+ {
+ title: 'End',
+ text: 'Use justify-items-end to justify grid items against the end of their inline axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
06
+
`,
+ },
+ {
+ title: 'Center',
+ text: 'Use justify-items-center to justify grid items along their inline axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
06
+
`,
+ },
+ {
+ title: 'Stretch',
+ text: 'Use justify-items-stretch to stretch items along their inline axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
06
+
`,
+ },
+];
+export const justifySelf: classRenderer[] = [
+ {
+ title: 'Auto',
+ text: 'Use justify-self-auto to align an item based on the value of the grid’s justify-items property:',
+ code: `
+
+
02
+
+
+
+
+
`,
+ },
+ {
+ title: 'Start',
+ text: 'Use justify-self-start to align a grid item to the start of its inline axis:',
+ code: `
+
+
02
+
+
+
+
+
`,
+ },
+ {
+ title: 'Center',
+ text: 'Use justify-self-center to align a grid item along the center of its inline axis:',
+ code: `
+
+
02
+
+
+
+
+
`,
+ },
+ {
+ title: 'End',
+ text: 'Use justify-self-end to align a grid item to the end of its inline axis:',
+ code: `
+
+
02
+
+
+
+
+
`,
+ },
+ {
+ title: 'Stretch',
+ text: 'Use justify-self-stretch to stretch a grid item to fill the grid area on its inline axis:',
+ code: `
+
+
02
+
+
+
+
+
`,
+ },
+];
+
+export const alignItems: classRenderer[] = [
+ {
+ title: 'Stretch',
+ text: 'Use items-stretch to stretch items to fill the container’s cross axis:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Start',
+ text: 'Use items-start to align items to the start of the container’s cross axis:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Center',
+ text: 'Use items-center to align items along the center of the container’s cross axis:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'End',
+ text: 'Use items-end to align items to the end of the container’s cross axis:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Baseline',
+ text: 'Use items-baseline to align items along the container’s cross axis such that all of their baselines align:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+];
+export const alignSelf: classRenderer[] = [
+ {
+ title: 'Auto',
+ text: 'Use self-auto to align an item based on the value of the container’s align-items property:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Start',
+ text: 'Use self-start to align an item to the start of the container’s cross axis, despite the container’s align-items value:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Center',
+ text: 'Use self-center to align an item along the center of the container’s cross axis, despite the container’s align-items value:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'End',
+ text: 'Use self-end to align an item to the end of the container’s cross axis, despite the container’s align-items value:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: 'Stretch',
+ text: 'Use self-stretch to stretch an item to fill the container’s cross axis, despite the container’s align-items value:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+];
+
+export const alignContent: classRenderer[] = [
+ {
+ title: 'Start',
+ text: 'Use content-start to pack rows in a container against the start of the cross axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
`,
+ },
+ {
+ title: 'Center',
+ text: 'Use content-center to pack rows in a container in the center of the cross axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
+`,
+ },
+ {
+ title: 'End',
+ text: 'Use content-end to pack rows in a container against the end of the cross axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
`,
+ },
+ {
+ title: 'Space between',
+ text: 'Use content-between to distribute rows in a container such that there is an equal amount of space between each line:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
`,
+ },
+ {
+ title: 'Space around',
+ text: 'Use content-around to distribute rows in a container such that there is an equal amount of space around each line:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
`,
+ },
+ {
+ title: 'Space evenly',
+ text: 'Use content-evenly to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
`,
+ },
+ {
+ title: 'Stretch',
+ text: 'Use content-stretch to allow content items to fill the available space along the container’s cross axis:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
`,
+ },
+ {
+ title: 'Normal',
+ text: 'Use content-normal to pack content items in their default position as if no align-content value was set:',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
`,
+ },
+];
+
+export const position: classRenderer[] = [
+ {
+ title: 'Statically positioning elements',
+ text: `Use the static utility to position an element according to the normal flow of the document.
+
+Any offsets will be ignored and the element will not act as a position reference for absolutely positioned children.`,
+ code: `
+
Static parent
+
+
Absolute child
+
+
`,
+ },
+ {
+ title: 'Relatively positioning elements',
+ text: `Use the relative utility to position an element according to the normal flow of the document.
+
+Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.
+
+`,
+ code: `
+
Relative parent
+
+
Absolute child
+
+
`,
+ },
+ {
+ title: 'Absolutely positioning elements',
+ text: `Use the absolute utility to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.
+
+Any offsets are calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.`,
+ code: `
+
+
Static child
+
Static sibling
+
+
Absolute child
+
Static sibling
+
`,
+ },
+ {
+ title: 'Fixed positioning elements',
+ text: `Use the fixed utility to position an element relative to the browser window.
+
+Any offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.`,
+ code: `
+
Contacts
+
+
+
+ Andrew Alfred
+
+
+
+ Debra Houston
+
+
+
+
`,
+ },
+ {
+ title: 'Sticky positioning elements',
+ text: `Use the sticky utility to position an element as relative until it crosses a specified threshold, then treat it as fixed until its parent is off screen.
+
+Any offsets are calculated relative to the element’s normal position and the element will act as a position reference for absolutely positioned children.`,
+ code: `
+
+
A
+
+
+
+ Andrew Alfred
+
+
+
+ Aisha Houston
+
+
+
+
+
+
B
+
+
+
+ Bob Alfred
+
+
+
+
+
+
`,
+ },
+];
+
+export const positionLaterals: classRenderer[] = [
+ {
+ title: 'Placing a positioned element',
+ text: `Use the top-*, right-*, bottom-*, left-*, and inset-* utilities to set the horizontal or vertical position of a positioned element.`,
+ code: `
+
+
01
+
+
+
+
+
02
+
+
+
+
+
03
+
+
+
+
+
04
+
+
+
+
+
05
+
+
+
+
+
06
+
+
+
+
+
07
+
+
+
+
+
08
+
+
+
+
+
09
+
`,
+ },
+ {
+ title: 'Using negative values',
+ text: `To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value.
+
+`,
+ code: `
+
+
`,
+ },
+ {
+ title: 'Using logical properties',
+ text: `Use the start-* and end-* utilities to set the inset-inline-start and inset-inline-end logical properties, which map to either the left or right side based on the text direction.
+
+`,
+ code: `
+
+
+
+
+
+
+
+
+
+
`,
+ },
+];
diff --git a/sites/native-twin-docs/src/app/documentation/alignment-position/page.tsx b/sites/native-twin-docs/src/app/documentation/alignment-position/page.tsx
new file mode 100644
index 000000000..c111f0883
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/alignment-position/page.tsx
@@ -0,0 +1,40 @@
+import { ClassToRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+import { HeaderDocsTop } from '@/feactures/documentation/layout/HeaderDocsTop';
+import tailwindClasses from '../../../../data';
+import {
+ alignContent,
+ alignItems,
+ alignmentData,
+ alignSelf,
+ justifyItems,
+ justifySelf,
+ position,
+ positionLaterals,
+} from './dataAlignment';
+
+export default function AlignmentPosition() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/colors-background/dataColors.ts b/sites/native-twin-docs/src/app/documentation/colors-background/dataColors.ts
new file mode 100644
index 000000000..cb4d5ea4c
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/colors-background/dataColors.ts
@@ -0,0 +1,65 @@
+import { classRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+
+export const dataBackground: classRenderer[] = [
+ {
+ title: 'Background Color',
+ text: "Utilities for controlling an element's background color.",
+ code: `
+
+
+`,
+ },
+ {
+ title: 'Border Radius',
+ text: 'Utilities for controlling the border radius of an element.',
+ code: `
+
+
+
+`,
+ },
+ {
+ title: 'Border Width',
+ text: "Utilities for controlling the width of an element's borders.",
+ code: `
+
+
+
+`,
+ },
+ {
+ title: 'Border Color',
+ text: "Utilities for controlling the color of an element's borders.",
+ code: `
+
+
+`,
+ },
+ {
+ title: '',
+ text: '',
+ code: `
+`,
+ },
+];
+
+export const dataShadowAndIndex: classRenderer[] = [
+ {
+ title: 'Box Shadow Color',
+ text: 'Use the shadow-* utilities to change the color of an existing box shadow. By default colored shadows have an opacity of 100%, but you can adjust this using the opacity modifier.',
+ code: `
+
+
+`,
+ },
+ {
+ title: 'Z-Index',
+ text: 'Utilities for controlling the stack order of an element. Use the z-* utilities to control the stack order (or three-dimensional positioning) of an element, regardless of order it has been displayed.',
+ code: `
05
+
04
+
03
+
02
+
01
+`,
+ },
+];
diff --git a/sites/native-twin-docs/src/app/documentation/colors-background/page.tsx b/sites/native-twin-docs/src/app/documentation/colors-background/page.tsx
new file mode 100644
index 000000000..24ae47758
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/colors-background/page.tsx
@@ -0,0 +1,23 @@
+import { ClassToRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+import { HeaderDocsTop } from '@/feactures/documentation/layout/HeaderDocsTop';
+import tailwindClasses from '../../../../data';
+import { dataBackground, dataShadowAndIndex } from './dataColors';
+
+export default function ColorsBackgroundPage() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/flex-box/flexData.ts b/sites/native-twin-docs/src/app/documentation/flex-box/flexData.ts
new file mode 100644
index 000000000..71182157d
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/flex-box/flexData.ts
@@ -0,0 +1,140 @@
+export const dataFlex = [
+ {
+ title: 'Flex',
+ text: 'Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:',
+ code: `
+
+ 01
+
+
+ 02
+
+
+ 03
+
+
`,
+ },
+ {
+ title: 'Flex-1',
+ text: 'Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:',
+ code: `
+
+ 01
+
+
+ 02
+
+
+ 03
+
+
`,
+ },
+ {
+ title: 'Flex-{cols}',
+ text: 'Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:',
+ code: `
+
+ 01
+
+
+ 02
+
+
+ 03
+
+
`,
+ },
+ {
+ title: 'flex-{direction}',
+ text: 'Use flex-row to position flex items horizontally in the same direction as text:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: '',
+ text: 'Use flex-row-reverse to position flex items horizontally in the opposite direction:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: '',
+ text: 'Use flex-col to position flex items vertically:',
+ code: `
+
01
+
02
+
03
+
`,
+ },
+ {
+ title: '',
+ text: 'Use flex-col-reverse to position flex items vertically in the opposite direction:',
+ code: `
+ {/* Nombre de la categoría con la ruta correspondiente */}
+
+ {category.name}
+
+
+ ))}
+
+
+ );
+ })}
+
+
+
+
+ {children}
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/other/dataOther.ts b/sites/native-twin-docs/src/app/documentation/other/dataOther.ts
new file mode 100644
index 000000000..7c8c4dc8c
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/other/dataOther.ts
@@ -0,0 +1,47 @@
+import { classRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+
+export const dataVisibility: classRenderer[] = [
+ {
+ title: 'Hidden',
+ text: 'Use the hidden utility to set an element to display: none and remove it from the page layout (compare with invisible from the visibility documentation).',
+ code: `
+
01
+
02
+
03
+
+`,
+ },
+ {
+ title: 'Overflow',
+ text: 'Utilities for controlling how an element handles content that is too large for the container. Use the overflow-visible utility to prevent content within an element from being clipped. Note that any content that overflows the bounds of the element will then be visible.',
+ code: `
+`,
+ },
+];
+
+export const ObjectProperties: classRenderer[] = [
+ {
+ title: 'Object Fit',
+ text: "Utilities for controlling how a replaced element's content should be resized. Use the object-cover utility to resize an element’s content to cover its container.",
+ code: `
+
+
+`,
+ },
+ {
+ title: 'Opacity',
+ text: 'Utilities for controlling the opacity of an element. Use the opacity-* utilities to control the opacity of an element.',
+ code: `
+
+
+
+`,
+ },
+ {
+ title: 'Aspect Ratio',
+ text: ' Utilities for controlling the aspect ratio of an element. Use the aspect-* utilities to set the desired aspect ratio of an element.',
+ code: `
+
+`,
+ },
+];
diff --git a/sites/native-twin-docs/src/app/documentation/other/page.tsx b/sites/native-twin-docs/src/app/documentation/other/page.tsx
new file mode 100644
index 000000000..1a46890a8
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/other/page.tsx
@@ -0,0 +1,23 @@
+import { ClassToRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+import { HeaderDocsTop } from '@/feactures/documentation/layout/HeaderDocsTop';
+import tailwindClasses from '../../../../data';
+import { dataVisibility, ObjectProperties } from './dataOther';
+
+export default function OtherPage() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/page.tsx b/sites/native-twin-docs/src/app/documentation/page.tsx
new file mode 100644
index 000000000..0d01f99fc
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/page.tsx
@@ -0,0 +1,103 @@
+import { normalText } from '@/constants/colors';
+import { Code } from '@/feactures/documentation/components/Code';
+import { SubTitle } from '@/feactures/documentation/components/SubTitle';
+import { Text } from '@/feactures/documentation/components/Text';
+import { Title } from '@/feactures/documentation/components/Title';
+
+export default function DocsPage() {
+ return (
+
+
+ Effortlessly style your React Native and React applications with the familiar
+ utility-first syntax of Tailwind CSS.
+
+
+ Introduction to native-twin
+
+ native-twin allows developers to apply Tailwind CSS styling across both React
+ Native (for mobile) and React (for web) applications. With a familiar syntax,
+ developers can leverage their existing knowledge of Tailwind CSS for seamless
+ application styling. Built with performance in mind, native-twin ensures efficient
+ rendering and a smooth user experience.
+
+
+ Key Features
+
+
+ Unified Styling: Write a
+ single set of Tailwind CSS classes that translate effectively to
+ platform-specific styles for both web and mobile.
+
+
+ Component-Based Approach:{' '}
+ Encourages a modular design system by enabling the creation of reusable, styled
+ components.
+
+
+ Theme Customization: Extend and
+ customize the default Tailwind CSS theme to match your brand or application's
+ design language.
+
+
+
+ Getting Started
+ Follow these steps to integrate native-twin into your project:
+
+ 1. Installation (npm or Yarn)
+ Choose either npm or Yarn for this step:
+
+
+
+ 2. Package Breakdown
+
+
+ @native-twin/core: The heart of
+ native-twin that processes Tailwind CSS classes into platform-specific styles.
+
+
+ @native-twin/babel: Contains
+ the Babel plugin essential for transforming Tailwind CSS classes during the
+ build process.
+
+
+ @native-twin/dev-tools:{' '}
+ Provides developer tools and utilities to streamline the styling workflow.
+
+
+ @native-twin/jsx: Enables the
+ use of native-twin's styling approach directly within JSX code.
+
+
+ @native-twin/metro: Ensures
+ compatibility and smooth integration if using Metro bundler in React Native
+ projects.
+
+
+ @native-twin/preset-tailwind:{' '}
+ Includes predefined Tailwind CSS configurations tailored for use with
+ native-twin.
+
+
+ @native-twin/styled: Provides a
+ way to create styled components using native-twin, combining Tailwind CSS
+ benefits with a component-based architecture.
+
+
+ tailwindcss: The core Tailwind
+ CSS package providing all utility classes.
+
+
+ @tailwindcss/forms: Extends
+ Tailwind CSS with additional utility classes specifically designed for styling
+ form elements.
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/setup/expo-app/page.tsx b/sites/native-twin-docs/src/app/documentation/setup/expo-app/page.tsx
new file mode 100644
index 000000000..04e8a20cb
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/setup/expo-app/page.tsx
@@ -0,0 +1,126 @@
+import { Code } from '@/feactures/documentation/components/Code';
+import { SubTitle } from '@/feactures/documentation/components/SubTitle';
+import { Text } from '@/feactures/documentation/components/Text';
+import { Title } from '@/feactures/documentation/components/Title';
+
+export default function NativeTwinSetupGuide() {
+ return (
+
+ Setting up native-twin (expo app)
+ This tutorial assumes you already have a React Native project set up.
+
+ 1. Installation (npm or Yarn)
+ Choose either npm or Yarn for this step:
+
+ Using npm:
+
+
+ Using Yarn:
+
+
+ 2. Tailwind CSS Configuration
+
+ • Create a tailwind.config.js (or .ts if using TypeScript) file in your project's
+ root directory.
+
+ • Add this code:
+
+
+ 3. Babel Configuration
+ • Open your babel.config.js file.
+ • Modify it to include:
+
+
+ 4. Metro Configuration
+ • Open your metro.config.js file.
+ • Modify it to include:
+
+
+ 5. Start Using native-twin
+ • In your React Native components, import the tw function:
+
+ • Apply Tailwind CSS classes using the tw function:
+ {
+ return (
+
+
+ Hello, this is styled with native-twin!
+
+
+ );
+};`}
+ >
+
+
+ Remember: You may need to restart your development server after
+ making these changes for them to take effect.
+
+
+ While the sources provided do not have explicit instructions for using native-twin
+ with Yarn, the configuration files (babel.config.js, metro.config.js,
+ tailwind.config.js) remain the same for both npm and Yarn.
+
+
+ This tutorial provides a general outline for setting up native-twin. Always refer
+ to the official native-twin documentation (and Tailwind CSS documentation) for the
+ most up-to-date information:
+
+ • Native Twin: https://native-twin.dev/
+ • Tailwind CSS: https://tailwindcss.com/
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/setup/expo-router/page.tsx b/sites/native-twin-docs/src/app/documentation/setup/expo-router/page.tsx
new file mode 100644
index 000000000..848818930
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/setup/expo-router/page.tsx
@@ -0,0 +1,155 @@
+import { Code } from '@/feactures/documentation/components/Code';
+import { SubTitle } from '@/feactures/documentation/components/SubTitle';
+import { Text } from '@/feactures/documentation/components/Text';
+import { Title } from '@/feactures/documentation/components/Title';
+
+export default function NativeTwinExpoRouter() {
+ return (
+
+ Setting up native-twin (expo-router)
+
+ 1. Installing Dependencies
+ Choose npm or Yarn:
+
+
+ 2. Configuring Tailwind CSS (tailwind.config.ts)
+ This file configures Tailwind CSS for your project.
+
+
+ 3. Configuring Babel (babel.config.js)
+
+ Babel is a JavaScript compiler that transforms your code into a format
+ understandable by browsers and devices. The @native-twin/babel package includes a
+ Babel preset that allows Babel to process your native-twin code properly.
+
+
+
+ 4. Configuring Metro (metro.config.js)
+
+ Metro is the default JavaScript bundler used by React Native. It bundles all the
+ JavaScript code in your app. In an Expo project, this bundling process is
+ typically handled behind the scenes.
+
+
+
+ 5. Using native-twin
+
+ After completing the configurations, restart your development server to apply the
+ changes.
+
+ Example:
+ {
+ return (
+
+
+ Hello, this is styled with native-twin!
+
+
+ );
+};`}
+ />
+
+ Key Points:
+
+ • Make sure to restart your development server after making changes to
+ babel.config.js or metro.config.js.
+
+
+ • Refer to the official documentation of native-twin for more detailed information
+ and advanced usage.
+
+
+ This tutorial, along with the official native-twin documentation, should help you
+ successfully set up and use native-twin in your React Native Expo project.
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/setup/next-app-dir/page.tsx b/sites/native-twin-docs/src/app/documentation/setup/next-app-dir/page.tsx
new file mode 100644
index 000000000..4b7d798bf
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/setup/next-app-dir/page.tsx
@@ -0,0 +1,166 @@
+import { Code } from '@/feactures/documentation/components/Code';
+import { SubTitle } from '@/feactures/documentation/components/SubTitle';
+import { Text } from '@/feactures/documentation/components/Text';
+import { Title } from '@/feactures/documentation/components/Title';
+
+const NextAppDir = () => {
+ return (
+
The provided source code mentions react-native as a dependency.
+
Make sure to restart your development server after making changes.
+
+ Refer to the official documentation of native-twin for more detailed information
+ and advanced usage.
+
+
+
+ );
+};
+
+export default NextAppDir;
diff --git a/sites/native-twin-docs/src/app/documentation/setup/next-app/page.tsx b/sites/native-twin-docs/src/app/documentation/setup/next-app/page.tsx
new file mode 100644
index 000000000..61b34f9a0
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/setup/next-app/page.tsx
@@ -0,0 +1,190 @@
+import { Code } from '@/feactures/documentation/components/Code';
+import { SubTitle } from '@/feactures/documentation/components/SubTitle';
+import { Text } from '@/feactures/documentation/components/Text';
+import { Title } from '@/feactures/documentation/components/Title';
+
+const NativeTwinNextJSSetupGuide = () => {
+ return (
+
+ Setting up native-twin (next-app)
+
+ 1. Installing Dependencies
+ Choose npm or Yarn:
+
+
+ 2. Configuring Tailwind CSS (tailwind.config.js)
+ This file configures Tailwind CSS for your project.
+
+
+ 3. Modify tsconfig.json
+
+ Update the jsxImportSource to @native-twin/jsx to enable JSX support in your
+ TypeScript files.
+
+
+
+ 4. Wrap Your App Component (pages/_app.tsx)
+
+ Wrap your root App component with the installApp function from
+ @native-twin/nextjs/_app. This step ensures that native-twin styles are applied
+ correctly in your Next.js application.
+
+
+ Show case
+
+ );
+}
+
+export default installApp(twConfig, MyApp);`}
+ />
+
+ 5. Wrap Your Document Component (pages/_document.tsx)
+
+ In your _document.tsx file, import installDocument from
+ @native-twin/nextjs/_document and use it to wrap your custom Document component.
+ This ensures that native-twin integrates correctly with Next.js's server-side
+ rendering.
+
+ {
+ AppRegistry.registerComponent('Main', () => Main);
+ // @ts-expect-error
+ const { getStyleElement } = AppRegistry.getApplication('Main');
+
+ const page = await ctx.renderPage();
+
+ return { ...page };
+}
+
+class MyDocument extends Document {
+ getInitialProps = getInitialProps;
+
+ override render() {
+ const currentLocale = this.props.__NEXT_DATA__.locale || 'en';
+
+ return (
+ {/* Your document structure here */}
+ );
+ }
+}
+
+export default installDocument(MyDocument);`}
+ />
+
+ 6. Using native-twin
+ After completing these configurations, restart your development server.
+ Example:
+ {
+ return (
+
+
+ Hello, this is styled with native-twin!
+
+
+ );
+};`}
+ />
+
+ Key Points:
+
+ • Make sure to restart your development server after making changes to
+ tsconfig.json.
+
+
+ • Refer to the official documentation of native-twin for more detailed information
+ and advanced usage.
+
+
+ This tutorial, along with the official native-twin documentation, should help you
+ successfully set up and use native-twin in your Next.js project.
+
+
+ );
+};
+
+export default NativeTwinNextJSSetupGuide;
diff --git a/sites/native-twin-docs/src/app/documentation/size-dimensions/dataSize.ts b/sites/native-twin-docs/src/app/documentation/size-dimensions/dataSize.ts
new file mode 100644
index 000000000..ee27af98d
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/size-dimensions/dataSize.ts
@@ -0,0 +1,106 @@
+import { classRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+
+export const dataSize: classRenderer[] = [
+ {
+ title: 'Width',
+ text: 'Use utilities like w-px, w-1, and w-64 to set an element to a fixed width.',
+ code: `
w-96
+
w-80
+
w-64
+
w-48
+
w-40
+
w-32
+
w-24
`,
+ },
+ {
+ title: 'Max-Width',
+ text: 'Utilities for setting the maximum width of an element. Set the maximum width of an element using the max-w-* utilities.',
+ code: `
+
max-w-96
+
max-w-80
+
max-w-64
+
max-w-48
+
max-w-40
+
max-w-32
+
max-w-24
+
`,
+ },
+ {
+ title: 'Min-Width',
+ text: 'Utilities for setting the minimum width of an element.Set the minimum width of an element using min-w-* utilities.',
+ code: `
+
min-w-80
+
min-w-64
+
min-w-48
+
min-w-40
+
min-w-32
+
min-w-24
+
min-w-full
+
`,
+ },
+ {
+ title: 'Height',
+ text: 'Utilities for setting the height of an element. Use utilities like h-px, h-1, and h-64 to set an element to a fixed height.',
+ code: `
h-96
+
h-80
+
h-64
+
h-48
+
h-40
+
h-32
+
h-24
`,
+ },
+ {
+ title: 'Max-Height',
+ text: 'Utilities for setting the maximum height of an element. Set the maximum height of an element using max-h-* utilities.',
+ code: `
+
max-h-80
+
max-h-64
+
max-h-48
+
max-h-40
+
max-h-32
+
max-h-24
+
max-h-full
+
`,
+ },
+ {
+ title: 'Min-Height',
+ text: 'Utilities for setting the minimum height of an element. Set the minimum height of an element using min-h-* utilities.',
+ code: `
+
min-h-80
+
min-h-64
+
min-h-48
+
min-h-40
+
min-h-32
+
min-h-24
+
min-h-full
+
+`,
+ },
+];
+
+export const dataResize: classRenderer[] = [
+ {
+ title: 'Resize',
+ text: 'Utilities for controlling how an element can be resized. Use resize to make an element horizontally and vertically resizable.',
+ code: `
+`,
+ },
+ {
+ title: 'Resizing horizontally',
+ text: 'Use resize-x to make an element horizontally resizable.',
+ code: `
+`,
+ },
+ {
+ title: 'Resizing vertically',
+ text: 'Use resize-y to make an element vertically resizable.',
+ code: `
+`,
+ },
+ {
+ title: 'Preventing resizing',
+ text: 'Use resize-none to prevent an element from being resizable.',
+ code: `
+`,
+ },
+];
diff --git a/sites/native-twin-docs/src/app/documentation/size-dimensions/page.tsx b/sites/native-twin-docs/src/app/documentation/size-dimensions/page.tsx
new file mode 100644
index 000000000..80d3413cd
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/size-dimensions/page.tsx
@@ -0,0 +1,24 @@
+import { ClassToRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+import { HeaderDocsTop } from '@/feactures/documentation/layout/HeaderDocsTop';
+import tailwindClasses from '../../../../data';
+import { dataResize, dataSize } from './dataSize';
+
+export default function SizeDimensionsPage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/spacing/dataSpacing.ts b/sites/native-twin-docs/src/app/documentation/spacing/dataSpacing.ts
new file mode 100644
index 000000000..8408a6c07
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/spacing/dataSpacing.ts
@@ -0,0 +1,109 @@
+import { ClassRenderer } from '../../../../Interface/tailwindClass';
+
+export const paddingData: ClassRenderer[] = [
+ {
+ title: 'Add padding to a single side',
+ text: 'Use the pt-*, pr-*, pb-*, and pl-* utilities to control the padding on one side of an element.For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.',
+ code: `
pt-6
+
pr-4
+
pb-8
+
pl-2
`,
+ },
+ {
+ title: 'Add horizontal padding',
+ text: 'Use the px-* utilities to control the horizontal padding of an element.',
+ code: `
px-8
`,
+ },
+ {
+ title: 'Add vertical padding',
+ text: 'Use the py-* utilities to control the vertical padding of an element.',
+ code: `
py-8
`,
+ },
+ {
+ title: 'Add padding to all sides',
+ text: 'Use the p-* utilities to control the padding on all sides of an element.',
+ code: `
p-8
`,
+ },
+ {
+ title: 'Using logical properties',
+ text: 'Use the ps-* and pe-* utilities to set the padding-inline-start and padding-inline-end logical properties, which map to either the left or right side based on the text direction.',
+ code: `
+
ps-8
+
pe-8
+
+
+
+
ps-8
+
pe-8
+
`,
+ },
+ {
+ title: 'Add margin to a single side',
+ text: `Use the mt-*, mr-*, mb-*, and ml-* utilities to control the margin on one side of an element.
+
+For example, mt-6 would add 1.5rem of margin to the top of an element, mr-4 would add 1rem of margin to the right of an element, mb-8 would add 2rem of margin to the bottom of an element, and ml-2 would add 0.5rem of margin to the left of an element.`,
+ code: `
mt-6
+
mr-4
+
mb-8
+
ml-2
`,
+ },
+ {
+ title: 'Add horizontal margin',
+ text: `Use the mx-* utilities to control the horizontal margin of an element.`,
+ code: `
mx-8
`,
+ },
+ {
+ title: 'Add vertical margin',
+ text: 'Use the my-* utilities to control the vertical margin of an element.',
+ code: `
my-8
`,
+ },
+ {
+ title: 'Add margin to all sides',
+ text: 'Use the m-* utilities to control the margin on all sides of an element.',
+ code: `
m-8
`,
+ },
+ {
+ title: 'Using negative values',
+ text: 'To use a negative margin value, prefix the class name with a dash to convert it to a negative value.',
+ code: `
+
-mt-8
`,
+ },
+ {
+ title: 'Using logical properties',
+ text: 'Use the ms-* and me-* utilities to set the margin-inline-start and margin-inline-end logical properties, which map to either the left or right side based on the text direction.',
+ code: `
+
ms-8
+
me-8
+
+
+
+
ms-8
+
me-8
+
`,
+ },
+];
+
+export const gapData: ClassRenderer[] = [
+ {
+ title: 'Setting the gap between elements',
+ text: 'Use the gap-* utilities to change the gap between both rows and columns in grid and flexbox layouts.',
+ code: `
+
01
+
02
+
03
+
04
+
`,
+ },
+ {
+ title: 'Changing row and column gaps independently',
+ text: 'Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows independently.',
+ code: `
+
01
+
02
+
03
+
04
+
05
+
06
+
`,
+ },
+];
diff --git a/sites/native-twin-docs/src/app/documentation/spacing/page.tsx b/sites/native-twin-docs/src/app/documentation/spacing/page.tsx
new file mode 100644
index 000000000..9da52af14
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/spacing/page.tsx
@@ -0,0 +1,23 @@
+import { ClassToRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+import { HeaderDocsTop } from '@/feactures/documentation/layout/HeaderDocsTop';
+import tailwindClasses from '../../../../data';
+import { gapData, paddingData } from './dataSpacing';
+
+export default function SpacingPage() {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/documentation/text-typography/dataText.ts b/sites/native-twin-docs/src/app/documentation/text-typography/dataText.ts
new file mode 100644
index 000000000..98adddcbd
--- /dev/null
+++ b/sites/native-twin-docs/src/app/documentation/text-typography/dataText.ts
@@ -0,0 +1,127 @@
+import { classRenderer } from '@/feactures/documentation/layout/ClassToRederer';
+
+export const dataText: classRenderer[] = [
+ {
+ title: 'Text-{size} ',
+ text: 'Use the text-* utilities to control the font size of an element.',
+ code: `
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+`,
+ },
+ {
+ title: 'Top / Right / Bottom / Left',
+ text: 'Utilities for controlling the placement of positioned elements.',
+ code: `
+
+
01
+
+
+
+
+
02
+
+
+
+
+
03
+
+
+
+
+
04
+
+
+
+
+
05
+
+
+
+
+
06
+
+
+
+
+
07
+
+
+
+
+
08
+
+
+
+
+
09
+
+`,
+ },
+ {
+ title: 'Font Weight',
+ text: 'Utilities for controlling the font weight of an element.',
+ code: `
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+`,
+ },
+ {
+ title: 'Text Transform',
+ text: 'Utilities for controlling the transformation of text.',
+ code: `
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+`,
+ },
+ {
+ title: 'Text Decoration',
+ text: 'Control how text is decorated with the underline, no-underline, and line-through utilities.',
+ code: `
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+
The quick brown fox ...
+`,
+ },
+];
+
+export const dataDecoration: classRenderer[] = [
+ {
+ title: 'Text Decoration Style',
+ text: 'Utilities for controlling the style of text decorations.',
+ code: `
The quick brown fox...
+
The quick brown fox...
+
The quick brown fox...
+
The quick brown fox...
+
The quick brown fox...
+`,
+ },
+ {
+ title: 'Text Decoration Color',
+ text: 'Utilities for controlling the color of text decorations.',
+ code: `
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/page.tsx b/sites/native-twin-docs/src/app/page.tsx
new file mode 100644
index 000000000..eab9379dc
--- /dev/null
+++ b/sites/native-twin-docs/src/app/page.tsx
@@ -0,0 +1,99 @@
+import { ButtonVariable } from '@/components/ButtonVariable';
+import { SearchButton } from '@/components/SearchButton';
+import { Card } from '@/components/ui/card';
+import Image from 'next/image';
+import Link from 'next/link';
+import img2 from '../../public/1.webp';
+import img3 from '../../public/2.webp';
+import img1 from '../../public/3.webp';
+
+const features = [
+ {
+ title: 'Use of Tailwind CSS',
+ description:
+ 'Leverage the popularity and flexibility of Tailwind CSS for rapid prototyping and responsive design.',
+ },
+ {
+ title: 'Compatibility with React Native',
+ description:
+ 'Ideal for developers looking to build mobile applications using React Native while maintaining a smooth user experience.',
+ },
+ {
+ title: 'Dynamic Styles',
+ description:
+ 'Apply and modify styles dynamically based on component properties or application state.',
+ },
+ {
+ title: 'Performance Optimization',
+ description:
+ 'Designed to minimize bundle size, ensuring your application remains fast and efficient.',
+ },
+ {
+ title: 'Extensible Customization',
+ description:
+ "Offers options to customize themes and styles, adapting to your project's specific needs.",
+ },
+];
+export default function Home() {
+ return (
+
+
+
+
+ Tailwind CSS in React Native
+
+
+ Native Twin allows developers to apply Tailwind CSS styling across both React
+ Native (for mobile) and React (for web) applications. With an intuitive
+ syntax, you can leverage your existing knowledge of Tailwind CSS for seamless
+ application styling. Built with performance in mind, Native Twin ensures
+ efficient rendering and a smooth user experience.
+
+
+
+ Get Started
+
+
+
+
+
+
+
+
+
+ Work in Native Like in Web
+
+
+ Discover how Native Twin transforms development by allowing you to use
+ Tailwind CSS classes in both environments. The simplicity and efficiency it
+ offers will change the way you build your applications.
+
+
+ Explore More
+
+
+
+ {
+ // Addd here the editor
+ }
+
+
+
+
+
Key Features
+
+ {features.map((feature, index) => (
+
+
{feature.title}
+
{feature.description}
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/sites/native-twin-docs/src/app/theme-provider.tsx b/sites/native-twin-docs/src/app/theme-provider.tsx
new file mode 100644
index 000000000..8c90fbc8b
--- /dev/null
+++ b/sites/native-twin-docs/src/app/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+ return {children}
+}
diff --git a/sites/native-twin-docs/src/components/ButtonVariable/index.tsx b/sites/native-twin-docs/src/components/ButtonVariable/index.tsx
new file mode 100644
index 000000000..b9125ecac
--- /dev/null
+++ b/sites/native-twin-docs/src/components/ButtonVariable/index.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { Button } from '../ui/button';
+
+export const ButtonVariable = ({
+ children,
+ color,
+}: {
+ color: string;
+ children: string;
+}) => {
+ return (
+
+ );
+};
diff --git a/sites/native-twin-docs/src/components/LinkNavbar/index.tsx b/sites/native-twin-docs/src/components/LinkNavbar/index.tsx
new file mode 100644
index 000000000..0df25e67f
--- /dev/null
+++ b/sites/native-twin-docs/src/components/LinkNavbar/index.tsx
@@ -0,0 +1,13 @@
+import TAILWIND_CLASSES from "../../../data";
+
+export const LinkNavbar = () => {
+ return (
+
+ Andrew Alfred
+