react-native-tailwindcss

A react-native styling system, based on TailwindCSS

Easily apply styles to react native components in a tailwindCSS-like fashion.

import { c } from 'react-native-tailwindcss';

<View style={c('absolute inset-0 p-4 bg-blue-500 -mx-2 w-1/2')} />

Use the tailwind.config.js file you know and love, to customize your styles or just use default tailwind styles.

In react native, sometimes you only need a color value. We've got you covered. The color object contains all your defined colors.

import { color } from 'react-native-tailwindcss';

<StatusBar backgroundColor={color.blue500} />

Usage

Install this package

# Using npm
npm install react-native-tailwindcss

# Using Yarn
yarn add react-native-tailwindcss

Then initialize a new tailwindCSS config file

npx RNtailwindcss

or use an existing one.

Usage with styled-components

react-native-tailwindcss plays nicely with the popular styled-components library.

Simply use the array syntax within the interpolated template literal:

import { Text, View } from 'react-native';
import { t } from 'react-native-tailwindcss';
import styled from 'styled-components/native';

const SView = styled(View)`
  ${[t.mB4, t.bgGray200, t.rounded, t.p3]}
`;

<SView>
  <Text>Some unstyled text in a styled view</Text>
</SView>

🧐 Hmmm... You need custom configs

import { Tailwind } from 'react-native-tailwindcss/tailwind';

const tailwind = new Tailwind(yourCustomConfig);
const t = tailwind.style;

<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500, t._mx2, t.w1_2]} />

// OR
const c = tailwind.converter;
<View style={c('absolute inset-0 p-4 bg-blue-500 -mx-2 w-1/2')} />

Using in Hooks

import {View} from 'react-native';
import {useDarkMode} from 'react-native-dynamic'
import { Tailwind } from 'react-native-tailwindcss/tailwind';

const useTailwindCss = () => {
    const isDarkMode = useDarkMode();

    const tailwind = new Tailwind({
        theme: {
            extend: {
                colors: {
                    primary: isDarkMode? '#FFFFFF' : '#000000'
                }
            }
        }
    });
    
    return tailwind.converter;
};

const MyComponent = () => {
    const c = useTailwindCss();
    
    return <View style={c('absolute inset-0 p-4 bg-blue-500 -mx-2 w-1/2')} />

};

General Conventions

Every 'class' uses the camelCase naming convention instead of tailwindCSS's kebab-case.

border-t-2 => t.borderT2

A - in the beginning of a 'class' becomes a _.

-mt-2 => t._mT2

A / also becomes a _ to separate the numbers.

w-1/3 => t.w1_3

• more information in the docs

Special cases

Shadows

• Android does not use the shadow props to cast shadows, just an elevation value.

  • The elevation value is by default the shadowRadius / 2
  • It can be changed by adding the elevation value after the shadow separated by a ,.
    (eg.: default: '0 1px 3px 0 rgba(0, 0, 0, .1), 5')

• Text shadows use the same shadows as box shadows

• Multiple shadows are not supported in React native. (the first shadow will be used)

• inner and outline shadows are ignored

Directional Layout

When you need directional layout, React Native offers some variations to make life easier. Instead of using 'left' or 'right', 'start' and 'end' can be used.

react-native-tailwindcss offers classes to embrace this way of directional layout. Every 'class' with L or R, also has a corresponding S and E 'class' for start and end.

Testing

npm run test