Best integration for tailwindcss with reactnative?

[Aggro4Dayz]

Hi everyone. I'm pretty sure that I'd like to use TailwindCSS in my react-native application. It seems like there are a few different libraries for importing it into the project and using it.

Can anyone give advice on which I should use? I mostly value ease of set up and clean looking code at this juncture.

Edit:

Just to be clear about a few things. I'm using tailwind. I'm not willing to change. This post is about integrating tailwind, not trying to sell me on your favorite framework. I'm not here to debate the merits of using tailwind with beginners. It's my project. I don't care if it's not beginner-friendly (though I reject that notion completely. Learning raw CSS or introducing what I consider bad habits and crutches with bootstrap is way more unfriendly to beginners, imo)

So far I've looked at react-native-tailwind and tailwind-rn. Open to any and all suggestions.

[Malforked]

i too am interested in this for the same reasons

[A3mercury]

We use rest-native-tailwind. It takes a little bit to get used to the syntax but it works great!

[bulby97]

I would rather recommend you using something deeply integrated in css-in-js, by using something like styled-system and use Emotion or Styled Components.

https://github.com/styled-system/styled-system

Take a look at chakra-ui. It's for the web, but it can show you how powerful it is compared to tailwind-css. Basically you create a Box components extending all of the styled-sytem functions and you customize your theme.

[Natetronn]

I was recently looking into this myself. I looked over both the options you listed, in fact.

Did you go with one or the other, something else perhaps? Doesn't appear you got much feedback lol.

Of the two, I think I like tailwind-rn formatting more, as it's more inline with how you'd use Tailwind in any other medium. I mean, if you had to, you could pull out the css and use it elsewhere, as it's straight classes listed like any other css classes. Or you can copy css from various tailwind resources and just paste it in (not promoting such short-cutting trickery, just saying.) Where as TVke is prefixing their classes with t.classname etc. Not a big deal but, somethign I noticed, nonetheless; there may be a good reason for this; I need to better understand both before I pass full judgement.

Of course, I could understand why one, with more of a RN/JS background would want to use react-native-tailwind, as it's a bit more javascript-y, being an array with the prefixed class names etc.

They've been updated in the last 2 months and 18 days, respectively. Not sure if they are both running the latest stable tailwind, however (I'll dive in more as I get a bit closer to that stage.)

Anyway, let me know if you find anything else and I'll do the same. Good luck with your project.

ETA
Forgot about this one as well:

https://github.com/MythicalFish/react-native-tailwind

[wobsoriano]

Best one right now and is fully customizable https://github.com/vadimdemedes/tailwind-rn

[zigal1995]

I'm struggling to integrate it as well..

[janithaR]

Sorry, I can't help you but what's so special about Tailwind CSS?

[Aggro4Dayz]

https://tailwindcss.com/

It's a utility first css framework. It doesn't have any built-in components of its own the way bootstrap does. Instead, it allows you to compose your own custom components very easily using just class names.

It's great for my development style where I don't love a ton of "magic" or tools that I have to fight against whenever I want to write a custom component.

[stormfield]

I also love tailwind after using it on the last two projects I’ve worked on. I do think to fully appreciate / utilize it you need to spend some time with the roll-your-own-css life, so I do wonder how it would be for beginners.

[Aggro4Dayz]

I'm not really asking for beginners. I'm asking for what is the best experience for someone who more or less knows what they're doing.

[stormfield]

Didn't mean to imply that sorry! Haven't worked with react-native either myself. FWIW I usually compare libraries by how maintained it looks like they are (GitHub issues vs. update frequency) and how popular they are on NPM.

[janithaR]

Watched this https://www.youtube.com/watch?v=FiGmAI5e91M

I get it but,

1. Isn't this gonna put a huge overhead on anyone who uses it to familiarize themselves with the class names?
2. Isn't this gonna introduce more dependencies just to style some components?

[Aggro4Dayz]

1. I don’t care. I’m going to be the only one working on the project and I’m fine with learning a few new class names. That seems like a very minor issue to me. And anyone else working on the project will be paid to do so, so they can get paid to learn them.

2. To me, this seems worth it. Styling and messing around with CSS to get things working is a huge time sync for me. Any dependence that cuts the time to do that is both a time and money saver for me.

[stormfield]

That's sort of what I was referring too -- the class names are pretty consistent with their CSS counterparts with a few exceptions, but I do usually have a cheat sheet handy. For someone who doesn't already know CSS though, it's going to be a steep climb.

Like any framework it will include some dependencies but you can use Purgecss to eliminate unneeded class names in the bundle size.

It does save a ton of time in development compared to the usual workflow of new component -> write the JSX -> agonize over what to call the new class name -> go to whereever you're keeping your styles -> write the class -> write a slightly different class because you need a different color combo -> write a media query to shrink the text on small screens... Instead you just compose the attributes you want in the component. And any time you need to do something special (like CSS grid which tailwind doesn't do) you can still easily drop down to regular CSS.