twrnc Documentation

To enable prefixes that depend on runtime device data (like dark:, lg:, portrait:, etc.), you must call the useDeviceContext hook once at the root of your component hierarchy. This connects the tw function to the device's current state.

import tw from './lib/tailwind'; // or 'twrnc' if no custom config
import { useDeviceContext } from 'twrnc';

export default function App() {
  useDeviceContext(tw);
  return (
    <View style={tw`bg-white dark:bg-black`}>
      <Text style={tw`text-black dark:text-white`}>Hello</Text>
    </View>
  );
}

Expo Users: Ensure userInterfaceStyle is set to automatic in your app.json to allow the dark: prefix to work:

{
  "expo": {
    "userInterfaceStyle": "automatic"
  }
}

If you have a custom tailwind.config.js, you can create a customized version of the tw function using the create utility. This allows your app to respect your specific theme, breakpoints, and plugins.

```js
// lib/tailwind.js
import { create } from 'twrnc';

// create the customized version...
const tw = create(require(`../../tailwind.config.js`));

// ... and then this becomes the main function your app uses
export default tw;

NOTE

If you are using export default {} in your tailwind.config.js, pass the default to create: require('../../tailwind.config.js').default.

To migrate from the original package to v2.x.x:

1. Uninstall the old package and install twrnc:

   npm uninstall tailwind-react-native-classnames
   npm install twrnc

2. Update all imports from from 'tailwind-react-native-classnames' to from 'twrnc'.
3. If using a tailwind.config.js, remove the tw-rn-styles.json file and pass your config directly to the create function.

const tw = create(require(`../../tailwind.config.js`));

In v4.0.0, breakpoint boundaries were updated to be inclusive of the minimum value, matching TailwindCSS behavior. For example, md:bg-black now applies exactly at 768px instead of starting at 769px (as it did in v3.x.x).

If your layout depends on the previous exclusive behavior, you can restore it by manually adjusting your screens configuration in your theme settings to offset the values by 1px.

module.exports = {
  theme: {
    screens: {
      sm: '641px',
      md: '769px',
      lg: '1025px',
      xl: '1281px',
    },
  },
};

To use Tailwind React Native Classnames in your project, install the twrnc package using npm.

npm install twrnc

If you want to control the color scheme explicitly (e.g., via an in-app toggle) rather than following the system settings, configure useDeviceContext to opt out of device changes and use the useAppColorScheme hook.

import { useDeviceContext, useAppColorScheme } from 'twrnc';
import tw from './lib/tailwind';

export default function App() {
  useDeviceContext(tw, {
    observeDeviceColorSchemeChanges: false,
    initialColorScheme: `light`, // 'light' | 'dark' | 'device'
  });

  const [colorScheme, toggleColorScheme, setColorScheme] = useAppColorScheme(tw);

  return (
    <TouchableOpacity onPress={toggleColorScheme}>
      <Text style={tw`text-black dark:text-white`}>Switch Color Scheme</Text>
    </TouchableOpacity>
  );
}

To enable autocomplete for twrnc functions in VS Code, add the following to your settings for the official Tailwind CSS IntelliSense extension. This tells the extension to recognize tw and its variants as valid class attribute functions.

// VS Code Settings
"tailwindCSS.classAttributes": [
    // ...
    "style"
],
"tailwindCSS.classFunctions": ["tw", "tw.color", "tw.style"]

For WebStorm or IntelliJ, navigate to Settings | Languages & Frameworks | Style Sheets | Tailwind CSS and add the following configuration.

Note: You must have a tailwind.config.js file in your project root (even if it only contains export default {}) for the Tailwind LSP to start correctly.

// JetBrains Settings
"classAttributes": [
    // ...
    "style"
],
"classFunctions": ["tw", "tw.color", "tw.style"]

The default export of twrnc is a tagged template function. You can pass space-separated Tailwind classes to it to receive a React Native style object. This is the most common way to apply styles.

import tw from 'twrnc';

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