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
1.9K Stars 98 Forks MIT License 48 Commits 21 Opened issues

Description

ğŸ¦Ž Use Tailwind CSS in React Native projects

Services available

!
?

Need anything else?

Contributors list

# 211,274
JavaScr...
TypeScr...
3 commits
# 353,017
emoji-p...
CSS
twemoji
TypeScr...
1 commit
# 35,202
danmaku
vercel
CSS
PHP
1 commit
# 10,637
html5
ssl-cer...
node
gatsbyj...
1 commit
# 238,139
assets-...
paypal
CSS
conemu
1 commit
# 350,970
HTML
reactjs
content...
React
1 commit

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

export default App;

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'

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.

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.