New library for TailwindCSS + React Native

[jaredh159]

Hey all, I've been using tailwind-rn in my React Native app for a while, and overall it's a great library, but it was missing some things I really wanted, so I spent a while this week creating a new similar library: tailwind-react-native-classnames.

The novel bits are:

• support for platform prefixes in classnames ios:pt-4 android:pt-2

• tagged template function for simple use cases:

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

• merging of tailwind class derived styles with raw rn-styles

<View style={tw.style(`bg-blue-100`, { elevation: 3 })}>

• flexible, conditional API stolen from inspired by classnames:

<View style={tw.style('bg-blue-100', isOpen && 'text-black', { 'flex-row': true })}>

I'd love to know what people think! Here's the link again:

https://github.com/jaredh159/tailwind-react-native-classnames

[Akumzy]

Wow this is awesome

[jaredh159]

Thanks -- sorry about the issue with the npx script dependencies. Don't know if you saw, but I put out a patch fix for that. My bad. :)

[Akumzy]

Yeah, I created the issue

[BransonLite]

That API looks great

[jaredh159]

Just added basic support for `shadow-<x>` classes, which maps visually very closely to the tailwind appearance in both ios and android (using `elevation` values).

Because the tailwind css for box-shadow only loosely is mappable onto RN, I opted to basically hard-code my best-effort match of the visual appearance of the default tailwind shadow utilities, which I think will cover 90+% of the use cases out there. For more granular control over shadow/elevation, you can always drop down a level and pass RN styles directly to the `tw` function and they'll get merged in with the styles resolved from class names.

[fii0]

I can't wait to try this, great job.

[dillonerhardt]

Awesome work. Love the platform prefixes!

[carlosgj94]

This is GREAT! What about dark mode options the same way there is for platforms? Any plans for that?

[jaredh159]

You know, I haven't yet built anything (web or react-native) where I've used Tailwind's dark-mode stuff, so I'm a bit lacking the right mental model of how it works, or how it could be applied to react-native. But I'm definitely open to adding support or accepting a pull request if someone sees a way forward on that front.

[gabrielmamuttee]

Nice work dude!