react-native-tailwindcss

Why?Installation Translations Special cases Directional layout

Core Concepts

Flexible styling

Customization

Configuration Theme Configuration Customizing Colors Customizing Spacing

Layout

Display Object Fit Overflow Position Top / Right / Bottom / Left Tint Color Z-Index

Typography

Font Family Font Size Font Style Font Weight Letter Spacing Line Height Text Alignment Text Color Text Decoration Text Transform Vertical Alignment (Android)

Backgrounds

Background Color

Borders

Border Color Border Style Border Width Border Radius

Flexbox

Flex Direction Flex Wrap Align Items Align Content Align Self Justify Content Flex Flex Grow Flex Shrink

Spacing

Sizing

Width Min-Width Max-Width Height Min-Height Max-Height

Effects

Box Shadow Text Shadow Opacity

Opacity

Class	Properties
t.opacity100	opacity: 1
t.opacity75	opacity: 0.75
t.opacity50	opacity: 0.5
t.opacity25	opacity: 0.25
t.opacity0	opacity: 0

Example

.opacity100

.opacity75

.opacity50

.opacity25

.opacity0

react-native-tailwindcss

TVke
tvke91@gmail.com

A react-native style system based on TailwindCSS that let's you 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.