Wondering what’s next for npm?Check out our public roadmap! »

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

    3.0.1 • 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 React from 'react';
    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>
    );
    
    export default App;

    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

    Customization

    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.

    1. Create Tailwind configuration

    See Tailwind's official documentation on configuration to learn more.

    $ npx tailwindcss init
    

    2. Generate styles for 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
    

    3. Create a custom tailwind() function

    Use 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';

    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'

    To get a color with opacity:

    import {getColor} from 'tailwind-rn';
    
    getColor('blue-500 opacity-50');
    //=> 'rgba(66, 153, 225, 0.5)'

    You can use Tailwind's values for color and opacity.

    NOTE: For color you must NOT include the bg- prefix.

    create(styles)

    Create tailwind() and getColor() functions, which use custom styles. API of these functions remains the same.

    See Customization.

    styles

    Type: object

    Styles generated by create-tailwind-rn CLI.

    Install

    npm i tailwind-rn

    DownloadsWeekly Downloads

    1,528

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    167 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar