Skip to content
Use Tailwind CSS in React Native projects
JavaScript TypeScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.dependabot Add dependabot config Mar 8, 2020
.github/workflows
.editorconfig Init Mar 8, 2020
.gitattributes Init Mar 8, 2020
.gitignore Init Mar 8, 2020
.npmrc Init Mar 8, 2020
build.js Fix line-height support Mar 29, 2020
header.jpg Add header image Mar 8, 2020
index.d.ts Add TypeScript types Mar 29, 2020
index.js Return empty object when no class names are passed (#6) Mar 29, 2020
index.test-d.ts
license Init Mar 8, 2020
package.json 1.0.2 Mar 29, 2020
readme.md
screenshot.jpg Init Mar 8, 2020
test.js Return empty object when no class names are passed (#6) Mar 29, 2020

readme.md

tailwind-rn Status

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 the supported utilities from 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

Flexbox

Spacing

Sizing

Typography

Backgrounds

Borders

Effects

Interactivity

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'
You can’t perform that action at this time.