How to use Tailwind CSS in React JS for Beginners | Install Tailwind CSS in React App from Scratch

Tailwind CSS has gained immense popularity for its utility-first approach to styling. In this blog post, we will explore how to seamlessly integrate Tailwind CSS into your React projects. Additionally, we’ll delve into the usage of plugins, custom colors, and component-based utilities with real-world examples.

Getting Started

Step 1: Installation

Begin by installing the necessary dependencies:

# Install Tailwind CSS and its dependencies
npm install tailwindcss postcss autoprefixer` 

Next, generate a default configuration file:

npx tailwindcss init -p

Step 2: Configuring Tailwind

Tailwind CSS is highly customizable. Open the generated tailwind.config.js file, where you can tweak default settings, add plugins, and define custom colors.

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Integrating Tailwind with React Components

Styling Components

Tailwind CSS provides a plethora of utility classes that can be applied directly to your JSX. Let’s see this in action:

// Button.jsx
import React from 'react';

const Button = () => {
  return (
    <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded">
      Click me
    </button>
  );
};

export default Button;

Dynamic Styling with Class Composition

Tailwind excels at dynamic styling. Use class composition to conditionally apply styles:

// StatusBadge.jsx
import React from 'react';

const StatusBadge = ({ status }) => {
  const badgeClasses = `px-2 py-1 rounded ${status === 'active' ? 'bg-green-500' : 'bg-red-500'}`;

  return (
    <span className={badgeClasses}>
      {status}
    </span>
  );
};

export default StatusBadge;

Tailwind Plugins

Tailwind CSS supports plugins that extend its functionality. Let’s explore an example of integrating the tailwindcss/forms plugin to style form elements:

Step 1: Install the Plugin

npm install @tailwindcss/forms

Step 2: Update tailwind.config.js

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Now, you can use Tailwind’s form styling in your React components.

How to use the form plugin in Tailwind CSS

Custom Colors and Component-Based Utilities

Tailwind enables the definition of custom colors to match your brand. Additionally, component-based utilities streamline styling for reusable components.

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        primary: '#3498db',
      },
      spacing: {
        '72': '18rem',
      },
      // ...
    },
  },
}

In your React component:

// CustomColorComponent.jsx
import React from 'react';

const CustomColorComponent = () => {
  return (
    <div className="bg-primary text-white p-8">
      This component uses a custom primary color.
    </div>
  );
};

export default CustomColorComponent;

Conclusion

Integrating Tailwind CSS into your React projects is a breeze, offering a powerful and flexible styling solution. With plugins, custom colors, and component-based utilities, Tailwind empowers you to create stylish and consistent UIs. Experiment with these features, and elevate your React development experience with Tailwind CSS. Happy coding!