tailwindcss-react-native

Use Tailwindcss in your cross platform React Native applications.

This library is currently under active development.

  • ✨ native support for multiple platforms
  • ✨ respects tailwind.config.js
  • ✨ fast refresh compatible
  • ✨ supports dark mode / media queries / arbitrary classes
  • ✨ compatible with existing styles
  • ✨ Server Side Rendering (SSR) on Web (including responsive styles)

Already using another RN library for Tailwind? Find out why you should switch.

Getting started

Install the library

npm install tailwindcss-react-native or yarn add tailwindcss-react-native

Add tailwindcss-react-native/babel to your babel plugins

// babel.config.js
module.exports = {
  plugins: [
    'tailwindcss-react-native/babel'
  ],
}

Add the TailwindProvider to your application

import { TailwindProvider } from 'tailwindcss-react-native'

function MyAppsProviders ({ children }) {
    return (
        <TailwindProvider>{children}</TailwindProvider>
    )
}

tailwindcss peerDependency

This package has a peerDependency of [email protected]. You can install it with npm install tailwindcss or yarn add tailwindcss

Typescript support

Create a file (eg. src/tailwindcss-react-native.d.ts) and paste this line

import "tailwindcss-react-native/types.d"

Web only

web requires [email protected]+ (currently in preview). Please see this PR for more info. If your are currently using <=0.17 you can still use native for rendering within a browser.

If using { platform: 'web' } you will need to follow the follow the TailwindCSS installation steps to include it’s styles in the application.

Usage

Simply add a className attribute to your existing react-native components

<Text className="font-bold">

You can combine it with existing styles

<Text className="font-bold" style={styles.text}>

Or perform computed logic

export function Test({ isBold, isUnderline }) {
  const classNames = [];

  if (isBold) classNames.push("font-bold");
  if (isUnderline) classNames.push("underline");

  return (
    <Text className={classNames.join(" ")}>Hello world!</Text>
  );
}

Options

Options can be provided via the babel config

// babel.config.js
module.exports = {
  plugins: [
    ['tailwindcss-react-native/babel', { platform: 'native' }]
  ],
}
Prop Values Default Description
platform native, web, native-inline, native-context native Specifies how the className is transformed (see platforms
tailwindConfig Path relative to cwd tailwind.config.js Provide a custom tailwind.config.js. Useful for setting different settings per platform.

How it works

Under the hood, tailwindcss-react-native performs these general steps

  1. Use postcss to compile the classes using tailwindcss and other plugins
  2. Convert the CSS styles to the platform specific styles (eg using StyleSheet.create for native)
  3. Remove the className attribute and replace/merge it with the style attribute
  4. Utilises a react hook for matching media queries.

See the platforms documentation for a more detailed explaination)

GitHub

View Github