ElianCodes

← Back to blog

Published on 02/20/2021 17:37 by Elian Van Cutsem

Pairing React Native with TailwindCSS

For my web & mobile development course @Odisee I had to make a mobile app with technologies of my choice. Ofcourse, I made the choice to use React Native since it’s very popular, has good documentation and is a good skill to have (and also available with Typescript). I also wanted to be able to use TailwindCSS, since I’m pretty proficient at it right now, and is very easy to get started with. For the back-end of the application, I made the choice to use Deno, but that isn’t important right now.

So I went on the search for a easy template to start with (for faster development and results, not because I’m lazy 😉), but I couldn’t find any. It seems that React Native doesn’t integrate easy with Tailwind, but there exists a NPM package to solve this called Tailwind-rn. So I tried it out and it seemed very easy to work with.

Using tailwind-rn

Tailwind-rn is a NPM Package written by @vadimdemedes on Github and published on NPM. It basically enables you to use tailwind classes inside the style attribute in React Native like so:

import tailwind from "tailwind-rn";

const App = () => (
  <SafeAreaView style={tailwind("h-full")}>
    <View style={tailwind("pt-12 items-center")}>
      <View style={tailwind("bg-blue-200 px-3 py-1 rounded-full")}>
        <Text style={tailwind("text-blue-800 font-semibold")}>
          Hello Tailwind
        </Text>
      </View>
    </View>
  </SafeAreaView>
);

This of course is very nice and what I wanted. But ofcourse it would be cleaner and easier if you could use a custom tailwind.config.js file to configure tailwind in the React Native application. It seems also that is possible with Tailwind-rn, but I haven’t played around with it yet, but I’ll sure do so soon.

Building my own template

So, I tought that it could be useful to create a React Native template out of this. Since I looked for it, others must be too.

A React Native template is actually very easy to install and use. Just run

npx react-native init yourApp --template react-native-template-typescript

and it will automatically download the template from NPM (altough installing a template can also be done via file://, https:// or git://) and install it on your local machine.

To build my own template, I just downloaded the original template and modified it to use the tailwind-rn package. Configured the package.json and template.config.js files and published it to NPM.

Publishing the package

I never published a package to NPM, so there was a bit of a learning curve. But it wasn’t that hard once I had setup everything right.

The final packages are available here and the typescript variant is available here.

To install my templates you can choose between two variant where one uses typescript and the other doesn’t.

For jsx version:

npx react-native init yourApp --template react-native-template-tailwind

For tsx version:

npx react-native init yourApp --template react-native-template-ts-tailwind

Maybe I’ll make a template that uses the “more advanced” version of TailwindCSS with a custom tailwind.config.js one day.

I hope some people get some value out of the package!

Written by Elian Van Cutsem

← Back to blog
  • Becoming an Astro maintainer

    Becoming an Astro maintainer

    Since a week, I'm an Astro maintainer, in this post, I describe the process and my start in open source. I also give some insight in what I'm planning to work on.

  • 🍱 Brutal: A theme for Astro

    🍱 Brutal: A theme for Astro

    Brutal is a minimal neobrutalist theme for Astro. It's based on Neobrutalist Web Design, a movement that aims to create websites with a minimalistic and functional design. It has some integrations like Image Optimization, RSS, Sitemap, ready to get your SEO done right.

  • 🎤 Am I an international public speaker now?

    🎤 Am I an international public speaker now?

    A few weeks ago, I gave my first international keynote talk at JSWorld in Amsterdam. In this blogpost, I wanted to share some insights about the conference and my talk.

  • ✨ Building Blog tag index pages in Astro

    ✨ Building Blog tag index pages in Astro

    I wanted to add blog tag collection pages to my website. This way, people could filter on tags I used in my blog posts. Here is a guide on how I implemented it.

  • 🎉 I started from scratch (again)

    🎉 I started from scratch (again)

    I started rebuilding my personal website from scratch in Astro again, no dependencies, no frameworks, no nothing. This to decrease technical debt and make full use of the newer Astro features.

  • 💄 Implementing UnoCSS in Astro

    💄 Implementing UnoCSS in Astro

    UnoCSS is an atomic-CSS engine, designed with flexibility and performance in mind, I wanted to give it a try. Let's take a look at implementing it in Astro and see how it works.