tailwind-rn
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.
;; const App = <SafeAreaView style=> <View style=> <View style=> <Text style=> Hello Tailwind </Text> </View> </View> </SafeAreaView>;
tailwind
function returns a simple object with styles, which can be used in any React Native view, such as <View>
, <Text>
and others.
;//=> {// paddingTop: 48,// alignItems: 'center'// }
Supported Utilities
Layout
- Display (only
hidden
andflex
) - Overflow (only
overflow-hidden
,overflow-scroll
andoverflow-visible
) - Position (only
relative
andabsolute
) - Top / Right / Bottom / Left (all except
*-auto
) - Z-Index (all except
z-auto
)
Flexbox
- Flex Direction
- Flex Wrap
- Align Items
- Align Content
- Align Self
- Justify Content
- Flex
- Flex Grow
- Flex Shrink
Spacing
Sizing
- Width (all except
w-auto
andw-screen
) - Min-Width
- Max-Width
- Height (all except
h-auto
andh-screen
) - Min-Height (all except
min-h-screen
) - Max-Height (only
max-h-full
)
Typography
- Font Size
- Font Style
- Font Weight
- Letter Spacing
- Line Height (only fixed line-heights)
- Text Align
- Text Color
- Text Decoration
- Text Transform
Backgrounds
Borders
Effects
Interactivity
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.
; ;//=> '#ebf8ff'