Using Tailwind CSS in React Native

Let us understand what is Tailwind CSS, its advantages, and how to use it in React Native

Author

Syed Minhaj HussainSoftware Engineer - II

Date

Dec 12, 2022

Book a call

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.

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:

Choose "Default new app" and then move into the project's directory.

Step 2. Install NativeWind

Install nativewind and it's peer dependency tailwindcss.

Step 3. Set up Tailwind

Setup Tailwind CSS, run the command npx tailwindcss init to create a tailwind.config.js file.

Step 4. Add Babel plugin

Add the Babel plugin, modify your babel.config.js.

Thats it!

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 referencing the 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.

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

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.

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.

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 and experiment.

SHARE ON

More from the engineering frontline.

Dive deep into our research and insights on design, development, and the impact of various trends to businesses.

How to Build an AI MVP That Can Scale to Enterprise Production

Article

Apr 17, 2026

How to Build an AI MVP That Can Scale to Enterprise Production

Most enterprise AI MVPs fail before production. See how to design scalable AI systems with the right architecture, data, and MLOps strategy.

How to De-Risk AI Product Investments Before Full-Scale Rollout

Article

Apr 17, 2026

How to De-Risk AI Product Investments Before Full-Scale Rollout

Most AI pilots never reach production, and the reasons are more preventable than teams realize. This blog walks through the warning signs, the safeguards, and what structured thinking before the build actually saves.

Business Cost of Shipping an AI Prototype Too Early

Article

Apr 17, 2026

Business Cost of Shipping an AI Prototype Too Early

85% of AI projects fail to deliver ROI. Explore the hidden costs of early prototypes and how to move from demos to production-ready AI systems.

Scroll for more

View all articles

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 and experiment.

Using Tailwind CSS in React Native

What is Tailwind CSS?

NativeWind

Getting started

TypeScript

Theme Configuration

Creating custom components

Passing classes (or) style to components

styled()

Conclusion

More from the engineering frontline.

How to Build an AI MVP That Can Scale to Enterprise Production

How to De-Risk AI Product Investments Before Full-Scale Rollout

Business Cost of Shipping an AI Prototype Too Early

The Right Conversation Can Save You Six Months.

What is Tailwind CSS?

NativeWind

Getting started

TypeScript

Theme Configuration

Creating custom components

Passing classes (or) style to components

styled()

Conclusion