How to use Tailwind CSS in React Native
Tags: css, reactnative, tailwindcss
Published: 2021-10-15 11:58:47

---
title: How to use Tailwind CSS in React Native
published: true
date: 2021-07-18 08:30:00 UTC
tags: CSS,ReactNative,TailwindCSS
canonical_url: https://lagandlog.com/logs/how-to-use-tailwind-css-in-react-native
cover_image: https://lagandlog-uploads.s3.amazonaws.com/tail_in_rn_ea0730559d.png
---

Styling in React Native is pretty simple at the initial stage when we are developing a new application. React Native's [Stylesheet](https://reactnative.dev/docs/stylesheet/?ref=lagandlog.com) helps us to add styles to our elements. When the codebase increases, stylesheets (both external/internal) will be increased, and so maintaining the uniform class names, reusing styles is a nightmare.

[Tailwind CSS](https://tailwindcss.com/?ref=lagandlog.com) is an open-source utility-first CSS framework. It redefines the way you style applications by providing a variety of CSS classes by default and we can customize to any extend. Without writing custom styles for each element back and forth, we can use tailwind to write inline styles effectively. It gives a solid design system by default and helps writing **conditional** , **device-specific** styles are the major advantages. By this approach, bulk stylesheets will be reduced and can reuse tailwind styles to other components.

Personally, am not a big fan of writing complete CSS on my own, this [lagandlog.com] is completely built using `tailwindcss` and I had a great experience and it came out really well. The bundle size of the tailwind is <10KB and it is super ok✌️

### Where to start?

Many packages out there were mainly created to use TailwindCSS in React Native. Every package has its own way of usage and we are not gonna learn each of them. Listing few useful dependencies below for reference,

- [tailwind-react-native-classnames](https://www.npmjs.com/package/tailwind-react-native-classnames/?ref=lagandlog.com)
- [react-native-tailwindcss](https://www.npmjs.com/package/react-native-tailwindcss/?ref=lagandlog.com)
- [tailwind-rn](https://www.npmjs.com/package/tailwind-rn/ref=lagandlog.com)

These packages were simple to use and will not replace any native components.

### Which one to use?

Each one of them is similar and has its own advantages, please refer to the official documentation and find the one that suits you.

> Note: TailwindCSS is not created specifically to React Native, so some of the class names will not be supported.

We are trying something more useful, device-specific customizable package [`tailwind-react-native-classnames`](https://www.npmjs.com/package/tailwind-react-native-classnames).

#### Installation

```
npm install tailwind-react-native-classnames
```

#### Usage

```
import { View, Text } from 'react-native';
import tw from 'tailwind-react-native-classnames';

const MyComponent = () => (
  <View style={tw`p-4 android:pt-2 bg-red-300 flex-row`}>
    <Text style={tw`text-md tracking-wide`}>Hey there!</Text>
  </View>
);
```

#### Platform-specific styles

```
// 😎 styles only added if platform matches
tw`ios:pt-4 android:pt-2`;
```

You can learn more about customizing, overwriting, configurations of the package [here](https://www.npmjs.com/package/tailwind-react-native-classnames).

#### Sample Design

![tailwind-rn.png](https://lagandlog-uploads.s3.amazonaws.com/tailwind_rn_7e8cfa258a.png)Image Source - [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn)

Hope this log is useful for you, feel free to add your thoughts in the comments.

TailwindCSS Cheatsheet - [https://nerdcave.com/tailwind-cheat-sheet](https://nerdcave.com/tailwind-cheat-sheet)

Follow me on [Twitter](https://twitter.com/sasiKdharan)

### Happy Coding!