npm

tailwind-ui-rn
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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, 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'
//   }

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'

Package Sidebar

Install

npm i tailwind-ui-rn

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

90.2 kB

Total Files

7

Last publish

Collaborators

  • mattapperson