tailwind-rn

🦎 Use Tailwind CSS in React Native projects

Github 星跟踪图

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

screenshot.jpg

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.

项目概况

主要编程语言JavaScript
编程语言JavaScript
许可证MIT License
最新版本名称v4.2.0
第一版名称v1.0.0
最后发布时间2022-02-07 16:49:33
首次发布2020-03-08 16:21:10
最后一次提交2022-03-14 11:18:34
创建于2020-03-08T13:14:48
推送于2022-04-05T03:46:17
提交数67
关注者数21
名称与所有者vadimdemedes/tailwind-rn
派生数155
星数3.6k
问题数130
打开的问题数23
发布数13
语言数2
拉请求数14
打开的拉请求数3
关闭的拉请求数33
已启用问题?
已启用Wiki?
已存档?
是分叉?
已锁定?
是镜像?
是私有?
To the top