Use Tailwind CSS in React Native projects

tailwind-rn

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.

Install

$ npm install tailwind-rn

Usage

Import tailwind-rn module and use any of thefrom Tailwind CSS in your React Native views.

import {SafeAreaView, View} 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'
//   }

Supported Utilities

Layout

• Display (only hidden and flex )
• Overflow (only overflow-hidden , overflow-scroll and overflow-visible )
• Position (only relative and absolute )
• Top / Right / Bottom / Left (all except *-auto )
• Z-Index (all except z-auto )

Flexbox

• Flex Direction
• Flex Wrap
• Align Items
• Align Content
• Align Self
• Justify Content
• Flex
• Flex Grow
• Flex Shrink

Spacing

• Padding
• Margin

Sizing

• Width (all except w-auto and w-screen )
• Min-Width
• Max-Width
• Height (all except h-auto and h-screen )
• Min-Height (all except min-h-screen )
• Max-Height (only max-h-full )

Typography

• Font Size
• Font Style
• Font Weight
• Letter Spacing
• Line Height
• Text Align
• Text Color
• Text Decoration
• Text Transform

Backgrounds

• Background Color

Borders

• Border Color
• Border Style
• Border Width
• Border Radius

Effects

• Opacity

Interactivity

• Pointer Events

API

tailwind(classNames)

classNames

Type: string[]

Array of Tailwind CSS classes you want to generate styles for.

getColor(color)

Get color value from Tailwind CSS color name.

import {getColor} from 'tailwind-rn';

getColor('blue-500');
//=> '#ebf8ff'