Skip to content

Commit 3dfd4ec

Browse files
committed
moving docs changes to separate pr
1 parent 2edfe4a commit 3dfd4ec

File tree

1 file changed

+25
-4
lines changed

1 file changed

+25
-4
lines changed

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

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ This plugin seamlessly integrates NativeWind with Re.Pack's build process by:
1818

1919
First, follow these steps from the official [NativeWind installation guide](https://www.nativewind.dev/docs/getting-started/installation):
2020

21-
1. [Install NativeWind](https://www.nativewind.dev/docs/getting-started/installation/frameworkless) - follow everything except the metro setup.
21+
1. [Install NativeWind](https://www.nativewind.dev/docs/getting-started/installation#1-install-nativewind)
2222
2. [Setup Tailwind CSS](https://www.nativewind.dev/docs/getting-started/installation#2-setup-tailwind-css)
2323
3. [Import your CSS file](https://www.nativewind.dev/docs/getting-started/installation#5-import-your-css-file)
2424
4. (Optional) [Setup TypeScript support](https://www.nativewind.dev/docs/getting-started/installation#7-typescript-setup-optional)
@@ -37,6 +37,24 @@ These additional dependencies (`postcss`, `postcss-loader`, and `autoprefixer`)
3737

3838
## Usage
3939

40+
:::info{title="Webpack specific configuration"}
41+
If you are using Webpack (not Rspack), you need to add the following configuration to your `babel.config.js`:
42+
43+
```js title="babel.config.js"
44+
plugins: [
45+
[
46+
'@babel/plugin-transform-react-jsx',
47+
{
48+
runtime: 'automatic',
49+
importSource: 'nativewind',
50+
},
51+
],
52+
],
53+
```
54+
:::
55+
56+
### Plugin
57+
4058
To add the plugin to your Re.Pack configuration, update your `rspack.config.js` or `webpack.config.js` as follows:
4159

4260
```js title="rspack.config.js"
@@ -58,12 +76,15 @@ export default (env) => {
5876

5977
- **Styles not applying?**
6078

61-
- Ensure your CSS import is present and the plugin is added to your rspack/webpack config.
62-
- Make sure you have the `nativewind/babel` preset applied in your babel config.
79+
Ensure your CSS import is present and the plugin is added to your config.
80+
81+
- **PostCSS errors?**
82+
83+
Double-check that all required dependencies are installed and your `postcss.config.js` is set up.
6384

6485
- **TypeScript issues?**
6586

66-
Follow the [NativeWind TypeScript setup guide](https://www.nativewind.dev/docs/getting-started/installation/frameworkless#6-typescript-setup-optional).
87+
Follow the [NativeWind TypeScript setup guide](https://www.nativewind.dev/getting-started/typescript).
6788

6889
## Further Resources
6990

0 commit comments

Comments
 (0)