Skip to content
A react native style system based on TailwindCSS
Branch: master
Clone or download
TVke Merge pull request #5 from davidgovea/update-flex-types
Typescript definitions: rename flexGrow/flexShrink types
Latest commit f8a1962 Jun 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Update tailwindCSS to v1.0.4 Jun 11, 2019
corePlugins Update flexGrow and flexShrink to match tailwindcss original Jun 4, 2019
util Update flex value handling and tests Jun 3, 2019
.gitignore Update tests to cover more and Remove redundant transforms in `transl… May 28, 2019
.npmignore
LICENSE Add MIT license Jun 4, 2019
README.md Add `theme` as a extra accessor May 16, 2019
babel.config.js Add tests, Separate corePlugins to separate files, Improve calculatio… May 3, 2019
color.js Add 'tailwind' as extra option for root StyleSheet object May 15, 2019
index.d.ts rename flexGrow/flexShrink types Jun 17, 2019
index.js Add `theme` as a extra accessor May 16, 2019
jest.config.js Fix code style May 6, 2019
package-lock.json Update tailwindCSS to v1.0.4 Jun 11, 2019
package.json Update tailwindCSS to v1.0.4 Jun 11, 2019
tailwind.js

README.md

react-native-tailwindcss npm npm

A react native styling system, based on TailwindCSS

Easily apply styles to react native components in a tailwindCSS-like fashion. The utility classes are transformed to object valid names and are all children from an object t, tw, theme or tailwind.

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

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

Use the tailwind.config.js file as you know and love to customize or just use the 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} />

React native is no css styling so there are some "special cases". Some elements are not necessary and are ignored. Things like breakpoints, plugins, corePlugin disabling, prefixes, separators, variation and the important toggle.

You should also take a look at some special cases:

Usage

Install this package

npm install react-native-tailwindcss

Initialize a new tailwindCSS config file

npx tailwind init

or the complete tailwindCSS config file

npx tailwind init --full

or just use an existing one.

General conversions

Every 'class' becomes CamelCase instead of tailwindCSS default - separated.

border-t-2 => tw.borderT2

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

-mt-2 => tw._mt2

A / also becomes a _ to separate the numbers.

w-1/3 => tw.w1_3

These conversions happen also when adding new items to the config file. If there is anything not working or working different then expected please create an issue.

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 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, has also an S and E 'class' for start and end.

Testing

npm run test
You can’t perform that action at this time.