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>
);
className
Static <Text className="pt-12 items-center" />
↓ ↓ ↓ ↓ ↓ ↓
<Text style={[{ paddingTop: 48, alignItems: 'center' }]} />
className
and style
Static <Text className="pt-12 items-center" style={[{ color: 'blue' }]} />
↓ ↓ ↓ ↓ ↓ ↓
<Text style={[{ paddingTop: 48, alignItems: 'center' }, { color: 'blue' }]} />
className
Dynamic <Text className={large ? 'px-12' : 'px-4'} />
↓ ↓ ↓ ↓ ↓ ↓
import tailwind from 'tailwind-rn';
<Text style={[tailwind(large ? 'px-12' : 'px-4')]} />
className
Dynamic and Static <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')]} />
className
and styles
Dynamic and Static <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' }]} />
className
and styles
Dynamic and Static <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.