tailwind-rn

🦎 Use Tailwind CSS in React Native projects

  • Owner: vadimdemedes/tailwind-rn
  • Platform:
  • License:: MIT License
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart

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

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

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.

Overview

Name With Ownervadimdemedes/tailwind-rn
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 2)
Platform
License:MIT License
Release Count13
Last Release Namev4.2.0 (Posted on 2022-02-07 16:49:33)
First Release Namev1.0.0 (Posted on 2020-03-08 16:21:10)
Created At2020-03-08 13:14:48
Pushed At2023-03-13 11:57:37
Last Commit At2022-03-14 11:18:34
Stargazers Count4.2k
Watchers Count24
Fork Count171
Commits Count67
Has Issues Enabled
Issues Count146
Issue Open Count33
Pull Requests Count14
Pull Requests Open Count6
Pull Requests Close Count33
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
To the top