TailwindCSS with React Native

A step-by-step guide on using Tailwind CSS with a custom configuration in your React Native/Expo app.

TailwindCSS with React Native

A step-by-step guide on using Tailwind CSS with a custom configuration in your React Native/Expo app.

If you've used TailwindCSS in your web app, you know how amazing it is and how easy it is to build user interfaces with it. If you haven't, you should definitely give it a shot.

Over the past month or so, I've been using TailwindCSS in my React Native apps (including in production) and it has been an amazing experience. There's no need to create a new stylesheet in every file or manage styles for individual components and the best thing is you can also bring your own custom configuration to Tailwind.

In this post, I am going to go over how we would add Tailwind to a React Native app using the tailwind-rn library by Vadim Demedes. Let's start by initializing our React Native app using Expo.

expo init tailwind-react-native
// You can choose the workflow you prefer.

cd tailwind-react-native

Next, we're going to install the tailwind-rn library.

yarn add tailwind-rn

That's it, you're now ready to use TailwindCSS in your React Native app. Here's a quick demo of how easy it is to style things when using Tailwind.

Tailwind demo

Tailwind comes with a very useful configuration built into it but what if you wanted to bring your own set of values or colors. Let's take a look at how we'd do that.

yarn add tailwindcss

npx tailwind init

These two commands will install Tailwind and also generate a configuration for you. This is the file you will be modifying to bring in your own custom config. You can read more about the configuration specifics here.

Once you're done with creating your config, you have to generate a styles.json file that our library will read.

npx create-tailwind-rn

Now that our styles have been created, we have to tell our app to use them and not the default styles. To do that, let's create a file and call it tailwind.js and add this in there.

import { create } from 'tailwind-rn';
import styles from '../styles.json';

const { tailwind, getColor } = create(styles);
export { tailwind, getColor };
Using our custom styles

Now, whenever we want to use Tailwind, we will import it from this file instead of the library itself.

i̶m̶p̶o̶r̶t̶ ̶t̶a̶i̶l̶w̶i̶n̶d̶ ̶f̶r̶o̶m̶ ̶'̶t̶a̶i̶l̶w̶i̶n̶d̶-̶r̶n̶'̶;̶
import { tailwind } from './lib/tailwind';

If you noticed, we also have a method called getColor that the library provides. This is super useful when using other libraries that require colors to be passed manually. We can then use getColor to get the colors from our Tailwind config.

getColor('blue-500') === '#4299E1';

That's all for this post, you can find the repo with the code here and if you'd like, you can also use create-react-native-app to generate this example for you using this setup.

As usual, feel free to hit me up on Twitter with any questions or suggestions!

Tags:

Faraz Patankar

Probably obsessing over fantasy football, figuring out what to eat for my next meal or working on my next great (soon to be abandoned) side project but hello to you too! 🤗

More posts from this author

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.