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

Description

🦎 Use Tailwind CSS in React Native projects

942 Stars 50 Forks MIT License 38 Commits 8 Opened issues

Services available

Need anything else?

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 = () => ( Hello Tailwind );

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

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'

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.

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.