https://github.com/cevr/re-tailwind-rn
Rescript bindings for tailwind-rn
https://github.com/cevr/re-tailwind-rn
Last synced: 8 months ago
JSON representation
Rescript bindings for tailwind-rn
- Host: GitHub
- URL: https://github.com/cevr/re-tailwind-rn
- Owner: cevr
- Created: 2020-10-04T00:00:30.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-10-04T02:52:58.000Z (over 5 years ago)
- Last Synced: 2025-03-18T12:58:55.066Z (over 1 year ago)
- Language: Reason
- Size: 12.7 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# re-tailwind-rn
Rescript bindings for [rn-tailwind](https://github.com/vadimdemedes/tailwind-rn)
## Install
```bash
npm install tailwind-rn re-tailwind-rn
```
## bsconfig.json
```
{
...
"bs-dependencies": ["reason-react-native", "reason-react", "re-tailwind-rn"]
}
```
## Usage
Use the `Tw` module
```reason
open ReactNative;
[@react.component]
let make = () =>
"Hello Tailwind"->React.string
;
```
## Usage with [custom config](https://github.com/vadimdemedes/tailwind-rn#customization)
```reason
open ReactNative;
[@module "./styles.json"] external stylesConfig: Js.Json.t = "default"
let tw = Tw.create(stylesConfig)
[@react.component]
let make = () =>
"Hello Tailwind"->React.string
;
```
### Recommended to use with [re-classnames](https://github.com/MinimaHQ/re-classnames)
```reason
open ReactNative;
type styles = {
container: Style.t,
text: Style.t,
};
let styles = {
container: Tw.make("flex justify-start rounded-md px-2 py-2 my-2"),
text: Tw.make("flex-grow text-gray-700 font-medium px-2"),
};
[@react.component]
let make = (~todo, ~completed) => {
Cn.on(completed))),
|])}>
todo->React.string
;
};
```
## API
### make
```reason
type make = string => ReactNative.Style.t;
```
### color
```reason
type color = string => string;
```
### create
```reason
type created = {
[@as "tailwind"]
make,
[@as "getColor"]
color,
};
type create = Js.Json.t => created;
```