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 tailwindcss@3.x.x. 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 react-native-web@0.18+ (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)