tailwind-react-native-classnames
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    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>
      </View>
    );

    🚀  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.


    API

    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 tw.style() for handling more complex class name declarations. The api for this function is directly taken from the excellent classnames package.

    // pass multiple args
    tw.style('text-sm', 'bg-blue-100', 'flex-row mb-2');
    
    // arrays of classnames work too
    tw.style(['text-sm', 'bg-blue-100']);
    
    // falsy stuff is ignored, so you can do conditionals like this
    tw.style(isOpen && 'bg-blue-100');
    
    // { [className]: boolean } style - key class only added if value is `true`
    tw.style({
      'bg-blue-100': isActive,
      'text-red-500': invalid,
    });
    
    // or, combine tailwind classes with plain react-native style object:
    tw.style('bg-blue-100', { elevation: 3, lineHeight: 13.5 });
    
    // mix and match input styles as much as you want
    tw.style('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.

    tw.color('blue-100');
    // -> "rgba(219, 234, 254, 1)"

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

    import tw from 'tailwind-react-native-classnames';
    
    const MyComponent = () => (
      <View style={tw`bg-blue-100`}>
        <Text style={tw.style('text-md', invalid && 'text-red-500')}>Hello</Text>
      </View>
    );

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

    import { style as tw } from 'tailwind-react-native-classnames';
    
    const MyComponent = () => (
      <View style={tw('bg-blue-100', invalid && 'text-red-500')}></View>
    );

    Installation

    npm install tailwind-react-native-classnames

    Customization

    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

    Install

    npm i tailwind-react-native-classnames

    DownloadsWeekly Downloads

    1,323

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    195 kB

    Total Files

    15

    Last publish

    Collaborators

    • jaredhenderson