search

vadimdemedes / tailwind-rn

🦎 Use Tailwind CSS in React Native projects
MIT License
4.24k stars 170 forks source link

readme

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.

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 ``` 2. Install Tailwind and `concurrently`. ``` $ npm install --save-dev tailwindcss postcss concurrently ``` 3. 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**: ```diff module.exports = { + corePlugins: require('tailwind-rn/unsupported-core-plugins') }; ``` Make sure to configure [`content`](https://tailwindcss.com/docs/content-configuration) part of the config in **tailwind.config.js** to point to your JavaScript files to speed up compilation. 4. Add scripts to build Tailwind styles in package.json. ```diff { "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\"" } } ``` 5. 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. 6. Import [`TailwindProvider`](#tailwindprovider) and `tailwind.json` in the root of your app and wrap the root of your app with it: ```jsx import {TailwindProvider} from 'tailwind-rn'; import utilities from './tailwind.json'; const App = () => ( ); export default App; ``` 7. Use Tailwind in React Native! ```jsx import {useTailwind} from 'tailwind-rn'; const MyComponent = () => { const tailwind = useTailwind(); return Hello world; }; ```

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