Hire the author: Hikmah Y

Here is how to customize tailwind colors and fonts in your React project.

Image source: https://i.ytimg.com/vi_webp/TmWIrBPE6Bc/maxresdefault.webp

Code: https://github.com/learningdollars/hikmahy-tailwind-color-customization

Introduction

A variety of CSS frameworks exist out there for use. After experimenting with some of them, I find tailwind to be my favorite. When I first began coding, I usually use a CSS preprocessor for all my projects, thinking it was way more accurate for specifying the colors and font in my CSS. But I’m always open to new things and that is how I came about tailwindcss.

Tailwindcss is one of the fastest-growing CSS frameworks. It is easy to use, flexible, and very beginner-friendly. It has a large variety of colors and fonts you can choose from. But sometimes when the specific colors or fonts you want to use, provided to you or by choice, are not available in the tailwind, we turn to extra style sheets or even the addition of inline style. Rather than doing that, you could customize the colors into tailwind and use just as you would use any tailwind class.
In this project, I’m going to show you how to customize colors and fonts with tailwind.

Glossary

  • Tailwind: a utility-first framework used for faster code.
  • React: a frontend JavaScript library for building single-page applications.

Steps-by-step

This is a step-by-step progress to implement tailwind in your react app.

Step 1- Installation

– Create a new react app: 

npx create-react-app [app name]

-Install tailwind and its dependencies:

npm install -D tailwindcss postcss autoprefixer

Step 2- Generate tailwind’s configuration file

This is the file where we add our custom colors and fonts. Run:

npx tailwindcss init -p

This also creates postcss.config.js file alongside the tailwind.config.js. We won’t be adding anything into the postcss file.

After cleaning up your react app, in your index.html, add the link to the font you want to use. You can find these in google font. Copy the link and paste it into your HTML.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap"
rel="stylesheet"
/>

Step 4- Add path

In your tailwind.config.js, you add all the paths of your template in this file inside the content. We configure the template path by adding all files of JavaScript and tailwind extensions into this.

Add this string : "./src/**/*.{js,jsx,ts,tsx}" into the content property.

Step 5- Tailwind directives

In a cleared-out index.css, include tailwind’s directives into the file:
@tailwind base;
@tailwind components;
@tailwind utilities;

At this point, the tailwind is ready to be used. Just run npm start, use some tailwind classes and the build process of the tailwind begins

Step 6- Tailwind customization

Now, for customization, go to tailwind.config.js, and in the theme, we will create colors and font family properties containing all the customized styles we have in mind. Remember to name the properties accurately. You can use hex code, rgba, or hsla for the colors. With font-family, if the name is longer than one word, wrap first in double quotes before wrapping in single quotes. If it’s only a word, wrap in only single quotes.

module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
colors : {
'violet': '#674baf',
'red': '#ff5c7c',
'orange': '#ff8c66',
'yellow': '#f1c65b',
'blue': '#56c2e6',
'purple': '#7536d3',
'green': '#4acf81',
'light-gray': '#f2f2f2',
'very-light-gray': '#fafafa',
'grayish-blue': '#a3a5ae',
'very-dark-blue': '#4c4e61',
'transparent-white':'#ffffffbf',
'transparent': 'transparent',
'white': '#ffffff',
'black': '#000000'
},
fontFamily : {
'rubik': ['Rubik', 'sans-serif']
}
},
plugins: [],
}
view raw tailwind.config.js hosted with ❤ by GitHub
tailwind.config.js

That’s it! Ensure to run start to use these tailwind classes. Just remember to write the class correctly. For example, if you want a grayish blue background base to your custom class, simply write something like: 

<div className="bg-grayish-blue">This background is grayish blue</div>

Step 7- Extending classes (*bonus)

There can be a situation where you find yourself where the style isn’t just right. Perhaps a little adjustment and it’s perfect. Unlike the base theme property, the extend property can add extra classes without erasing the previous ones. The only ones replaced are the new classes that are of the same name as the previous ones. All the other classes of that style are still available.

module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
height: {
'50': '12.5rem',
'62' : '15.5rem'
},
width:{
'68': '17rem'
},
maxWidth: {
'xl': '33rem',
'4xl': "50rem"
},
fontSize:{
'4xl' : '2.5rem'
},
},
colors : {
'violet': '#674baf',
'red': '#ff5c7c',
'orange': '#ff8c66',
'yellow': '#f1c65b',
'blue': '#56c2e6',
'purple': '#7536d3',
'green': '#4acf81',
'light-gray': '#f2f2f2',
'very-light-gray': '#fafafa',
'grayish-blue': '#a3a5ae',
'very-dark-blue': '#4c4e61',
'transparent-white':'#ffffffbf',
'transparent': 'transparent',
'white': '#ffffff',
'black': '#000000'
},
fontFamily : {
'rubik': ['Rubik', 'sans-serif']
}
},
plugins: [],
}
view raw tailwind.config.js hosted with ❤ by GitHub

Learning Tools

  • Frontend Mentor: This project was designed and brought to you by Frontend Mentor. Frontend Mentor provides real-world challenges for various skill levels, enabling people to improve in their frontend skills.
  • Tailwindcss: for more info on how you can maximize your CSS skills, head over to tailwind.

Learning Strategy

The thing with learning a new skill or framework is that at first, it may seem a bit overwhelming. But it shouldn’t stop you from progressing. Tailwind was a strange concept for me when I first began, but the more I learned about it, the easier it became. And please note, before jumping into tailwind or any CSS frameworks, a good CSS understanding is important.

Reflective Analysis

Tailwind’s new update is a little different from its older ones. It generates its classes based on the classes provided. If you don’t run start, or after you do and you don’t type the class you need, it may not work. Also, using the installation of version 2 may not work for version 3.

Customizing your tailwind CSS colors and fonts, or even any other classes, is not necessary unless you have some adjustments you want to make.

Hire the author: Hikmah Y