Need help with tailwind-rn?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vadimdemedes
2.9K Stars 130 Forks MIT License 53 Commits 9 Opened issues

Description

ğŸ¦Ž Use Tailwind CSS in React Native projects

Services available

!
?

Need anything else?

Contributors list

# 56,077
JavaScr...
TypeScr...
Electro...
React
7 commits
# 36,779
danmaku
vercel
CSS
PHP
1 commit
# 324,240
JavaScr...
HTML
reactjs
React
1 commit
# 101,747
Python
assets-...
HTML
paypal
1 commit
# 142,127
JavaScr...
PHP
Laravel
Algolia
1 commit
# 13,573
html5
gatsbyj...
gatsby
economi...
1 commit

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 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.

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></mycomponent>
    </tailwindprovider>
);

export default App;
  1. Use Tailwind in React Native!
import {useTailwind} from 'tailwind-rn';

const MyComponent = () =&gt; {
    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
, 
 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 = () => ( );

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.