Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

tailwind-react-native-classnames

Package Overview
Dependencies
5
Maintainers
1
Versions
23
Issues
File Explorer

Advanced tools

tailwind-react-native-classnames

simple, expressive API for tailwindcss + react-native

    1.5.1latest
    GitHub

Version published
Maintainers
1
Weekly downloads
804
decreased by-14.92%

Weekly downloads

Readme

Source

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

Keywords

FAQs

Last updated on 19 Sep 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • 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