Support tailwind-react-native-classnames

[jsonnull]

I use the excellent package tailwind-react-native-classnames to build styles in a react-native app using tailwind.

I recently discovered prettier-plugin-tailwindcss, and I've found it to be extremely helpful. I want to be able to use it in my react-native project as well.

I'm happy to take feedback on how we can make this as reasonably generic as possible, and possibly non-specific to the package above.

For now I've targeted the template literals tw and twrnc:

tw`p-0 sm:p-0`
twrnc`p-0 sm:p-0`

And the same for any string or template literal for the .style method:

tw.style("p-0 sm:p-0")
twrnc.style("p-0 sm:p-0")

There's probably more sophisticated cases which could be caught, but I think this covers most use-cases.

[thecrypticace]

Hey! I understand what / why you want this but right now we don't have a native React Native library and don't feel comfortable committing to supporting all the various react native libraries and the different ways that they have of supplying classes and styles. For example react-native-classnames, tailwind-rn, NativeWind, et. al implement support for Tailwind classes a little differently from each other. If we ever do ship one though we'll certainly revisit this.

Really appreciate the PR though!

[jsonnull]

@thecrypticace While I respect your position, I want to leave you with one or two points of counterargument.

You say that these all implement Tailwind classes different from each other, and while I agree with you, at least in the examples you provided they're either:

• Already supported by the plugin (by my estimation), or
• Seem like they could be supported relatively easily—it's only a slight variation on what's already happening.

EDIT: To clarify what I meant by "seems like they could be supported relatively easily", consider: instead of hardcoding the tw or twrnc or .style names, these could be configurable in the plugin. This gives you a large breadth of support with no need to change anything on your part as these libraries evolve—either it's covered by that functionality or not.

Compare this to something else you support like @shopify/prettier-plugin-liquid which seems much more involved. 🤔 🤔

I guess at the end of the day, I think supporting this would be a nice gesture to all of your react-native users as opposed to requiring them to fork your plugin. As I was saying in my original text, it seems like you could support a lot of use cases with fairly minimal effort.

[jsonnull]

I don't suppose after reading that you'll reconsider?

[thecrypticace]

I probably should've linked these in my original comment but we've intentionally stayed away from doing things like this that aren't explicitly html classes, component classes, or expressions contained within them:

• feat: support properties and variable declarators #97
• [WIP] React Native "style" support #95
• Add partial support for Twin #74

Already supported by the plugin (by my estimation), or

Yeah technically NativeWind would already be supported because it uses the same className abstraction that React does. But I believe it's the only React Native example I've ever seen do that (kind of a nice approach imo ¯\_(ツ)_/¯ ).

Seem like they could be supported relatively easily—it's only a slight variation on what's already happening.

In general we've wanted to stay away from performing sorting on "arbitrary" strings and literals when the intention isn't 100% unambiguous. For example, what if the tw template literal doesn't have anything to do with Tailwind in your project? It could be a shortcut for something like a localized "Title" sentence case (where tw means "title words" or something similar).

This is an incredibly contrived example but that would mean that this:

let subtitle = tw`The underline is used in manuscripts and papers`

would be incorrectly sorted to this:

let subtitle = tw`The is used in manuscripts and papers underline`

So if we support something like this it will likely need to be configurable and off-by-default. I'll start up another discussion internally to discuss this though and let you know the result.

I'll re-open this for the time being (if I don't I will 100% forget to update this 😅).

[thecrypticace]

Hey, we've just merged #155 which provides a way for you to specify additional attributes, functions, and tagged template literals that should be sorted by the plugin. It's available via our insiders build and will be released in the next version of the plugin. We would like to get some feedback on this feature before we release it, so please give it a try and let us know what you think!

To test the new features you can install the insiders build like so:

npm install prettier-plugin-tailwindcss@insiders