kylefang/nativewind
1
0
Fork 0
mirror of https://github.com/zhigang1992/nativewind.git synced 2026-06-16 02:34:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Mark Lawlor
2022-04-03 14:19:08 +10:00
committed by GitHub
parent 803c190963
commit 294869b3d5
1 changed files with 5 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@@ -70,12 +70,8 @@ You can combine it with existing styles
```jsx
<Text className="font-bold" style={styles.text}>
const styles = StyleSheet.create({ text: { color: 'blue' }})
```
## Options
Options can be provided via the babel config
@@ -92,7 +88,7 @@ module.exports = {
Pro | Values | Default | Description
---------|----------------------|----------|----------------------
platform | `native`, `web`, `native-inline`, `native-context` | `native` | Specifies how the className is transformed (see [platforms](#platforms)
tailwindConfig | Path relative to `cwd` | `tailwind.config.js` | Provide a custom `tailwind.config.js`. Useful for setting different breakpoints per platform.
tailwindConfig | Path relative to `cwd` | `tailwind.config.js` | Provide a custom `tailwind.config.js`. Useful for setting different settings per platform.
## How it works
@@ -125,7 +121,7 @@ Requires external tooling | :x:
- import { Text } from "react-native"
+ import { Text, StyleSheet } from "react-native"
- import { TailwindProvider } from "tailwindcss-react-native"
+ import { TailwindProvider, __tailwindMedia } from "tailwindcss-react-native"
+ import { TailwindProvider, __useParseTailwind } from "tailwindcss-react-native"
export function Test() {
return (
@@ -154,7 +150,7 @@ Requires external tooling | :x:
```diff
- import { Text } from "react-native"
+ import { Text, StyleSheet } from "react-native"
+ import { __tailwindMedia } from "tailwindcss-react-native"
+ import { __useParseTailwind } from "tailwindcss-react-native"
export function Test() {
return (
@@ -169,7 +165,7 @@ export function Test() {
### web
| `web` requires `react-native-web@0.18+` (currently in preview). Please see this [PR](https://github.com/necolas/react-native-web/pull/2248) for more info. If your are currently using `<=0.17` you can still use `native` for rendering within a browser.
> `web` requires `react-native-web@0.18+` (currently in preview). Please see this [PR](https://github.com/necolas/react-native-web/pull/2248) for more info. If your are currently using `<=0.17` you can still use `native` for rendering within a browser.
The platform to use when using `react-native-web`. It leaves the className attribute as-is, allowing you to use CSS files for your styling. Because of this, you will need to follow the [TailwindCSS installation steps](https://tailwindcss.com/docs/installation) to include the nessessary `.css` files in your HTML.
@@ -187,11 +183,9 @@ import { Text } from "react-native"
export function Test() {
return (
- <Text className="font-bold">Test</Text>
+ <Text style={__tailwindStyles}>Test</Text>
+ <Text style={{ $$css: true, tailwind: 'font-bold' }}>Test</Text>
)
}
+ const __tailwindStyles = { 'font-bold': { $$css: true, tailwind: 'font-bold' }}
```
##