How to Install and Configure Tailwind CSS in React

2 min readFeb 2, 2024

In this article, I will show how to install and configure tailwind CSS in React.

React Project

Step 1: Create Your React Project

First of all, you need to create a React application if you don’t have one already. I have a dedicated article about how to create a react application with vite.

Otherwise, you can simply create a react application with vite using a single command.

npm create vite@latest my-app -- --template react

then navigate to the project folder

cd my-app

and install the dependencies

npm install

Step 2: Install Tailwind CSS

Install Tailwind and its peer dependencies

npm install -D tailwindcss postcss autoprefixer

then generate tailwind.config.js and postcss.config.js files.

npx tailwindcss init -p

Step 3: Configure template paths

Add the paths to all of your template files in the tailwind.config.js file.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 4: Add the Tailwind Directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file. Also, you can add this to ./src/App.css file.

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Test Tailwind Working or Not in your Project

Run your project using the following command.

npm run dev

for testing purposes, you can write this code in your App.jsx file

// App.jsx
function App() {
  return (
    <>
      <h1 className="text-center text-3xl font-bold underline">Hello World</h1>
    </>
  );
}

export default App;

finally, it’s working

Conclusion

In this step-by-step tutorial, I showed how to install tailwind CSS and generate its configuration file too. Also, configured the necessary template paths and added tailwind directives to your CSS files. Finally, I showed, how to test tailwind works or not in your react project.

References

Tailwind official document is here.

I always appreciate Any suggestions or feedback

Feel free to contact me

Linkedin, Facebook