Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mathieutu/babel-plugin-tailwind-rn-classname

Babel plugin to be able to use your tailwind classNames in react-native, with automatic usage of classnames.
https://github.com/mathieutu/babel-plugin-tailwind-rn-classname

babel-plugin react react-native tailwind

Last synced: about 2 months ago
JSON representation

Babel plugin to be able to use your tailwind classNames in react-native, with automatic usage of classnames.

Awesome Lists containing this project

README

        

# babel-plugin-tailwind-rn-classname

[![Version](https://img.shields.io/npm/v/babel-plugin-tailwind-rn-classname)](https://www.npmjs.com/package/babel-plugin-tailwind-rn-classname?activeTab=versions)
[![Downloads](https://img.shields.io/npm/dt/babel-plugin-tailwind-rn-classname)](https://www.npmjs.com/package/babel-plugin-tailwind-rn-classname)
[![License](https://img.shields.io/github/license/mathieutu/babel-plugin-tailwind-rn-classname)](https://github.com/mathieutu/babel-plugin-tailwind-rn-classname/blob/master/LICENSE)
[![100% Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)](https://github.com/mathieutu/babel-plugin-tailwind-rn-classname/actions?query=workflow%3A%22Run+tests%22)

Babel plugin to use your tailwind classes directly in React Native.

You will have standard autocompletion from you IDE, and your tailwind plugins will work like in a standard React app.

It has an optimised behaviour:

it detects static classes and convert them to object directly at transpilation time for better performances, and let the
dynamic ones for runtime.

It uses [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn) package under the hood, which is a peer dependency.

header demo

## Installation

```shell
yarn add tailwind-rn
yarn add -D babel-plugin-tailwind-rn-classname
```

or

```shell
npm install --save tailwind-rn
npm install --save-dev babel-plugin-tailwind-rn-classname
```

## Setup

### Basic

Add it to your `.babelrc` (or any Babel config file)

```json
{
"plugins": [
"tailwind-rn-classname"
]
}
```

### Custom

If you want to customise your styles as described in
the [tailwind-rn documentation](https://github.com/vadimdemedes/tailwind-rn#customization), you can pass options to the
plugin:

```json
{
"plugins": [
[
"tailwind-rn-classname",
{
"tailwindRNExportPath": "my/custom/file",
"tailwindRNExportName": "tailwind"
}
]
]
}
```

| option | description | default value |
|------------------------|-----------------------------------------------------------------------------------------------|-----------------------|
| `tailwindRNExportPath` | Path to your file from your current working directory (usualy same than your `package.json`) | `tailwind-rn` package |
| `tailwindRNExportName` | Name of your export in the file | `default` |

So considering a root `tailwindRN.ts` file which contains:

```js
import { create } from 'tailwind-rn';
import styles from './styles.json';

const { tailwind, getColor } = create(styles);

export const tw = tailwind
```

the configuration will be:

```json
{
"plugins": [
[
"tailwind-rn-classname",
{
"tailwindRNExportPath": "./tailwindRN.ts",
"tailwindRNExportName": "tw"
}
]
]
}
```

### Typescript

To be allowed to use a `className` attribute on all your component,
you have to add the `babel-plugin-tailwind-rn-classname` types to your "types" array in `tsconfig.json`.

```json
{
"compilerOptions": {
"types": [
"babel-plugin-tailwind-rn-classname"
]
}
}
```

## Usage

Write your tailwind classes like you would do on standard React app. You can find the list of supported utilities
on [tailwind-rn documentation](https://github.com/vadimdemedes/tailwind-rn#supported-utilities)

```jsx
import { SafeAreaView, View, Text } from 'react-native';

const Component = ({ isAlert = false }) => (




Hello Tailwind




);
```

demo screenshot

### Static `className`
```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

### Static `className` and `style`

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

### Dynamic `className`

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx
import tailwind from 'tailwind-rn';

```

### Dynamic and Static `className`

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx
import tailwind from 'tailwind-rn';

```

### Dynamic and Static `className` and `styles`

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx
import tailwind from 'tailwind-rn';

```

### Dynamic and Static `className` and `styles`

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx
import tailwind from 'tailwind-rn';

```

### Custom import with configuration

```json
{
"tailwindRNExportPath": "./tailwindRN",
"tailwindRNExportName": "tw"
}
```
```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx
import { tw } from '/absolute/path/to/my/project/tailwindRN';

```

You can find all this cases and more in [the tests](./__tests__/index.spec.ts)

## A bug, a question?

Please feel free to [tell me](https://github.com/mathieutu/babel-plugin-tailwind-rn-classname/issues/new)!

## License

This package is an open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).

## Contributing

Issues and PRs are obviously welcomed and encouraged, for new features as well as documentation.