babel-plugin-tailwind-rn-classname

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 package under the hood, which is a peer dependency.

Installation

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

or

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)

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

Custom

If you want to customise your styles as described in the tailwind-rn documentation, you can pass options to the plugin:

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

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

So considering a root tailwindRN.ts file which contains:

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

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

export const tw = tailwind

the configuration will be:

{
  "plugins": [
    [
      "tailwind-rn-classname",
      {
        "tailwindRNExportPath": "./tailwindRN",
        "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.

{
  "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

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

const Component = ({ isAlert = false }) => (
  <SafeAreaView className="h-full">
    <View className="pt-12 items-center">
      <View className={`${isAlert ? 'bg-orange-200' : 'bg-blue-200'} px-3 py-1 rounded-full`}>
        <Text className={`${isAlert ? 'text-orange-800' : 'text-blue-800'} font-semibold`}>
          Hello Tailwind
        </Text>
      </View>
    </View>
  </SafeAreaView>
);

Static className

<Text className="pt-12 items-center" />

↓ ↓ ↓ ↓ ↓ ↓

<Text style={[{ paddingTop: 48, alignItems: 'center' }]} />

Static className and style

<Text className="pt-12 items-center" style={[{ color: 'blue' }]} />

↓ ↓ ↓ ↓ ↓ ↓

<Text style={[{ paddingTop: 48, alignItems: 'center' }, { color: 'blue' }]} />

Dynamic className

<Text className={large ? 'px-12' : 'px-4'} />

↓ ↓ ↓ ↓ ↓ ↓

import tailwind from 'tailwind-rn';

<Text style={[tailwind(large ? 'px-12' : 'px-4')]} />

Dynamic and Static className

<Text className={`pt-12 ${large ? 'px-12' : 'px-4'} items-center`} />

↓ ↓ ↓ ↓ ↓ ↓

import tailwind from 'tailwind-rn';

<Text style={[{ paddingTop: 48, alignItems: 'center' }, tailwind(large ? 'px-12' : 'px-4')]} />

Dynamic and Static className and styles

<Text className={`pt-12 ${large ? 'px-12' : 'px-4'} items-center`} style={{color: 'blue'}}/>

↓ ↓ ↓ ↓ ↓ ↓

import tailwind from 'tailwind-rn';

<Text style={[{ paddingTop: 48, alignItems: 'center' }, tailwind(large ? 'px-12' : 'px-4'), { color: 'blue' }]} />

Dynamic and Static className and styles

<Text className={`pt-12 ${large ? 'px-12' : 'px-4'} items-center`} style={{color: 'blue'}}/>

↓ ↓ ↓ ↓ ↓ ↓

import tailwind from 'tailwind-rn';

<Text style={[{ paddingTop: 48, alignItems: 'center' }, tailwind(large ? 'px-12' : 'px-4'), { color: 'blue' }]} />

Custom import with configuration

{
  "tailwindRNExportPath": "./tailwindRN",
  "tailwindRNExportName": "tw"
}

<Text className={large ? 'px-12' : 'px-4'}/>

↓ ↓ ↓ ↓ ↓ ↓

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

<Text style={[tw(large ? 'px-12' : 'px-4')]} />

You can find all this cases and more in the tests

A bug, a question?

Please feel free to tell me!

License

This package is an open-sourced software licensed under the MIT license.

Contributing

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