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.

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.

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.

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!

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.

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.

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.