Use Tailwind CSS in React Native projects
All styles are generated from Tailwind CSS source and not hard-coded, which makes it easy to keep this module up-to-date with latest changes in Tailwind CSS itself.
$ npm install tailwind-rn
Import tailwind-rn
module and use any of the supported utilities from Tailwind CSS in your React Native views.
import {SafeAreaView, View, Text} from 'react-native';
import tailwind from 'tailwind-rn';
const App = () => (
<SafeAreaView style={tailwind('h-full')}>
<View style={tailwind('pt-12 items-center')}>
<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
<Text style={tailwind('text-blue-800 font-semibold')}>
Hello Tailwind
</Text>
</View>
</View>
</SafeAreaView>
);
tailwind
function returns a simple object with styles, which can be used in any React Native view, such as <View>
, <Text>
and others.
tailwind('pt-12 items-center');
//=> {
// paddingTop: 48,
// alignItems: 'center'
// }
hidden
and flex
)overflow-hidden
, overflow-scroll
and overflow-visible
)relative
and absolute
)*-auto
)z-auto
)w-auto
and w-screen
)h-auto
and h-screen
)min-h-screen
)max-h-full
)oldstyle-nums
, lining-nums
, tabular-nums
and proportional-nums
)text-current
)border-current
)This package exposes a create-tailwind-rn
CLI for creating a custom build of tailwind-rn
using your configuration.
This guide assumes that you already have Tailwind CSS and tailwind-rn
installed.
See Tailwind's official documentation on configuration to learn more.
$ npx tailwindcss init
tailwind-rn
This command will generate a styles.json
file, based on your Tailwind configuration.
Add this file to your version control system, because it's going to be needed when initializing tailwind-rn
.
$ npx create-tailwind-rn
tailwind()
functionUse create()
function to generate the same tailwind()
and getColor()
functions, but with your custom styles applied.
import {create} from 'tailwind-rn';
import styles from './styles.json';
const {tailwind, getColor} = create(styles);
tailwind('text-blue-500 text-opacity-50');
//=> {color: 'rgba(66, 153, 225, 0.5)'}
Initializing tailwind-rn
like that in every file you use it is not convenient.
I'd recommend creating a tailwind.js
file where you do it once and import it everywhere instead:
tailwind.js
import {create} from 'tailwind-rn';
import styles from './styles.json';
const {tailwind, getColor} = create(styles);
export {tailwind, getColor};
You could also create an alias for that file, so that you could import it using an absolute path from anywhere in your project:
// Before
import {tailwind} from '../../../tailwind';
// After
import {tailwind} from 'tailwind';
Type: string[]
Array of Tailwind CSS classes you want to generate styles for.
Get color value from Tailwind CSS color name.
import {getColor} from 'tailwind-rn';
getColor('blue-500');
//=> '#ebf8ff'
Create tailwind()
and getColor()
functions, which use custom styles.
API of these functions remains the same.
See Customization.
Type: object
Styles generated by create-tailwind-rn
CLI.