Netherworld's Pretend Minibar

    tailwind-rn

    4.2.0 • Public • Published

    tailwind-rn Status

    Use Tailwind in React Native projects

    All styles are generated directly from Tailwind's output, so they're always up-to-date.

    • JIT mode
    • Responsive breakpoints (e.g. sm, md, lg)
    • Dark mode
    • Custom configuration

    Migrating from v3.x?

    Install

    $ npm install tailwind-rn
    

    Getting Started

    Run the following command to automatically add tailwind-rn to your React Native project:

    $ npx setup-tailwind-rn
    

    It will do most of the setup for you, but you'll have to follow a few more instructions from setup-tailwind-rn to finish the process.

    Manual setup
    1. Install tailwind-rn.
    $ npm install tailwind-rn
    
    1. Install Tailwind and concurrently.
    $ npm install --save-dev tailwindcss postcss concurrently
    
    1. Create Tailwind config and necessary files.
    $ npx tailwindcss init
    $ echo '@tailwind utilities;' > input.css
    

    These commands will create the following files:

    • tailwind.config.js - Tailwind configuration file.
    • input.css - Entrypoint for Tailwind compiler. It's required to override the output of Tailwind, so that it doesn't generate CSS for resetting browser styles, which will cause tailwind-rn to fail.

    Disable unsupported utilities by adding this line to your tailwind.config.js:

    module.exports = {
    +	corePlugins: require('tailwind-rn/unsupported-core-plugins')
    };

    Make sure to configure content part of the config in tailwind.config.js to point to your JavaScript files to speed up compilation.

    1. Add scripts to build Tailwind styles in package.json.
    {
    	"scripts": {
    +		"build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
    +		"dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
    	}
    }
    1. Build Tailwind styles in watch mode.
    $ npm run dev:tailwind
    

    After styles are built, you'll see two more files:

    • tailwind.css - CSS generated by Tailwind.
    • tailwind.json - The same CSS, but converted into JSON, so that tailwind-rn can understand it.
    1. Import TailwindProvider and tailwind.json in the root of your app and wrap the root of your app with it:
    import {TailwindProvider} from 'tailwind-rn';
    import utilities from './tailwind.json';
    
    const App = () => (
    	<TailwindProvider utilities={utilities}>
    		<MyComponent />
    	</TailwindProvider>
    );
    
    export default App;
    1. Use Tailwind in React Native!
    import {useTailwind} from 'tailwind-rn';
    
    const MyComponent = () => {
    	const tailwind = useTailwind();
    
    	return <Text style={tailwind('text-blue-600')}>Hello world</Text>;
    };

    Usage

    Use useTailwind React hook and apply any of the supported utilities from Tailwind in your React Native views.

    import React from 'react';
    import {SafeAreaView, View, Text} from 'react-native';
    import {useTailwind} from 'tailwind-rn';
    
    const Hello = () => {
    	const tailwind = useTailwind();
    
    	return (
    		<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 Hello;

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

    CLI

    $ tailwind-rn --help
    
      Use Tailwind CSS in React Native projects
    
      Usage
        $ tailwind-rn [options]
    
      Options
        -i, --input    Path to CSS file that Tailwind generates (default: tailwind.css)
        -o, --output   Output file (default: tailwind.json)
        -w, --watch    Watch for changes and rebuild as needed
    
    

    Run tailwind-rn CLI to transform the CSS generated by Tailwind into a JSON file that can be consumed by TailwindProvider. Add --watch flag to watch for changes and build styles continuously, which is useful for development.

    API

    TailwindProvider

    utilities

    Type: object

    Parsed JSON object of styles generated by tailwind-rn CLI stored in tailwind.json by default.

    import {TailwindProvider} from 'tailwind-rn';
    import utilities from './tailwind.json';
    
    const App = () => (
    	<TailwindProvider utilities={utilities}>
    		<MyComponent />
    	</TailwindProvider>
    );

    colorScheme

    Type: string

    Override the default color scheme. Possible values are light or dark.

    import {TailwindProvider} from 'tailwind-rn';
    import utilities from './tailwind.json';
    
    const App = () => (
    	<TailwindProvider utilities={utilities} colorScheme="dark">
    		<MyComponent />
    	</TailwindProvider>
    );

    useTailwind

    React hook, which returns a tailwind function, that accepts a string with class names. This function returns an object of styles, which can be applied to a React Native view via style property.

    Note: Add TailwindProvider above the component where you're using this hook.

    import {useTailwind} from 'tailwind-rn';
    
    const MyComponent = () => {
    	const tailwind = useTailwind();
    
    	return <Text style={tailwind('text-blue-600')}>Hello world</Text>;
    };

    Supported Utilities

    Modifiers

    Layout

    Flexbox

    Spacing

    Sizing

    Typography

    Backgrounds

    Borders

    Effects

    Interactivity

    Install

    npm i tailwind-rn

    DownloadsWeekly Downloads

    7,037

    Version

    4.2.0

    License

    MIT

    Unpacked Size

    36.2 kB

    Total Files

    34

    Last publish

    Collaborators

    • vdemedes