Native style using 'className' prop!

In React Native, we typically use styles or create selectors for styling. However, an alternative approach is to use NativeWind it adds some plugins to Tailwind CSS with the className props, it allow us to use CSS StyleSheets

Example 1:

Text element with the className prop set to apply for text size (text-xl) and positioning (left-3 and top-3).

import * as React from 'react';

const TailwindCssProgram = () => {

  return (

    <View>

      <Text className="text-xl left-3 top-3">Hello</Text>

    </View>

  );

}

export default TailwindCssProgram;

Example 2:

This component features a View with the className property set to apply for border (border), rounded corners (rounded), and a blue background (bg-blue-500). Inside the View, there is a Button element with the title "Save."

import * as React from 'react';

const TailwindCssProgram = () => {

  return (

    <View className="border rounded bg-blue-500">

      <Button title="Save" />

    </View>

  );

}

export default TailwindCssProgram;

Note: When using multiple properties in the className, simply provide a single space and add another property. Do not use commas, as they are considered invalid. If a comma is mistakenly added, the system will only consider the first property and ignore the subsequent ones.

To know more about className props!