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 1 year ago
JSON representation
Babel plugin to be able to use your tailwind classNames in react-native, with automatic usage of classnames.
- Host: GitHub
- URL: https://github.com/mathieutu/babel-plugin-tailwind-rn-classname
- Owner: mathieutu
- License: mit
- Created: 2021-02-09T08:22:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-21T13:25:04.000Z (almost 5 years ago)
- Last Synced: 2025-03-30T02:34:02.521Z (about 1 year ago)
- Topics: babel-plugin, react, react-native, tailwind
- Language: TypeScript
- Homepage:
- Size: 3.23 MB
- Stars: 31
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# babel-plugin-tailwind-rn-classname
[](https://www.npmjs.com/package/babel-plugin-tailwind-rn-classname?activeTab=versions)
[](https://www.npmjs.com/package/babel-plugin-tailwind-rn-classname)
[](https://github.com/mathieutu/babel-plugin-tailwind-rn-classname/blob/master/LICENSE)
[](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.
## 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
);
```
### 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.