In the previous lesson we used the base version of a React Native port of Tailwind, but we did not customize it in any way. However, if you are developing your own app, you will definitely want to use your own colors, font sizes and margins. We're going to achieve this by extending the base Tailwind configuration and auto-generating the custom classes.

In the root of your project create a tailwind.config.js file - here is a template you can use:

// tailwind.config.js

module.exports = {

  purge: [],

  theme: {

    extend: {

      colors: {

        cyan: {

          DEFAULT: '#04bf9b'

        },

        tangerine: {

          DEFAULT: '#fc9010'

        },

      },

    }

  },

  variants: {

    extend: {},

  },

  plugins: [],

}

You can read more about setting up variables in the Tailwind documentation. For now we will only add a set of colors but the potential for customization is large - you can change scales, margins, font-sizes, etc. Now it's important to note that not all the configuration items will work, since this is a port that needs to function with the React Native styling system, so always check out the tailwind-rn repo.

With our configuration in place we can now generate the classes for tailwind-rn to consume. Run the following command in your terminal:

npx create-tailwind-rn

This will create a styles.json file containing not only the default Tailwind style classes but also our customized classes.

Loading our customized styles into React Native#

Now before we start using them, we need to load them. We'll create a convenience wrapper around tailwind-rn. Create a Tailwind.ts file in the src folder:

// src/Tailwind.ts

import { create } from 'tailwind-rn';

import styles from '../styles.json';

const { tailwind, getColor } = create(styles);

export const tw = tailwind

export const twColor = getColor

We start by importing the create function from tailwind-rn. This function takes the generated styles we created before and will return an object with two properties and a customized tw function that works with our extended styles. It will also return a getColor function which is useful to get our custom colors from the Tailwind configuration. We simply take these properties and export them under new names to make it easier to import into other files.

We can now replace the default import from tailwind-rn to our wrapper and use our custom classes:

// src/containers/Books.container

import { tw } from 'Tailwind'

import { observer } from 'mobx-react-lite'

import React, { useEffect, useState } from 'react'

import {View, Text, Button, TextInput} from 'react-native'

import { useStore } from 'Store'

interface IProps {}

export const BookListContainer = observer((props: IProps) => {

  let root = useStore()

  let [title, setTitle] = useState('')

  useEffect(() => {

    root.ui.fetchBooks()

  }, [])

  return (

    <View style={tw('p-3')}>

      {root.ui.uppercasedBooks.map((book) => (

        <View key={book} style={tw('py-1')}>

          <Text style={tw('font-bold')}>{book.title}</Text>

          <Text style={tw('text-sm')}>{book.createdAt}</Text>

        </View>

      ))}