docs: add documentation for NativeWind plugin (#1180)

Author: borisyankov

packages/plugin-nativewind/README.md

@@ -23,12 +23,12 @@ This plugin seamlessly integrates NativeWind with Re.Pack's build process by:
 
 ## Installation
 
-First, follow these steps from the official [NativeWind installation guide](https://www.nativewind.dev/getting-started/react-native):
+First, follow these steps from the official [NativeWind installation guide](https://www.nativewind.dev/docs/getting-started/installation):
 
-1. [Install NativeWind](https://www.nativewind.dev/getting-started/react-native#installation)
-2. [Setup Tailwind CSS](https://www.nativewind.dev/getting-started/react-native#2-setup-tailwind-css)
-3. [Import your CSS file](https://www.nativewind.dev/getting-started/react-native#5-import-your-css-file)
-4. (Optional) [Setup TypeScript support](https://www.nativewind.dev/getting-started/typescript)
+1. [Install NativeWind](https://www.nativewind.dev/docs/getting-started/installation#1-install-nativewind)
+2. [Setup Tailwind CSS](https://www.nativewind.dev/docs/getting-started/installation#2-setup-tailwind-css)
+3. [Import your CSS file](https://www.nativewind.dev/docs/getting-started/installation#5-import-your-css-file)
+4. (Optional) [Setup TypeScript support](https://www.nativewind.dev/docs/getting-started/installation#7-typescript-setup-optional)
 
 Then install the Re.Pack NativeWind plugin and it's dependencies:
 

website/src/latest/docs/features/_meta.json

@@ -4,5 +4,6 @@
   "dev-server",
   "flow-support",
   "devtools",
-  "reanimated"
+  "reanimated",
+  "nativewind"
 ]

website/src/latest/docs/features/nativewind.mdx

@@ -0,0 +1,94 @@
+import { PackageManagerTabs } from 'rspress/theme';
+
+# NativeWind
+
+[NativeWind](https://www.nativewind.dev/) brings Tailwind CSS utility classes to React Native, enabling rapid, consistent styling. With Re.Pack, you can seamlessly integrate NativeWind through a dedicated plugin.
+
+[@callstack/repack-plugin-nativewind](https://github.com/callstack/repack/tree/main/packages/plugin-nativewind) is a plugin for Re.Pack that enables integrating NativeWind into your React Native projects.
+
+## About
+
+This plugin seamlessly integrates NativeWind with Re.Pack's build process by:
+
+- Configuring PostCSS and Tailwind CSS processing for your stylesheets
+- Handling conversion of CSS to React Native-compatible styles
+- Setting up proper SWC transformations for NativeWind's JSX runtime
+
+## Installation
+
+First, follow these steps from the official [NativeWind installation guide](https://www.nativewind.dev/docs/getting-started/installation):
+
+1. [Install NativeWind](https://www.nativewind.dev/docs/getting-started/installation#1-install-nativewind)
+2. [Setup Tailwind CSS](https://www.nativewind.dev/docs/getting-started/installation#2-setup-tailwind-css)
+3. [Import your CSS file](https://www.nativewind.dev/docs/getting-started/installation#5-import-your-css-file)
+4. (Optional) [Setup TypeScript support](https://www.nativewind.dev/docs/getting-started/installation#7-typescript-setup-optional)
+
+Then install the Re.Pack NativeWind plugin and its dependencies:
+
+<PackageManagerTabs command="install -D @callstack/repack-plugin-nativewind postcss postcss-loader autoprefixer" />
+
+:::tip Version Alignment
+The NativeWind plugin is versioned together with Re.Pack. For best compatibility, align the version of `@callstack/repack-plugin-nativewind` with your `@callstack/repack` version in the project.
+:::
+
+:::info{title="A note on dependencies:"}
+These additional dependencies (`postcss`, `postcss-loader`, and `autoprefixer`) are required for processing Tailwind CSS with Webpack/Rspack, as specified in the [official Tailwind CSS Rspack guide](https://tailwindcss.com/docs/guides/rspack). They enable PostCSS processing and autoprefixing of CSS styles in your build pipeline.
+:::
+
+## Usage
+
+:::info{title="Webpack specific configuration"}
+If you are using Webpack (not Rspack), you need to add the following configuration to your `babel.config.js`:
+
+```js title="babel.config.js"
+plugins: [
+  [
+    '@babel/plugin-transform-react-jsx',
+    {
+      runtime: 'automatic',
+      importSource: 'nativewind',
+    },
+  ],
+],
+```
+:::
+
+### Plugin
+
+To add the plugin to your Re.Pack configuration, update your `rspack.config.js` or `webpack.config.js` as follows:
+
+```js title="rspack.config.js"
+import { NativeWindPlugin } from "@callstack/repack-plugin-nativewind";
+
+export default (env) => {
+  // ...
+  return {
+    // ...
+    plugins: [
+      // ...
+      new NativeWindPlugin(),
+    ],
+  };
+};
+```
+
+## Troubleshooting
+
+- **Styles not applying?**
+
+  Ensure your CSS import is present and the plugin is added to your config.
+
+- **PostCSS errors?**
+
+  Double-check that all required dependencies are installed and your `postcss.config.js` is set up.
+
+- **TypeScript issues?**
+
+  Follow the [NativeWind TypeScript setup guide](https://www.nativewind.dev/getting-started/typescript).
+
+## Further Resources
+
+- [NativeWind Documentation](https://www.nativewind.dev/docs)
+- [Tailwind CSS Documentation](https://tailwindcss.com/)
+- [Re.Pack NativeWind Plugin Repo](https://github.com/callstack/repack/tree/main/packages/plugin-nativewind)
+