CSS frameworks addresses one of the key challenges faced when building React applications which is, styling in a way that ensures maintainability, scalability and responsiveness across different devices.

CSS frameworks are pre-built, reusable collections of CSS code that includes components, utilities and layout systems. These frameworks offer ready-made styles and component, making it easier for you to design beautiful, responsive applications without writing a lot of custom CSS.

While React provides several options for styling, one of the most efficient ways to speed up the development process and maintain an attractive, consistent look and feel across the application is by using a CSS framework.

We will be learning about using two of the most popular CSS frameworks - Bootstrap and TailwindCSS with React for styling.

Styling with Bootstrap

Bootstrap is a CSS framework that provides a collection of pre-built CSS classes and JavaScript components that make it easier to design a responsive layout quickly.

Integrating Bootstrap into your React project can save you time and effort, allowing you to focus on building your application's functionalities rather than spending time on styling from the scratch.

To start using Bootstrap styling in your React app, you need to incorporate Bootstrap into your app. There are three ways of going about this, which are:

• Installing Bootstrap via npm: After installation, locate the entry file of your project usually found in the src folder of your project (could be index.js or App.js). Then import bootstrap/dist/css/bootstrap.min.css at the top level of the file.

• Using Bootstrap's CDN: This method is straight-forward. All you need to do is to insert the Bootstrap CDN link in the head section of your public/index.html file.

• Using React-Bootstrap: After installation, locate your src/index.js and import bootstrap/dist/css/bootstrap.min.css.

Using Bootstrap in your App Component

After incorporating Bootstrap and giving it the reins to power your styling, you can now apply Bootstrap classes directly into your code.

Example

export default function App() {
  return (
    <div className="container">
      <h1 className="text-center text-danger">Welcome to React with Bootstrap!</h1>
      <button className="btn btn-success">Click Me</button>
    </div>
  );
}

In this example, basic Bootstrap classes for content alignment (container), text alignment (text-center), special text color (text-danger) and button (btn btn-primary) were used.

Output

Using React-Bootstrap in your app component works a bit differently. React-Bootstrap is a library that offers Bootstrap components as React components.

This is a great choice if you want to integrate Bootstrap in a more 'React-way' rather than using raw Bootstrap classes.

Example of using React-Bootstrap in React component

import { Button } from 'react-bootstrap';

export default function App() {
  return (
    <div className="container">
      <h1 className="text-center text-success">Hello from React-Bootstrap !</h1>
      <Button variant="primary">Click Me</Button>
    </div>
  );
}

In this example:

• We imported the pre-built Button component from the react-bootstrap library.
• Attached a variant prop to the Button and set it to a primary value.

Output

Styling with TailwindCSS

TailwindCSS is a utility-first CSS framework that provides low-level utility classes that allows you to construct custom designs directly in your HTML or JSX. Unlike traditional CSS frameworks that offer predefined components, TailwindCSS offers granular control over styling.It achieves this by composing utility classes for every aspect of the design.

TailwindCSS comes with several benefits, such as being utility-first, easily customizable, having a small bundle size, aiding faster development, and supporting responsive design.

When combined with React, it enhances productivity and flexibility, making it easier to style React components efficiently.

Using TailwindCSS in your app component

The easiest and most efficient way of integrating TailwindCSS styling into your project is to use its CDN link. The link should be placed in the head section of the index.html file of your project.

Example of using TailwindCSS in React

export default function App() {
  return (
    <div>
      <h1 className="text-center text-green-400 font-bold text-3xl p-3">Hello from Tailwind in React!</h1>
    </div>
  );
}

In this example, the <h1> element has Tailwind's utility classes applied directly to it. They are:

• text-center: For aligning text to center of the page.
• text-green-400: To give the text a color of green and shade of 400.
• font-bold: To bolden the font.
• text-3xl: To increase the text size by 3.
• p-3: Adds a padding of 3.

Output

Handling Dynamic Classes

React allows for dynamic class names, enabling you to change the applied classes based on certain conditions. This is particularly useful when working with both Bootstrap and TailwindCSS, as it lets you apply different utility classes dynamically based on the component's state or props.

Example using Bootstrap

function App() {
  const isActive = true;
  
  return (
    <div className={`p-4 ${isActive ? 'bg-success text-white' : 'bg-secondary text-dark'} rounded`}>
      This is a card
    </div>
  );
}

In this example:

• The variable isActive is set to boolean value of true.
• A div with a padding of 4 and rounded corners is always returned with a text, "This is a card".
• If isActive is true: Adds bg-success (green background) and text-white (white text).
• If isActive is false: Adds bg-secondary (gray background) and text-dark (dark text).

Example using Tailwind

export default function App() {
  const isActive = true
  return (
        <div className={`p-4 ${isActive ? 'bg-green-500 text-white' : 'bg-gray-300 text-gray'} rounded-lg text-center `}>
          This is a card
        </div>
    
  );
}

In this example:

• The variable isActive is set to boolean value of true.
• A div with a padding of 4, large rounded edges and text centered horizontally is always returned with a text, "This is a card".
• If isActive is true: Adds bg-green-500 (green background color with opacity set to a value of 500) and text-white (white text).
• If isActive is false: Adds bg-gray-300 (gray background color with opacity set to a value of 300) and text-gray (gray text).

Output when isActive is true:

Output when isActive is false: