How to Create React Tabs with Tailwind CSS.
Tags: tailwindcss, webdev, javascript, react
Published: 2023-04-12 13:25:19

React is a popular JavaScript library that allows developers to create complex user interfaces in a simple and efficient manner. Tailwind CSS is a utility-first CSS framework that makes it easy to create responsive and customizable user interfaces. In this blog, we will learn how to create React tabs using Tailwind CSS.

## Prerequisites

- Basic knowledge of React
- Basic knowledge of Tailwind CSS
- Node.js and NPM installed on your computer

### Step 1: Create a new React app

To create a new React app, open your terminal and run the following command:

```lua
npx create-react-app react-tabs-tailwind
```

This will create a new React app called react-tabs-tailwind.

### Step 2: Install Tailwind CSS

To install Tailwind CSS, run the following command in your terminal:

```lua
npm install tailwindcss
```

### Step 3: Configure Tailwind CSS

Create a new file called tailwind.config.js in the root directory of your project and add the following code:

```js
Copy code
module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

This will configure Tailwind CSS for your project.

### Step 4: Add Tailwind CSS to your project

Open the index.css file in the src directory and add the following code:

```css
Copy code
@tailwind base;
@tailwind components;
@tailwind utilities;
```

This will add Tailwind CSS to your project.

### Step 5: Create a new component called Tabs

Create a new file called Tabs.js in the src/components directory and add the following code:

```jsx
import React, { useState } from 'react';

const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(children[0].props.label);

  const handleClick = (e, newActiveTab) => {
    e.preventDefault();
    setActiveTab(newActiveTab);
  };

  return (
    <div className="max-w-md mx-auto">
      <div className="flex border-b border-gray-300">
        {children.map(child => (
          <button
            key={child.props.label}
            className={`${
              activeTab === child.props.label ? 'border-b-2 border-purple-500' : ''
            } flex-1 text-gray-700 font-medium py-2`}
            onClick={e => handleClick(e, child.props.label)}
          >
            {child.props.label}
          </button>
        ))}
      </div>
      <div className="py-4">
        {children.map(child => {
          if (child.props.label === activeTab) {
            return <div key={child.props.label}>{child.props.children}</div>;
          }
          return null;
        })}
      </div>
    </div>
  );
};

const Tab = ({ label, children }) => {
  return (
    <div label={label} className="hidden">
      {children}
    </div>
  );
};
export { Tabs, Tab };
```

This component takes an array of tabs as a prop and renders the tab navigation and content.

### Step 6: Create a new component called App

Open the App.js file in the src directory and replace the existing code with the following:

```jsx
import React from 'react';
import { Tabs, Tab } from './Tabs';

const App = () => {
  return (
    <div>
      <Tabs>
        <Tab label="Tab 1">
          <div className="py-4">
            <h2 className="text-lg font-medium mb-2">Tab 1 Content</h2>
            <p className="text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae
              quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis
              harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
              Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius
              earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia
              aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas
              aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium
              molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
              recusandae alias error harum maxime adipisci amet laborum.
            </p>
          </div>
        </Tab>
        <Tab label="Tab 2">
          <div className="py-4">
            <h2 className="text-lg font-medium mb-2">Tab 2 Content</h2>
            <p className="text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae
              quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis
              harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
              Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius
              earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia
              aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas
              aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium
              molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
              recusandae alias error harum maxime adipisci amet laborum.
            </p>
          </div>
        </Tab>
        <Tab label="Tab 3">
          <div className="py-4">
            <h2 className="text-lg font-medium mb-2">Tab 3 Content</h2>
            <p className="text-gray-700">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae
              quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis
              harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
              Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius
              earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia
              aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas
              aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium
              molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam
              recusandae alias error harum maxime adipisci amet laborum.
            </p>
          </div>
        </Tab>
      </Tabs>
    </div>
  );
};

export default App;
```

In this code, we've added some content to each Tab component using Tailwind CSS classes for styling. The content consists of a heading and a paragraph of text. When a tab is active, its content is displayed below the tab buttons. The Tabs component now maps over its children to find the active tab's content and renders it. Note that the Tab component itself is still hidden and only serves to define the label of each tab.

### Step7: Rendering the content on the application

Now, we have to show the tabs we have created on our web page by rendering it on our index.js file.

```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

After rendering the application, our react Tabs with Tailwind css will look like the image below.


![Tailwind react tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24sm4hu45hal1z3sfi2z.png)

![Tailwind react tab 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2aocmtlpsqch49y2siz.png)


![tailwind react tab 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bemy6fb7axf81la6enay.png)

## Conclusion

In conclusion, creating tabs in React with Tailwind CSS is a straightforward process that can be achieved by following a few simple steps.

First, you need to install the necessary packages such as react and tailwindcss. Next, you can create the Tab components and rendering it on the index.js file just luke we have done.

