How to use Tailwind CSS in a React project.
Tags: javascript, frontend, react, tailwindcss
Published: 2023-07-03 15:45:35

## 1. Introduction

Web design is a hot topic these days, and with the constant evolution of technology and design trends, there are always new techniques, tools and best practices to learn. And among all the methods or means of creating websites that exist, two tools have come to the fore in recent years when it comes to interface creation and design technologies. These are React and tailwind css. It's often difficult at first to get started with or use both in the same project. In this article, I'll explain how to use tailwind css in a react project.

As a reminder, [React](https://react.dev) is an open-source JavaScript library developed by Facebook to create user interfaces. And [Tailwind CSS](https://tailwindcss.com) is a framework that focuses on utility, allowing you to write utility classes directly in your html tags. Handy if you want to save time and be productive!

Are you ready? Let's go 😊🥰

Note: You must have [node js](https://nodejs.org/en) installed on your machine. If you don't, here's the link to download it: https://nodejs.org/fr/download
You can check whether node is installed on your computer by typing the following command in the terminal: `$ node --version`

![console image after executing the node --version command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rncqr8nrszuux9130hf9.jpg)

In my case, for example, node is well installed and I'm using version 18.13.0. The version may be different depending on when you installed node js on your machine.

Before you start, you need to initialize your react project. If you already have your React project and simply want to add tailwind css to your existing project, you can go straight to the "Adding tailwind css to your project" section.
Here's how to do it: 👇👇👇👇

## 2. Create a react project

The quickest way to do this is with the `create-react-app` tool, which already comes with all the necessary configurations for a React project by default.

**#1. Initialize your react project**

Go to the folder where you want to initialize your React project, open the command line and type the following command: `npx create-react-app my-app` where `my-app` is the name of your project. In my case, I'm going to create a project called demo-react-tailwind:

```
npx create-react-app demo-react-tailwind
```

**#2. Move into your project**

```
cd demo-react-tailwind
```

**#3. start the development server**

```
npm start
```
After typing the `npm start` command, the console will display a message telling you that all has gone well, and the development server will be launched on port `3000`. The port may be different, but if you get a message similar to mine, it means that all went well.

![Image of the console showing that all went well](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibvrav01uvh562xxsrhl.jpg)

Now you can go to your browser and navigate to the local address displayed in the console. In my case, it's `http://localhost:3000`
You should get the following page:

![Web page image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvazl12zfbs51tnezpyj.jpg)

That's it, you've just created your React project! Finally 😊🥰🤩
Your structure should look like this:

![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fudkb1waauswlmq4foqs.jpg)
If you'd like to know more about the `create-react-app tool`, visit the following link: https://create-react-app.dev/

## 2. Add Tailwind css to the project 

To add Tailwind to your project, follow the steps below:

**#1. Install Tailwind CSS**

In your project, open the terminal and type the following command:
```
npm install -D tailwindcss
```

**#2. Generate configuration file**

Tailwind css works with a configuration file. To generate it, type the following command in your terminal:
```
npx tailwindcss init
```
Check your directory and see if the configuration file has been added.
![Project structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed2a95bcs9y1odenhn3i.jpg)
The file generated must be the same as the one on the image:

```typescript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

**#3. Configure your template paths**

In your configuration file, you need to add the paths of all your files that use tailwind styles so that the compiler can recognize the styles. For example:
```typescript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

**#4. Add the Tailwind directives to your CSS**

Once the last step is done, you need to add the tailwind directives to your css file.

Note: Directives must be added at the beginning of the file, otherwise it won't work! 😱😱😩😭
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* rest of code */
```
Now you can use tailwind in your React project. 🥰🎉✨

**#5. Start using Tailwind in your project**

Now we'll test it to see if it works. In the App file in the src folder, try changing the color of the paragraph text.

```react
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p className='text-lime-600'> {/* change this line */}
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

And here's the result: the text has changed from white to Lime:

![App's image file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmcwppdgwn1h2ct3ccmh.jpg)

If you'd like to see the full code, here's the link: https://github.com/Balick/basic-react-tailwind-boilerplate

Note: If you want to use the full power of Tailwind css, a recommended tool called PostCSS is recommended.
Unfortunately, Create React App does not support custom PostCSS configurations and is incompatible with many important tools in the ecosystem. A solution to this problem would be to use [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/) or [Next.js](https://nextjs.org/), for example. They offer a more flexible development experience, giving you more control over how [Tailwind](https://tailwindcss.com/) and [PostCSS](https://postcss.org/) are configured.

We'll talk about it in a future article. We'll talk about it in a future article 😊😊🤗🤗