rn-tailwind

Use Tailwind CSS in [React Native] and [React Native Web] (https://reactnative.dev) projects

Install

$ npm install rn-tailwind

Usage

Import TailwindUIProvider from the rn-tailwind module, which is rendered at the top of our component tree.

import React from 'react'
import App from './components/App'
import { TailwindUIProvider } from "rn-tailwind";

const Index = () => (
  <TailwindUIProvider>
    <App />
  </TailwindUIProvider>,
)

Than import rn-tailwind module and use any of the supported utilities from Tailwind CSS in your React Native views.

import { View, Text } from "rn-tailwind";

const App = () => (
  <View className="h-full xl:h-1/2">
    <View className="pt-12 xl:pt-4 items-center">
      <View className="bg-blue-200 px-3 py-1 rounded-full">
        <Text className="text-blue-800 font-semibold">Gang Gang </Text>
      </View>
    </View>
  </View>
);

Supported Utilities

Media Queries

• Responsive Design

Effects

• Opacity
• Box Shadow

Responsive

• Responsive Design

Layout

• Display (only hidden and flex)
• Overflow (only overflow-hidden, overflow-scroll and overflow-visible)
• Position (only relative and absolute)
• 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

• Padding
• Margin

Sizing

• Width (all except w-auto and w-screen)
• Min-Width
• Max-Width
• Height (all except h-auto and h-screen)
• Min-Height (all except min-h-screen)
• Max-Height (only max-h-full)

Typography

• Font Size
• Font Style
• Font Weight
• Font Variant Numeric (only oldstyle-nums, lining-nums, tabular-nums and proportional-nums)
• Letter Spacing (must be used with font size utilities)
• Line Height (only fixed line-heights)
• Text Align
• Text Color (all except text-current)
• Text Opacity
• Text Decoration
• Text Transform

Backgrounds

• Background Color
• Background Opacity

Borders

• Border Color
• Border Opacity
• Border Style (all except border-current)
• Border Width
• Border Radius