mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-15 10:17:54 +08:00
74 lines
1.6 KiB
Plaintext
74 lines
1.6 KiB
Plaintext
import StartCoding from "../_start-coding.md";
|
|
import Dependencies from "../_dependencies.mdx";
|
|
import Tailwind from "../_tailwind.mdx";
|
|
import BabelEditor from "../../src/babel-editor";
|
|
|
|
# Babel
|
|
|
|
The default babel configuration will both compile the Tailwind CSS styles and transform any component with the `className` attributed into a `styled` version.
|
|
|
|
This is the recommended configuration as it provides the fastest setup and best DX experience, with zero configuration needed for Tailwind Intellisense within your IDE.
|
|
|
|
## Setup
|
|
|
|
### 1. Install the dependencies
|
|
|
|
<Dependencies />
|
|
|
|
### 2. Setup Tailwindcss
|
|
|
|
<Tailwind />
|
|
|
|
### 3. Configure your babel.config.js
|
|
|
|
```js
|
|
// babel.config.js
|
|
module.exports = {
|
|
plugins: ["nativewind/babel"],
|
|
};
|
|
```
|
|
|
|
<StartCoding />
|
|
|
|
## Playground
|
|
|
|
<BabelEditor initialCode={` `} />
|
|
|
|
## Configuring what is transformed
|
|
|
|
When targeting `Web` you may be using components that should not be transformed.
|
|
|
|
By default native components (e.g. `div`) are not transformed.
|
|
|
|
However if you are using a `web` only library such as `react-select`, you can disabled the transform on components imported from this library.
|
|
|
|
Either by explicitly stating which modules can be transformed.
|
|
|
|
```diff
|
|
// babel.config.js
|
|
module.exports = {
|
|
- plugins: ["nativewind/babel"],
|
|
+ plugins: [
|
|
+ [
|
|
+ "nativewind/babel"
|
|
+ { allowModuleTransform: ["moti"] }
|
|
+ ]
|
|
+ ],
|
|
};
|
|
```
|
|
|
|
Or blocking modules you don't want transformed.
|
|
|
|
```diff
|
|
// babel.config.js
|
|
module.exports = {
|
|
- plugins: ["nativewind/babel"],
|
|
+ plugins: [
|
|
+ [
|
|
+ "nativewind/babel"
|
|
+ { blockModuleTransform: ["react-select"] }
|
|
+ ]
|
|
+ ],
|
|
};
|
|
```
|