loading...
Cover image for Config Tailwind CSS in React JS project in TL;DR way

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

gillarohith profile image Rohith Gilla ・2 min read

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • Now the following command initialises tailwind with its default config.
npx tailwind init tailwind.js --full
Enter fullscreen mode Exit fullscreen mode
  • 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')
    ],
};
Enter fullscreen mode Exit fullscreen mode
  • 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";

Enter fullscreen mode Exit fullscreen mode
  • 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"
  }
Enter fullscreen mode Exit fullscreen mode
  • This is the final step Yes, you read it right. Just add the following import in index.js.
import './assets/main.css'
Enter fullscreen mode Exit fullscreen mode

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.

Template Button

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",
      }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Peace ✌🏻
Rohith Gilla.

Discussion

pic
Editor guide
Collapse
mattwaler profile image
Matt Waler

This is a great way to get started with Tailwind!

However, you really should introduce PurgeCSS into your build process to scan your react files to remove all the unused utilities tailwind generates during development. The CSS file you might be shipping to your browsers without it will be massive!

See the Controlling File Size section on the official site, or feel free to ping me for more info on how to get that going!

Collapse
gillarohith profile image
Rohith Gilla Author

Thanks so much, can you make a PR for the same.
That would help others who would use the template.

Collapse
mattwaler profile image
Matt Waler

Can I recommend a different starter, one that is preconfigured with Next.js? I have a starter template for that already made!

github.com/mattwaler/next-starter

Thread Thread
gillarohith profile image
Rohith Gilla Author

Hey nice but I want to have one with create-react-app, the one used by many. So created this.

Repo is so good, organisation and everything 🔥

Thread Thread
mattwaler profile image
Matt Waler

I think create-react-app doesn't mesh well with Tailwind since it doesn't expose the webpack config, so you have to create separate package.json scripts just to get the css to be importable.

If you wanna open up an issue in your repo and assign my github account to it, I can take a crack eventually sometime!

Thread Thread
gillarohith profile image
Rohith Gilla Author

Sure will do that.
Thanks.