style={tailwind()} vs className

[ghost]

Is there a reason why you chose to do this implementation vs className?

<Text style={tailwind('text-white p-4')}>Hi</Text

vs

<Text className="text-white p-4">Hi</Text

[ecreeth]

className is not a valid attribute in React Navive, so we would have to create our own implementation of the components to support that attr

[vadimdemedes]

The benefit of having a simple function that returns native styles is that you're free to use it however and wherever you want. Having a className would require re-exporting all view components - something I'm not interested in doing, as it has no benefit.

[Faisal-Manzer]

Can I disagree little? I know that is a lot of work. But many projects are using mono repo or react-native-web to make ReactJS and react-native work side-by-side. className will enable us to work in a very consistent manner.

[vadimdemedes]

@Faisal-Manzer In that case I think it's up to React Native to introduce this change first, not each individual library, otherwise it'll never become standard.

[gablabelle]

I think it's an interesting point. As a React dev new to the react-native world and I was hoping to find something that would allow me to write my universal component styles like this

import React from 'react';
import { Header, Text } from '@ui';

function Example() {
  return (
    <Header className="flex flex-1 items-center justify-center">
      <Text className="text-lg md:text-2xl">Example</Text>
    </Header>
  );
}

export default Example;

Where Header is from an abstraction of @expo/html-elements + a react-native lib that supports tailwind like tailwind-rn

import {
  // ...
  Header as HeaderComp
} from '@expo/html-elements';
import {
  // ...
  Text as TextComp,
} from 'react-native';
import tailwind from 'tailwind-rn';

export const Header = ({
  children,
  className = '',
  ...props
}: ViewProps & { className?: string; children: ReactNode }) => {
  return (
    <HeaderComp style={tailwind(className)} {...props}>
      {typeof children === 'string' ? (
        <TextComp>{children}</TextComp>
      ) : (
        children
      )}
    </HeaderComp>
  );
};

Coupled with responsive tailwind classes support, this would make of your lib a no brainer choice for all the tailwind fan boys, like me, that wish to use react-native. 😄

[theoludwig]

Could you reopen the issue, please ? @vadimdemedes

I wish the same thing as @gablabelle, how could we reuse components as much as possible between react-dom and react-native with tailwindcss ?

It would be really cool, if we could develop with the web version with something like storybook, use tailwindcss as we normally would, and all that good stuff + ability to import theses components into react-native applications.

[renatodex]

Just an addition to this: In my tests, passing the className property do not yield any errors on React Native.
I've made the follow component as a Wrapper for the React Native View:

import React from 'react';
import { View } from 'react-native'
import tailwind from 'tailwind-rn';

export default function AppView (props) {
  const className = props.className

  return (
    <View
      {...props}
      style={{ ...props['style'], ...tailwind(className)}}
    >
      {props.children}
    </View>
  )
}

And in order to use it I can do:

import AppView from './app_view'

export default function App() {
   return (
       <AppView style={styles.container}>
           <AppView className="w-64 bg-purple-400 h-60 p-6 rounded-xl">
              <Text>Simple colored background</Text>
           </AppView>
       </AppView>
   )
}