Skip to content

Commit 1849975

Browse files
authored
docs: update docs on nativewind setup to be clearer (#1317)
1 parent 599f3d8 commit 1849975

1 file changed

Lines changed: 4 additions & 25 deletions

File tree

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

Lines changed: 4 additions & 25 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#1-install-nativewind)
21+
1. [Install NativeWind](https://www.nativewind.dev/docs/getting-started/installation/frameworkless) - follow everything except the metro setup.
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,24 +37,6 @@ 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-
5840
To add the plugin to your Re.Pack configuration, update your `rspack.config.js` or `webpack.config.js` as follows:
5941

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

7759
- **Styles not applying?**
7860

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.
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.
8463

8564
- **TypeScript issues?**
8665

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

8968
## Further Resources
9069

0 commit comments

Comments
 (0)