To style the tabs with Tailwind CSS, you can use utility classes such as [border, rounded](https://www.devwares.com/tailwindcss/classes/tailwind-border-radius/), and [background color](https://www.devwares.com/tailwindcss/classes/tailwind-background-color/). You can also use hover, active, and focus variants to add interactive behavior to the tabs.

Overall, creating tabs in React with Tailwind CSS is a powerful way to create a user-friendly and visually appealing interface. With the help of the react and the flexibility of Tailwind CSS, you can easily customize the tabs to fit your specific design needs.


## Resources


- [Tailwind Background Origin](https://www.devwares.com/tailwindcss/classes/tailwind-background-origin/)
- [Tailwind background image](https://www.devwares.com/tailwindcss/classes/tailwind-background-image/)
- [Tailwind Background Repeat](https://www.devwares.com/tailwindcss/classes/tailwind-background-repeat/)
- [Tailwind Background Clip](https://www.devwares.com/tailwindcss/classes/tailwind-background-clip/)
- [Tailwind Background attachment](https://www.devwares.com/tailwindcss/classes/tailwind-background-attachment/)
- [Tailwind Background origin](https://www.devwares.com/tailwindcss/classes/tailwind-background-origin/)
- [Tailwind background Position](https://www.devwares.com/tailwindcss/classes/tailwind-background-position/)
- [Tailwind CSS Background Size](https://www.devwares.com/tailwindcss/classes/tailwind-background-size/)
- [Tailwind Animation](https://www.devwares.com/tailwindcss/classes/tailwind-animation/)
- [Tailwind Align Self](https://www.devwares.com/tailwindcss/classes/tailwind-align-self/)
- [Tailwind Align Items](https://www.devwares.com/tailwindcss/classes/tailwind-align-items/)
- [Tailwind CSS Z-index](https://www.devwares.com/tailwindcss/classes/Z-index/)
- [Tailwind Border Collapse](https://www.devwares.com/tailwindcss/classes/tailwind-border-collapse/)
- [Tailwind CSS Border Spacing](https://www.devwares.com/tailwindcss/classes/tailwind-border-spacing/)
- [Tailwind CSS Border Width](https://www.devwares.com/tailwindcss/classes/tailwind-border-width/)
- [Tailwind CSS Box Shadow](https://www.devwares.com/tailwindcss/classes/tailwind-box-shadow/)
- [Tailwind CSS Content](https://www.devwares.com/tailwindcss/classes/tailwind-content/)
- [Tailwind CSS Box Shadow Color](https://www.devwares.com/tailwindcss/classes/tailwind-box-shadow-color/)
- [Tailwind CSS Display](https://www.devwares.com/tailwindcss/classes/tailwind-display/)
- [Tailwind CSS Flex Grow](https://www.devwares.com/tailwindcss/classes/tailwind-flex-grow/)
- [Tailwind CSS Flex](https://www.devwares.com/tailwindcss/classes/tailwind-flex/)
- [Tailwind CSS Flex Direction](https://www.devwares.com/tailwindcss/classes/tailwind-flex-direction/)
- [Tailwind CSS Flex Grow](https://www.devwares.com/tailwindcss/classes/tailwind-flex-grow/)
- [Tailwind CSS Flex Shrink](https://www.devwares.com/tailwindcss/classes/tailwind-flex-shrink/)
- [Tailwind CSS Flex wrap](https://www.devwares.com/tailwindcss/classes/tailwind-flex-wrap/)

- [Tailwind Border Color](https://www.devwares.com/tailwindcss/classes/tailwind-border-color/)
- [Tailwind CSS Width](https://www.devwares.com/tailwindcss/classes/tailwind-width/)
- [Tailwind CSS Transform](https://www.devwares.com/tailwindcss/classes/tailwind-transform/)
- [Tailwind CSS Translate](https://www.devwares.com/tailwindcss/classes/tailwind-translate/)
- [Tailwind CSS Word Break](https://www.devwares.com/tailwindcss/classes/tailwind-word-break/)
- [Tailwind CSS Text Indent](https://www.devwares.com/tailwindcss/classes/tailwind-text-indent/)
- [Tailwind CSS Whitespace](https://www.devwares.com/tailwindcss/classes/tailwind-whitespace/)
- [Tailwind CSS Vertical Align](https://www.devwares.com/tailwindcss/classes/tailwind-vertical-align/)
- [Tailwind CSS Text Decoration](https://www.devwares.com/tailwindcss/classes/tailwind-text-decoration/)
- [Tailwind CSS Transform Origin](https://www.devwares.com/tailwindcss/classes/tailwind-transform-origin/)
- [Tailwind CSS Text Decoration Thickness](https://www.devwares.com/tailwindcss/classes/tailwind-text-decoration-thickness/)
- [Tailwind CSS Text Decoration Style](https://www.devwares.com/tailwindcss/classes/tailwind-text-decoration-style/)
- [Tailwind CSS Text Color](https://www.devwares.com/tailwindcss/classes/tailwind-text-color/)
- [Tailwind CSS Text-align](https://www.devwares.com/tailwindcss/classes/tailwind-text-align/)
- [Tailwind CSS Screen Reader](https://www.devwares.com/tailwindcss/classes/tailwind-screen-readers/)
- [Tailwind CSS Stroke](https://www.devwares.com/tailwindcss/classes/tailwind-stroke/)
- [Tailwind CSS Position](https://www.devwares.com/tailwindcss/classes/tailwind-position/)
- [Tailwind CSS Stroke Width](https://www.devwares.com/tailwindcss/classes/tailwind-stroke-width/)
- [Tailwind CSS Skew](https://www.devwares.com/tailwindcss/classes/tailwind-skew/)
- [Tailwind CSS Place-items](https://www.devwares.com/tailwindcss/classes/tailwind-place-items/)
- [Tailwind CSS Scale](https://www.devwares.com/tailwindcss/classes/tailwind-scale/)
- [Tailwind CSS Place-content](https://www.devwares.com/tailwindcss/classes/tailwind-place-content/)
- [Tailwind CSS Rotate](https://www.devwares.com/tailwindcss/classes/tailwind-rotate/)
- [Tailwind CSS Place-self](https://www.devwares.com/tailwindcss/classes/tailwind-place-self/)
- [Tailwind Padding](https://www.devwares.com/tailwindcss/classes/tailwind-padding/)
- [Tailwind CSS Overflow](https://www.devwares.com/tailwindcss/classes/tailwind-overflow/)
- [Tailwind CSS Opacity](https://www.devwares.com/tailwindcss/classes/tailwind-opacity/)
- [Tailwind CSS Order](https://www.devwares.com/tailwindcss/classes/tailwind-order/)
- [Tailwind CSS Over scroll Behaviour](https://www.devwares.com/tailwindcss/classes/tailwind-overscroll-behaviour/)
- [Tailwind Margin](https://www.devwares.com/tailwindcss/classes/tailwind-margin/)
- [Tailwind CSS Object Position](https://www.devwares.com/tailwindcss/classes/tailwind-object-positions/)
- [Tailwind CSS Object Fit](https://www.devwares.com/tailwindcss/classes/tailwind-object-fit/)
- [Tailwind CSS Max-Width](https://www.devwares.com/tailwindcss/classes/tailwind-max-width/)
- [Tailwind CSS Min-Width](https://www.devwares.com/tailwindcss/classes/tailwind-min-width/)
- [Tailwind CSS Justify Self](https://www.devwares.com/tailwindcss/classes/tailwind-justify-self/)
- [Tailwind Height](https://www.devwares.com/tailwindcss/classes/tailwind-height/)
- [Tailwind min Height](https://www.devwares.com/tailwindcss/classes/tailwind-min-height/)
- [Tailwind CSS Max-Height](https://www.devwares.com/tailwindcss/classes/tailwind-max-height/)
- [Tailwind CSS List Style Type](https://www.devwares.com/tailwindcss/classes/tailwind-list-style-type/)
- [Tailwind CSS Justify-items](https://www.devwares.com/tailwindcss/classes/tailwind-justify-items/)
- [Tailwind CSS Line-height](https://www.devwares.com/tailwindcss/classes/tailwind-lineheight/)
- [Tailwind CSS List Style Position](https://www.devwares.com/tailwindcss/classes/tailwind-list-style-position/)
- [Tailwind CSS Line Clamp](https://www.devwares.com/tailwindcss/classes/tailwind-line-clamp/)
- [Tailwind CSS Justify Content](https://www.devwares.com/tailwindcss/classes/tailwind-justify-content/)
- [Tailwind CSS Letter-spacing](https://www.devwares.com/tailwindcss/classes/tailwind-letter-spacing/)
- [Tailwind CSS Hyphens](https://www.devwares.com/tailwindcss/classes/tailwind-hyphens/)
- [Tailwind Grid](https://www.devwares.com/tailwindcss/classes/tailwind-grid/)
- [Tailwind CSS Grid Auto Flow](https://www.devwares.com/tailwindcss/classes/tailwind-grid-auto-flow/)
- [Tailwind CSS Grid Auto Columns](https://www.devwares.com/tailwindcss/classes/tailwind-grid-auto-columns/)
- [Tailwind CSS Grid Auto Rows](https://www.devwares.com/tailwindcss/classes/tailwind-grid-auto-rows/)
- [Tailwind CSS Grid Column Start/End](https://www.devwares.com/tailwindcss/classes/tailwind-grid-column/)
- [Tailwind CSS Grid Row Start/End](https://www.devwares.com/tailwindcss/classes/tailwind-grid-row/)
- [Tailwind CSS Invisibility](https://www.devwares.com/tailwindcss/classes/tailwind-invisible/)
- [Tailwind CSS Font Weight](https://www.devwares.com/tailwindcss/classes/tailwind-font-weight/)
- [Tailwind CSS Gap](https://www.devwares.com/tailwindcss/classes/tailwind-gap/)
- [Tailwind CSS Font size](https://www.devwares.com/tailwindcss/classes/tailwind-font-size/)
- [Tailwind Font Family](https://www.devwares.com/tailwindcss/classes/tailwind-font-family/)
- [Tailwind CSS Fill](https://www.devwares.com/tailwindcss/classes/tailwind-fill/)

- [Tailwind CSS Z-index](https://www.devwares.com/tailwindcss/classes/Z-index/)