Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



simple, expressive API for tailwindcss + react-native

Version published
Install size
40.3 MB



Tailwind React Native Classnames 🏄‍♂️

A simple, expressive API for TailwindCSS + React Native, written in TypeScript

import { View, Text } from 'react-native';
import tw from 'tailwind-react-native-classnames';

const MyComponent = () => (
  <View style={tw`p-4 android:pt-2 bg-red-300 flex-row`}>
    <Text style={tw`text-md tracking-wide`}>Hello World</Text>
🚀  V2 Now in Beta 🚀

Help us beta-test the new V2 re-write, including dark-mode, breakpoints, JIT-mode, and more. Docs and migration guide over here.


The default export is an ES6 Tagged template function which is nice and terse for the most common use case -- passing a bunch of space-separated Tailwind classes and getting back a react-native style object:

import tw from 'tailwind-react-native-classnames';

tw`pt-6 bg-blue-100`;
// -> { paddingTop: 24, backgroundColor: 'rgba(219, 234, 254, 1)' }

In the spirit of Tailwindcss's intuitive responsive prefix syntax, tailwind-react-native-classnames adds support for platform prefixes to conditionally apply styles based on the current platform:

// 😎 styles only added if platform matches
tw`ios:pt-4 android:pt-2`;

You can also use for handling more complex class name declarations. The api for this function is directly taken from the excellent classnames package.

// pass multiple args'text-sm', 'bg-blue-100', 'flex-row mb-2');

// arrays of classnames work too['text-sm', 'bg-blue-100']);

// falsy stuff is ignored, so you can do conditionals like this && 'bg-blue-100');

// { [className]: boolean } style - key class only added if value is `true`{
  'bg-blue-100': isActive,
  'text-red-500': invalid,

// or, combine tailwind classes with plain react-native style object:'bg-blue-100', { elevation: 3, lineHeight: 13.5 });

// mix and match input styles as much as you want'bg-blue-100', ['flex-row'], { 'text-xs': true }, { fontSize: 9 });

The tw function also has a method color that can be used to get back a string value of a tailwind color. Especially useful if you're using a customized color pallette.

// -> "rgba(219, 234, 254, 1)"

You can import the main tw function and reach for only when you need it:

import tw from 'tailwind-react-native-classnames';

const MyComponent = () => (
  <View style={tw`bg-blue-100`}>
    <Text style={'text-md', invalid && 'text-red-500')}>Hello</Text>

...or if the tagged template function isn't your jam, just import as tw:

import { style as tw } from 'tailwind-react-native-classnames';

const MyComponent = () => (
  <View style={tw('bg-blue-100', invalid && 'text-red-500')}></View>


npm install tailwind-react-native-classnames


You can use tailwind-react-native-classnames right out of the box if you haven't customized your tailwind.config.js file at all. But more likely you've got some important app-specific tailwind customizations you'd like to use. In that case, this package exposes a cli command to generate a style-map which can then be used to create your own custom-scoped tw function, like so:

npx trnc-create-styles

This command will create a tw-rn-styles.json file in the root of your project dir. This file contains the info the package needs to generate customized react-native styles. It should be checked in to source control, and regenerated whenever you change your tailwind.config.js file. Then, somewhere in your app, you just do this:

// lib/tailwind.js
import { create } from 'tailwind-react-native-classnames';
import styles from '../../tw-rn-styles.json'; // <-- your path may differ

// this function works just like the default package export
// except it is customized according to your `tailwind.config.js`
const tw = create(styles);

export default tw;

...and in your component files import your own customized version of the function instead:

// SomeComponent.js
import tw from './lib/tailwind';

Prior Art



Last updated on 19 Sep 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc