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

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.

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 and follow through the setup. Once done, navigate to your project folder and run:

cd react-tailwind
npm install

Now, install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This will create two configuration files: tailwind.config.js and postcss.config.js.

Configuration

Since we are installing Tailwind CSS on a Vite React app, 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.

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 your browser:

A beautiful pink text on your screen saying “Hello Tailwind and Bye Bye annoying css files!”

Conclusion

In this article, we have covered the basics of what Tailwind CSS 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!