React Tailwind Setup

Introduction

Let's have a quick introduction about React and Tailwind and also discuss why to use tailwind css.

What is React?

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. Meta and a community of individual developers and companies maintain it.

What is Tailwind CSS ?

Tailwind CSS is an open-source CSS framework. It allows us to write CSS in our JSX.

Why use Tailwind with React?

Tailwind Css helps to reduce the size of CSS code. In tailwind, we use tailwind classes to design our page. For example, let's consider we want to make a container flex and justify-content in the center.

The normal process will be like we will target the HTML / React Component with classes or id in CSS file and then apply required styling.

In tailwind css we style the jsx element by writing tailwind classes in classname.
const App = () => {
  return <div className='flex-row justify-center'></div>;
};

export default App;

// This will justify the content to center 
// and flex-direction will be row for the div.

The reasons to use Tailwind CSS over plain CSS are as follows:

Less Custom CSS
Small CSS files
No need to think for classnames
You can change any design anytime

Installation

Create React Project
```
  npx create-react-app my-project
```
Open project in Code editor ( Any editor you use for development )
Install TailwindCSS
```
  npm install -D tailwindcss
```
Generate tailwind.config.js file
```
  npx tailwindcss init
```
Configure Template paths so tailwind can read the code from the specific path and generate CSS file. This is how you tailwind.config.js file should look like this.

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

Navigate to ./src/index.css and add the tailwind directives to your CSS

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

For our ease, we can install Tailwind CSS IntelliSense from extensions.
This will help us to provide suggestions for tailwind classes that we can use.
Now we can start writing tailwind CSS in our .jsx or .js files.

  const App = () => {
    return (
      <div className='flex-row justify-center'>
        <h1 className='font-bold text-5xl p-4 m-4 text-blue-500 underline'>
          HELLO REACT TAILWIND
        </h1>
      </div>
    );
  };

  export default App;

To start React App we need to run the command npm start
The preview will look like this.
Now you can start writing tailwind classes classname and the changes will be reflected on the website. You don't need to maintain a separate CSS file and link it in each component.

Thanks for reading. I hope you will find this helpful and let me know if you face some issues while setting up tailwind CSS in your development environment. You can also refer to Tailwind CSS documentation for a more detailed explanation and tailwind classes.

You can get connected with me. Would love to learn more from you.
rohankulkarni.co

Rohan Kulkarni