Question 33303 in React native Question posted in
The official React Native documentation can be found here.

React-Native: How to style Button component with TailwindCSS / NativeWind – React native

I am using NativeWind CSS which is a React-Native library which mimics tailwind css. My stylings don’t seem to be having an effect on the Button component. Stylings are working on other components just not this one.

          <Button
            title="Post"
            className="rounded-full"
            color="#568203"
            accessibilityLabel=""
          />
Tags:

2

Answers


  1. 0

    use style prop to apply classes for button component in React-Native using TailwindCSS

    For example, to apply the bg-blue-500 and text-white classes to a button, you can do the following:

    import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import { tailwind } from 'tailwindcss-rn';

const styles = StyleSheet.create({
  button: tailwind('bg-blue-500 text-white'),
});

function MyButton() {
  return (
    <TouchableOpacity style={styles.button}>
      <Text>Click me</Text>
    </TouchableOpacity>
  );
}

    For NativeWind, you can use the nw prop instead of style, and also import the class names,

    import { Text, TouchableOpacity } from 'react-native';
import { nw } from 'nativewind';

const styles = nw`bg-blue-500 text-white`;

function MyButton() {
  return (
    <TouchableOpacity nw={styles}>
      <Text>Click me</Text>
    </TouchableOpacity>
  );
}
    Login or Signup to reply.
  2. 0

    The problem is that you are using color as a property… You need to use it as a className and write inline styles ass tailwind says. After configure NativeWind (and babel), you can do something like this:

    import { Text, Pressable } from 'react-native';
import { useColorScheme } from 'nativewind';

export default function CustomButton() {
  const { colorScheme, toggleColorScheme } = useColorScheme();
  return (
    <Pressable className="p-4 bg-white dark:bg-black" onPress={toggleColorScheme}>
      <Text className="text-black dark:text-white">
        Click me to {colorScheme === 'dark' ? 'light' : 'dark'} mode!
      </Text>
    </Pressable>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search