How to Use Tailwind with React Native | Beginner Tutorial 2022 | Code with Beto

Learn how to use Tailwind CSS with React Native to build interfaces quickly and consistently without writing a lot of manual CSS. It is for developers who want Tailwind's utility-first workflow on mobile.

You will see how to install tailwind-rn, apply Tailwind classes directly in React Native components, and handle dark mode and responsive styles. I also explain how to avoid duplicated styles with reusable components.

What's inside

Introduction to Tailwind and why it helps in React Native
Installing and creating a React Native project
Basic Tailwind classes in components
Dark mode with Tailwind
Responsive styles by screen size
Hover and focus states in components
Avoiding duplication with reusable components
The tailwind-rn library and its benefits for React Native

Introduction to Tailwind and why it helps in React Native

Tailwind is a CSS framework built around utility classes for fast, consistent styling. You cannot use Tailwind directly in React Native, but libraries like tailwind-rn let you apply those classes in your components.

I explain how Tailwind reduces long, repetitive styles and keeps design consistent with predefined colors, shadows, and typography. It also supports dark mode and responsive utilities, which improves the user experience.

Installing and creating a React Native project

We start by creating a React Native project with Expo using and selecting the blank template. Then we open the project in Visual Studio Code.

Next we install tailwind-rn with . This library maps Tailwind classes to React Native styles and helps keep production bundles lean by dropping unused CSS.

Basic Tailwind classes in components

With tailwind-rn, we can apply classes like , , or directly on the prop. For example, white text with horizontal padding of 6 uses .

This simplifies the code because you do not need separate StyleSheet objects for everything. Tailwind also includes utilities for flexbox, rotation, shadows, and more.

Dark mode with Tailwind

Tailwind makes dark mode straightforward with conditional classes. In the video, I show how colors and backgrounds switch automatically when the system is in dark mode.

For example, changes text color based on the mode. In React Native, you can wire this up with context or hooks that detect the current theme.

Responsive styles by screen size

Tailwind includes responsive classes that apply styles based on device size. For example, adds horizontal padding on small screens, while applies elsewhere.

That lets you adapt layout without extra size-detection logic. tailwind-rn supports these classes and applies them correctly in React Native across devices.

Hover and focus states in components

React Native does not have native hover, but I note that Tailwind supports hover and focus for web and some special cases.

In React Native, you can simulate these states with components or extra libraries, and Tailwind still helps you define consistent styles for buttons and cards.

Avoiding duplication with reusable components

To avoid repeating the same class strings everywhere, I recommend creating React components that group Tailwind styles in one place.

For example, a card list can use a component with its classes defined once, then reuse that component across the app. That keeps code clean and DRY.

The tailwind-rn library and its benefits for React Native

tailwind-rn is the key to using Tailwind in React Native. It converts Tailwind classes into native style objects, optimizes performance, and strips unused CSS in production.

It also supports platform conditionals and integrates well with dark mode and responsive utilities. That simplifies development and keeps visuals consistent.

Resources

CourseReact Native course

React Native fundamentals and practical patterns for building professional apps.

Let's connect!