Config Tailwind CSS in React JS project in TL;DR way

TL;DR
Link to the React, Tailwind GitHub template https://github.com/Rohithgilla12/react-tailwind-template.
Live link .

In this post, we will be glancing over following

• Config Steps
• Easy way
• Adding custom colours to the tailwind config file.

As I mentioned in my previous article that we will discuss more on how to config react and tailwind project here we go.

This article is inspired by the following link.

Config Steps

• As done by many react projects, creating it using create-react-app.

npx create-react-app react-tailwind-template && cd react-tailwind-template

• Add tailwind,postcss-cli,autoprefixer as dev dependecies.

Note: I will be using yarn as a package manager, you can also use npm.

yarn add tailwindcss postcss-cli autoprefixer -D

• Now the following command initialises tailwind with its default config.

npx tailwind init tailwind.js --full

• We then config the postcss with the help of autoprefixer. Create a new file and name it postcss.config.js, add following code to the created file.

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.js'),
        require('autoprefixer')
    ],
};

• Okay I configured tailwind now what? Now, we add all the utility classes to our application by adding the following snippet into src/assets/tailwind.css file. Create the file if it doesn't exist.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

• Wohoo, am I good to go? Well not yet. You need to change your scripts in package.json in the following way.

  "scripts": {
    "start": "yarn run watch:css && react-scripts start",
    "build": "yarn run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  }

• This is the final step Yes, you read it right. Just add the following import in index.js.

import './assets/main.css'

Et Voila! now you can use tailwind utility classes in your web application.

Easy way

Well, as I always do. I created a GitHub template for the whole process, using which with just a click you can do the entire process.
Template.

Adding custom colours to the tailwind config file

Coming back to where it started, the youtube redesign, I wanted the colours to look the same, but in config file generated by tailwind we don't have them. Also by adding custom colour in the config file the utility classes for them are also generated.

You can add custom things in the following process. Open the tailwind.js file and inside the theme key add this

yt: {
        body: "#181818",
        nav: "#202020",
        textBox: "#737373",
        insideBox: "#121212",
        searchButton: "#313131",
        icon: "#909090",
        hoverColor: "#383838",
      }

Now, we can use them in any components. For example like this

<div className="bg-yt-nav h-16 block shadow-none">
 I am NavBar
</div>

Peace ✌🏻
Rohith Gilla.