Special cases

Because react-native uses Yoga as styling engine and the native platforms differs from some CSS standards there are some special cases.

react-native uses flex-box styling as base, the rules are:

  • every element is display: flex
  • the whole layout is flex-direction: column

This makes it a bit different from styling a site but it is a bit of an improvement as it has no backwards compatibility issues.

The golden advise:

When there looks something strange use t.flex1.

Fallback customization

Shadows

  • Android does not use the shadow props to cast shadows, just an elevation value.
    • The elevation value in react-native-tailwindcss 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.

direction

React Native differences

Added properties

In react-native there are some extra style props then Tailwind CSS implements. react-native-tailwindcss does support these with the available options:

Style property Options react-native-tailwindcss docs link
backfaceVisibility ‘visible’, ‘hidden’ t.backfaceHidden backface-visibility
resizeMode ‘contain’, ‘cover’, ‘stretch’, ‘center’, ‘repeat’ t.resizeCover object-fit
tintColor (colors) t.tintBlack tint-color
textShadow (boxShadow) t.textShadowMd text-shadow
includeFontPadding true, false t.fontPaddingFalse font-padding
direction ‘inherit’, ‘ltr’, ‘rtl’ t.directionRtl direction

Not supported properties

Layout

CSS property Reason
object-position can be easily recreated
visibility display: flex or none
float not needed by t.flexRow

Typography

CSS property Reason
font-smoothing  not supported
::placeholder{color}  usable as prop not styles
white-space  usable as prop not styles
word-break  usable as prop not styles

Backgrounds

CSS property Reason
background-attachment  not supported
background-position  not supported
background-repeat  use the object-fit style
background-size  use the object-fit style

Tables

CSS property Reason
border-collapse  no tables
table-layout  no tables

Interactivity

CSS property Reason
pointer-events usable as prop not styles
order not supported
user-select not supported
resize not supported
cursor not supported
appearance not supported

SVG

CSS property Reason
fill svg styling is not supported (react-native-svg)
stroke svg styling is not supported (react-native-svg)

Accessibility

CSS property Reason
screen-readers not used in styles check the docs

If there is anything not working or working different then expected please create an issue.