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.
yarn add tailwind-rn
yarn add -D babel-plugin-tailwind-rn-classnameor
npm install --save tailwind-rn
npm install --save-dev babel-plugin-tailwind-rn-classnameAdd it to your .babelrc (or any Babel config file)
{
"plugins": [
"tailwind-rn-classname"
]
}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/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:
import { create } from 'tailwind-rn';
import styles from './styles.json';
const { tailwind, getColor } = create(styles);
export const tw = tailwindthe configuration will be:
{
"plugins": [
[
"tailwind-rn-classname",
{
"tailwindRNExportPath": "./tailwindRN.ts",
"tailwindRNExportName": "tw"
}
]
]
}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"
]
}
}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>
);
<Text className="pt-12 items-center" />↓ ↓ ↓ ↓ ↓ ↓
<Text style={[{ paddingTop: 48, alignItems: 'center' }]} /><Text className="pt-12 items-center" style={[{ color: 'blue' }]} />↓ ↓ ↓ ↓ ↓ ↓
<Text style={[{ paddingTop: 48, alignItems: 'center' }, { color: 'blue' }]} /><Text className={large ? 'px-12' : 'px-4'} />↓ ↓ ↓ ↓ ↓ ↓
import tailwind from 'tailwind-rn';
<Text style={[tailwind(large ? 'px-12' : 'px-4')]} /><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')]} /><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' }]} /><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' }]} />{
"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
Please feel free to tell me!
This package is an open-sourced software licensed under the MIT license.
Issues and PRs are obviously welcomed and encouraged, for new features as well as documentation.