# Using Tailwind CSS in React Native

In this article we will learn how to use `Tailwind CSS` in React Native applications. But before we begin, we should know what `Tailwind CSS` is and how it can be helpful in developing good user interfaces.

## What is Tailwind CSS ?
A utility-first CSS framework packed with classes that can be composed to build any user interface, directly in your HTML file. The good thing of this framework is it doesn't impose any design specification, which means you're not restricted for creating any design of your choice.

It is highly performant and small in size, Tailwind automatically removes all unused CSS when building for production, it ships the smallest CSS bundle possible. In fact, most Tailwind projects ship less than 10kB of CSS to the client.


Now, we've understood what Tailwind is, let us use see how we define classes in our `React App` using **JSX**. For example, you could style a button with just a few classes which Tailwind offers.

```
html
<button className="bg-blue-500 hover:bg-blue-700 
    text-white font-bold py-[5rem] px-4 rounded ml-4 mt-4">
  Button
</button>
```

Let us move forward by understanding how can we use `Tailwind CSS` in React Native application. 

## NativeWind

It is a package that uses `Tailwind CSS` as scripting language to create a universal style system for React Native. **NativeWind** components can be shared between platforms and will output their styles as `CSS Stylesheet` on web and `Stylesheet` for native.

React Native's Stylesheet system only provides static styles, with other features left for the user to implement. By using NativeWind you can focus on writing your system instead of building your own custom style system.

## Getting started

### Step 1. Set up project
To set up our project, we'll scaffold a new react Native app using `react-native init`. If you have already done this, skip this process, otherwise, run the command below:

```
js
npx react-native init my-nativewind-app 
```

Choose "Default new app" and then move into the project's directory.
```
js
cd my-nativewind-app
```

### Step 2. Install NativeWind
Install `nativewind` and it's peer dependency `tailwindcss`.
  ```
   js
  yarn add nativewind
  yarn add --dev tailwindcss
  ```
### Step 3. Set up Tailwind
Setup Tailwind CSS, run the command `npx tailwindcss` init to create a `tailwind.config.js` file.
  ```
js
  // tailwind.config.js
  
  module.exports = {
  - content: [],
  + content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
      extend: {},
    },
    plugins: [],
  };
  ```
### Step 4. Add Babel plugin
Add the Babel plugin, modify your `babel.config.js`.
  ```
js
  // babel.config.js
  module.exports = {
  - plugins: [],
  + plugins: ["nativewind/babel"],
  };
  ```
Thats it!

  ```
js
  import { StatusBar } from 'expo-status-bar';
  import React from 'react';
  import { Text, View } from 'react-native';
  
  export default function App() {
    return (
    <View className="flex-1 items-center justify-center bg-white">
        <Text className="text-gray-400 text-md font-bold mt-2">
            Open up App.js to start working on your app!
        </Text>
        <StatusBar style="auto" />
      </View>
    );
  }
  ```

## TypeScript
NativeWind extends the React Native types via declaration merging. The simplest method to include the types is to create a new `app.d.ts` file and add a [`triple-slash directive`](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html) referencing the types.

 ```
js
  /// <reference types="nativewind/types" />
   ```

## Theme Configuration
Customizing the default theme for your project.

The `theme` section of your `tailwind.config.js` file is where you define your project’s color palette, type scale, fonts, border radius values, and more.

```
js
// tailwind.config.js
module.exports = {
  theme: {
      extend: {
         colors: {
            'blue': '#1fb6ff',
            'purple': '#7e5bef',
            'gray': '#8492a6',
                },
         spacing: {
             '2x': '20px',
             '3x': '30px',
                },
         borderRadius: {
             '4xl': '40px',
                }
            }
          }
       };
```

If you need theme values at runtime, its best to retrieve them directly from tailwind or your `tailwind.config.js`.

```
js
import colors from "tailwindcss/colors";

export function MyActivityIndicator(props) {
  return <ActivityIndicator size="small" color={colors.blue} {...props}  />;
};
```

## Creating custom components
NativeWind also allow us to create our own components along with Tailwind classes.

### Passing classes (or) style to components
When passing styles between components, they are compiled on the parent and then passed as a `style` prop to the child.

```
js
function MyComponent({ style }) {
  // You need to use style, className's classes are compiled into style object & passed as props.
  return <Text style={style} />;
}

<MyComponent className="font-bold" />
```
## styled()
styled() is a **Higher-Order Component** which allows your component to accept either the `tw` or `className` props. These props are compiled into **Stylesheet** objects and passed to your component via the `style` prop.

```
js
import React from 'react';
import { Text, View, TouchableOpacity } from "react-native";
import { styled } from "nativewind";

const StyledText = styled(Text);
const StyledView = styled(View);
const StyledTouch = styled(TouchableOpacity)

function App() {
const onPress = () => console.log("Pressed");
  return (
    <StyledView className="flex-1">
      <StyledText tw="font-bold">Hello world.</StyledText>
      <StyledText className="font-bold">Hello world.</StyledText>
      <StyledTouch className="text-3xl p-5" onPress={onPress} >
          <StyledText className="font-medium text-orange-600">
            Press Here
          </StyledText>
      <StyledTouch>
    </StyledView>
  );
}
```
## Conclusion 
To sum up, Tailwind CSS won't restrict you for creating any design of your choice. You define that with adding classes for the required design.

I believe, this would be enough for getting started with Tailwind CSS in React Native. If you want to explore more, you can visit [`NativeWind`](https://www.nativewind.dev/) and experiment.