Pairing React Native with TailwindCSS
Tags: tailwindcss, reactnative, npm, postcss
Published: 2021-03-25 10:45:39

For my web & mobile development course @[Odisee](<https://odisee.be/en>) I had to make a mobile app with technologies of my choice. Ofcourse, I made the choice to use [React Native](<https://reactnative.dev/>) 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](<https://tailwindcss.com>), 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](<https://deno.land>), 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](<https://github.com/vadimdemedes/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](<https://github.com/vadimdemedes>) on Github and published on [NPM](<https://www.npmjs.com/package/tailwind-rn>). It basically enables you to use tailwind classes inside the style attribute in React Native like so:

```jsx
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 

```bash
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](<https://www.npmjs.com/package/react-native-template-tailwind>) and the typescript variant is available [here](<https://www.npmjs.com/package/react-native-template-ts-tailwind>).

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

For jsx version:

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

For tsx version:

```bash
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!