How to use Tailwind CSS in a React project.

Théo Balick — Mon, 03 Jul 2023 15:45:35 +0000

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 is an open-source JavaScript library developed by Facebook to create user interfaces. And Tailwind CSS 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 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

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.

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:

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

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.

The file generated must be the same as the one on the image:

/** @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:

/** @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! 😱😱😩😭

@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.

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:

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, Parcel or Next.js, for example. They offer a more flexible development experience, giving you more control over how Tailwind and PostCSS are configured.

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

Forem: Théo Balick

How to use Tailwind CSS in a React project.

1. Introduction

2. Create a react project

2. Add Tailwind css to the project