React and TailwindCSS: A Complete Guide

Introduction to TailwindCSS

If you're a web developer who has ever spent hours writing custom CSS code for every element in your design, you know how frustrating and time-consuming it can be. That's where TailwindCSS comes in: this popular CSS framework provides a comprehensive set of pre-defined classes that make styling your HTML elements a breeze. But TailwindCSS isn't just about making your life easier; it also helps improve the maintainability of your code, so you can spend less time fixing bugs and more time creating awesome designs.

In this article, we'll take a closer look at how TailwindCSS works and why so many developers are raving about it. We'll explore some of the key features that make TailwindCSS stand out from other CSS frameworks, and we'll show you how it can help you create responsive, visually appealing designs that are optimized for search engines.

Whether you're a beginner or an experienced developer, we've got you covered. We'll break down some of the technical aspects of TailwindCSS in plain English, so you can understand how it works and start using it in your projects right away. So grab a cup of coffee and join us as we explore the wonderful world of Tailwind CSS!

Setting up a new React Project with TailwindCSS

First, create a new React project. (I'm using Vite, you can use create-react-app or anything you prefer)

yarn create vite

Then the terminal will prompt you to enter a name for your project.

success Installed "create-vite@4.2.0" with binaries:
      - create-vite
      - cva
? Project name: » react-tailwind

Give your project a name; for this purpose, I will name it "react-tailwind".

√ Project name: ... react-tailwind
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others

Select React from the given options.

√ Select a framework: » React
? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    JavaScript + SWC
    TypeScript + SWC

Pick typescript as our variant, but you are free to use any variant you prefer. Once you pick the variant, you should get a success message saying:

Scaffolding project in C:\Users\azula9713\Documents\Dev\react-tailwind...

Done. Now run:

  cd react-tailwind
  yarn
  yarn dev

Done in 13.57s.

Once you get the success message, navigate to your project folder, follow the instructions, and run "yarn" to install packages.

After you install the default packages, now it's time to install TailwindCSS to our project. Run the following command in the terminal inside your project folder:

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Now that we have installed the required plugins to run Tailwind in our project, there are a few modifications we have to make in our code to make it work.

Open the tailwind.config.js file in your code editor and replace it with the following code:

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

Then open the index.css file inside your src folder and replace it with the following code:

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

You can delete the App.css file since we will not be using it in our project. Finally, to test whether our configurations work, paste the following code inside your App.tsx file.

function App() {
  return (
    <div className="min-h-screen flex justify-center items-center">
      <h1 className="text-2xl font-bold text-pink-600">
        Hello Tailwind and Bye Bye annoying css files!
      </h1>
    </div>
  );
}

export default App;

Once the changes are done, simply run the dev command and open the given localhost port in your browser. (Your localhost port might be different from what's shown below example)

yarn dev

yarn run v1.22.19
$ vite

  VITE v4.2.1  ready in 439 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

If everything is working, you should be able to see the following output.

In this article, we have covered the basics of what Tailwind is and how to install it in a React project. In the next part of this series, we will explore how to use Tailwind CSS classes to style your React components efficiently.

Make sure to subscribe to my newsletter. That way, you'll receive notifications directly in your inbox when I publish new content. Stay tuned!

Effortlessly Build Modern UIs with React and TailwindCSS: A Complete Guide - Part 1

Introduction to TailwindCSS

Setting up a new React Project with TailwindCSS