5 Reasons to Use Tailwind CSS with React Native

How to Style Your React Native Application with Tailwind CSS

Tailwind CSS is an open-source utility-first CSS framework. It redefines the way you style applications by providing a variety of CSS classes.

Using Tailwind CSS, you can style your applications without a single custom class name or a stylesheet.

Furthermore, I found that it works exceptionally well with mobile applications based on React Native.

So, in this article, I’m going to discuss why Tailwind CSS is the best solution for React Native applications.

1. Customized Packages for Better Integration

There are many Tailwind packages designed explicitly for React Native. These packages cover almost all your styling needs, and some of the most used packages are listed below:

• tailwind-react-native-classnames package — This is based on Classnames, a JavaScript utility for combining class names.
• react-native-tailwindcss package — This allows applying styles to React Native components in a TailwindCSS-style manner.
• react-native-tailwind package— A library to import React Native components directly to your application. Classes can be passed to these components using the className prop.
• tailwind-rn package — Accepts classes as a string and converts them to CSS compatible with React Native.

With these packages, it is very easy to style your React Native components. For example, you can easily style your application for both Android and iOS using tailwind-react-native-classnames package as below:

import tw from 'tailwind-react-native-classnames';
const Header = () => (
   <View style={tw`ios:pt-4 android:pt-2`}>
      <Text>My Header</Text>
   </View>
);

Note: Most of the elements mentioned in the Tailwind CSS documentation are not applicable for React Native. Hence, you need to pay extra attention when using Layouts, Flexboxs, Spacing, Sizing, Typography, Background, Borders in your React Native components.

2. Small Bundle Size in Production

Tailwind CSS is known to be “Tiny in Production”.

Tailwind CSS removes all unused CSS when building for production and makes the bundle the smallest possible size. Most Tailwind CSS bundles are known to be less than 10KB.

This small bundle size makes Tailwind CSS a perfect choice for mobile applications since bundle size is an essential factor when publishing the apps to the Play Store or App Store.

3. Improves Maintainability

Usually, there are two ways of styling React Native components:

• Adding CSS to the same file using the Stylesheet method by React Native.
• Adding a new CSS file for every new component.

If we use the first approach, there is a high chance for our component file to be very lengthy and difficult to read. Furthermore, as the application grows, it would not be easy to maintain the component and its styles.

The second approach adds a large number of files to your mobile application project. For example, let’s say you have 10 different types of buttons. You will end up adding 10 new CSS files to define different styles for them. In the long run, when the application grows, this too would make the application unmaintainable.

However, with Tailwind CSS, we have to maintain a single component file, and the relevant styles will be included in the elements themselves.

This approach makes applications more scalable and maintainable while reducing the development time drastically.

4. Consistent UI and Customizability

Styling mobile applications are far more complex than web applications. We have to organize our UI elements efficiently and user-friendly in a limited space while maintaining support for various devices and screen sizes.

Tailwind CSS supports creating a custom and consistent UI by allowing you to create custom themes via the Tailwind config file (tailwind-config.js ).

You can add your color palettes, layouts, breakpoints for different devices, etc. (Refer to custom configuration options here)

If you do not want any custom configurations, Tailwind CSS supports that as well.

You can use the components provided by Tailwind to keep your UI consistent. This reduces the learning curve, and it is very beneficial for mobile application development as new developers can start building and styling applications fast.

5. Can Easily Keep the Application Up-to-Date

You can use a package like tailwind-rn to generate all the styles from the Tailwind CSS source. This will make sure that these packages get updated regularly when Tailwind CSS upgrades.

Build Great Design Systems and Micro Frontends

Take frontend development to the next level with independent components. Build and collaborate on component-driven apps to easily unlocks Micro Frontends, and to share components.

OSS Tools like Bit offer a great dev experience for building and composing independent components, and build solo or together with your team.

Give it a try →

An independently source-controlled and shared “card” component (on the right -> its dependency graph, auto-generated by Bit)

Final Thoughts

Overall, Tailwind CSS is a promising solution for styling React Native applications that comes with many benefits. Instead of using pure CSS or styled-components, Tailwind CSS provides shortcuts to style our application with little effort.

Since Tailwind CSS provides pre-defined utility classes, your CSS won’t grow in proportion to the number of custom components you have in your React Native application.

Based on all of this, if you are planning to use Tailwind CSS in your next React Native application, this cheat sheet will come in handy for you. Let us know your experience in using Tailwind CSS for your next application too.

Thanks for Reading!

Learn More

Component-Driven Responsive Design Using Container and Scope CSS Queries

Use Tailwind or Roll Your Own CSS Utility Library?

Building a React Design System for Adoption and Scale