Customizing the UI theme
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 also initialize an empty configuration by running npx tailwindcss init
.
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>
))}
This page is a preview of Building React Native Apps for Mac