Spiking Tailwind CSS in a React App

Table Of Contents

• Introduction
• Tailwind
• Setup
• Using Tailwind in React
• Something a Little More

Introduction

It’s been some time since I did any frontend development, and I don’t miss it. After a couple of years of learning the fundamentals, I would have loved to have some alternatives to manually writing CSS.

Now that I am diving back into it, I am happy there are tools not to replace but improve the CSS experience. In that spirit, I want to look at Tailwind CSS.

Tailwind CSS

Tailwind is different from other CSS frameworks I’ve tried. The software works on a lower level to allow easy CSS styling utilizing class names. Bootstrap works similarly, but the difference is that Tailwind does not come with predefined components. It is also different because the class names are compiled into CSS code.

Tailwind is also not opinionated about how you make your designs, and thus they give you the tools you need and let you create unique components. It’s the difference between designing boots on a website and having all the materials right before you to cobble together your shoes. This alone is valuable because you can avoid falling into the Bootstrap design trap.

Tailwind is a “utility-first CSS Library,” From what I glean from their site, it means they tried to create a framework from a set of constrained utilities. This seems to translate into the following:

• There are no more CSS class names to create in both HTML and CSS files as styles are implemented using low-level utility classes.
• You add the styles you want into the HTML classes, which the compiler uses to generate CSS (which is attractive to me).
• Your CSS files don’t grow since you’re generally not creating new styles.
• The ability to create reusable styles using things like loops.

Tailwind also gives you ways to easily extend their utilities by utilizing config files for adding things like custom colors, fonts, etc.

I’ve noticed that they seem to lean into the idea of long strings of class names in HTML over regular CSS. You’ll see what I mean.

Setup

So to try this and to learn the tech better for use in my work, I created a quick React application.

After the React app creation, we can run the below commands.

npm install tailwindcss

This will install the needed packages.

npx tailwindcss init

The above command will create the config files we need, the tailwind.config.js and the postcss.config.js files. The tailwind.config.js is where any customization options will go. By default, Tailwind looks for this file at the root of a project to create any customizations. For example, if you want to add colors or fonts that Tailwind does not have built-in, they will go in that config file.

After that is installed, you replace everything in your index.css file with the below lines.

@tailwind base;
@tailwind components;
@tailwind utilities;

And finally, to ensure that all the template files are added to the Tailwind config, make sure the tailwind.config.js file looks like the below code.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

It’s a bit much, but that’s essentially it. You’re now ready to start styling stuff.

Using Tailwind in React

After setting up our React project and installing Tailwind, I was ready to go. So I got rid of all the startup React stuff and started small.

<h1 className="">I'm using Tailwind!</h1>

Pretty easy, and we get a simple heading tag.

Now let’s start small and add some styling.

<h1 className="text-red-700 text-6xl hover:text-9xl">I'm using Tailwind!</h1>

Now I added a couple of styling classes to the JSX, and just like we were editing a CSS file, we got some results.

You may also notice the hover selector in there. Tailwind takes care of these, similar to how CSS does. You prepend the effect you want and the outcome, and it works just the same.And we can see the style change a little when we hover over the text.

Adding these class names saved me from opening up VSCode and adding styles to a CSS file. I am already sold on Tailwind.

You can also see the core use of Tailwind in adding class names to the HTML tags. This is a small example, but tags can have tons of styles, so adding a class name into the HTML can get overwhelming quickly. This is the language they lean into that I mentioned above.

Something a Little More

I am not a designer, but I find this setup easy to create components. So let’s say I broke my app into pieces. How can I style this card component I made? Tailwind makes it simple.

export default function Card() {
    return (
        <div class="p-20 bg-green-100">
            <h3 class="text-green-300 mb-4 text-sm font-bold">
                This is some cool Tailwind Stuff!
            </h3>
            <div class="border-4 border-green-800 bg-white p-6 rounded-lg shadow-lg">
                <h2 class="text-2xl font-bold mb-2 text-gray-800">Look at this!</h2>
                <p class="text-gray-700">We did some Tailwind!</p>
            </div>
        </div>
    )
}

And the results.

I didn’t have to write a single bit of CSS for this, and now I have a perfectly usable component. There’s no ending to this rabbit hole. Design all you want.

Conclusion

I can’t bring myself to write CSS. It’s a doomed relationship; with too much bad blood and too much history. However, I might just get through with Tailwind as a buffer for those awkward times I have to sit with it.

Hyperbole aside, Tailwind is not a replacement for CSS but a fantastic addition to CSS for easily styling web components. Coupled with React, this was how we were meant to make apps. I’m excited to continue learning and hope this helped.

Small disclaimer: I am not suggesting anyone reading this who might be new to frontend development jump straight into learning Tailwind. That journey starts with learning how CSS works. Much like filmmaking, learn all the fundamentals first and then break the rules at your leisure.

-George