kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-10 15:48:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: improve babel transform only docs

Browse Source
This commit is contained in:
Mark Lawlor
2022-08-10 11:26:07 -03:00
parent 62ff32f859
commit d1fcc1fc70
3 changed files with 2 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/website/docs/guides/babel-transform-only.md
View File

@@ -1,10 +1,10 @@
import StartCoding from "../\_start-coding-components.md"
import StartCoding from "../\_start-coding.md"
import Dependencies from "../\_dependencies.mdx"
import Tailwind from "../\_tailwind.mdx"
# Babel (transform only)
Some frameworks provide an optimised pipeline for their CSS files. Babel to transform your components
Some frameworks (eg Next.js) provide an optimised pipeline for their CSS output and/or have first-class Tailwind support. In this case, you can use to framework to compile the styles and have Babel simply transform your components.
## Setup

28
apps/website/docs/native/babel-compile-only.md
View File

@@ -1,28 +0,0 @@
import StartCoding from "../\_start-coding-components.md"
import Dependencies from "../\_dependencies.mdx"
import Tailwind from "../\_tailwind.mdx"
# Babel (compile only)
Babel helps reduce the projects boilerplate, but is not required for actual use. This version just compiles and injects the Tailwind CSS styles.
## 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", { mode: "compileOnly" }]],
};
```
<StartCoding />

81
apps/website/docs/native/babel.mdx
View File

@@ -1,81 +0,0 @@
import StartCoding from "../_start-coding.md";
import Dependencies from "../_dependencies.mdx";
import Tailwind from "../_tailwind.mdx";
# Babel
The default babel configuration will both compile/inject 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 support for Tailwind intellisense within your IDE.
```tsx
/* Example how your code will look */
import { Text } from "react-native";
export function MyFancyButton(props) {
return (
<Pressable className="component bg-violet-500 hover:bg-violet-600 active:bg-violet-700">
<Text className="font-bold component-active:font-extrabold" {...props} />;
</Pressable>
);
}
```
## 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 />
## 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"] }
+ ]
+ ],
};
```