How to use Tailwind CSS 3 with Headless UI In React
Tags: react, tailwindcss, headlessui, webdev
Published: 2022-10-21 06:16:21

In this section we will install tailwind v3 headless ui react. Headless UI is a set of completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. it is also provide dropdown menu, lightbox, Switch (Toggle), Dialog (Modal), Popover, Radio Group, Transition, Tabs. So you can easily copy and paste code in you project.

### Tool Use
**Tailwind CSS 3.x**
**[Headless UI](https://headlessui.com/)**
**React JS**

### Install Tailwind CSS v3 In React
Create react project
```react
npx create-react-app react-headlessui 
```
move to project folder & run.
```react
cd react-headlessui
npm start
```
Install tailwind v3.
```react
npm install -D tailwindcss postcss autoprefixer
```
Create tailwind config file.
```react
npx tailwindcss init
```
Next, you need to set tailwind config path.

_tailwind.config.js_
```react
module.exports = {
 content: [
  "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
  extend: {},
 },
 plugins: [],
}
```

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
_index.css_
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
_App.js_
```react
function App() {
  return (
    <div className="container mx-auto mt-4">
      <h1 className="text-xl font-bold ">
        Setup Tailwind CSS 3 with{' '}
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-600">
          Headless UI In React
        </span>
      </h1>
    </div>
  );
}


export default App;
```
![tailwind react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qprrbo7t15rohf08qma.png)
**Install headless ui**
To get started, install Headless UI via npm or yarn:
```react
# npm
npm install @headlessui/react

# Yarn
yarn add @headlessui/react
```
Now lets test headless ui toggle code. 

_App.js_
```react
import { useState } from 'react'
import { Switch } from '@headlessui/react'

export default function App() {
  const [enabled, setEnabled] = useState(false)

  return (
    <div className="container mx-auto mt-20">
      <h1 className="text-xl font-bold ">
        Tailwind Headless UI {' '}
        <span className="text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-blue-500 to-purple-600">
          Switch (Toggle)
        </span>
      </h1>
      <div className="ml-28">
        <Switch
          checked={enabled}
          onChange={setEnabled}
          className={`${enabled ? 'bg-teal-900' : 'bg-teal-700'}
          relative inline-flex flex-shrink-0 h-[38px] w-[74px] border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
        >
          <span className="sr-only">Use setting</span>
          <span
            aria-hidden="true"
            className={`${enabled ? 'translate-x-9' : 'translate-x-0'}
            pointer-events-none inline-block h-[34px] w-[34px] rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200`}
          />
        </Switch>
      </div>
    </div>
  )
}
```

![tailwind react headless toggle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaozln4yz6aky0jq7wq7.png)

run project via npm or yarn.
```react
# npm
npm start

# Yarn
yarn start
```

You can use more tailwind headless components in [doc](https://headlessui.com/).

[![Buy Me A laptop](https://demo.larainfo.com/images/help-me-to-buy-a-laptop.png)](https://www.buymeacoffee.com/same6)


### Read Also
👉 [Tailwind CSS Halloween Buttons Tutorial Example](https://larainfo.com/blogs/tailwind-css-halloween-buttons-tutorial-example)

👉 [Tailwind CSS List Style Marker Example](https://larainfo.com/blogs/tailwind-css-list-style-marker-example)

👉 [Create a Google Clone UI using Tailwind CSS](https://larainfo.com/blogs/create-a-google-clone-ui-using-tailwind-css)

👉 [Tailwind CSS Use Custom Fonts Example](https://larainfo.com/blogs/tailwind-css-use-custom-fonts-example)

👉 [Tailwind CSS Line Chart Example](https://larainfo.com/blogs/tailwind-css-line-chart-example)

👉 [Tailwind CSS Gradient Button Example](https://larainfo.com/blogs/tailwind-css-gradient-button-example)

👉 [Tailwind CSS Text Gradient Example](https://larainfo.com/blogs/tailwind-css-text-gradient-example)

👉 [Tailwind CSS Simple POST CRUD UI Example](https://larainfo.com/blogs/tailwind-css-simple-post-crud-ui-example)

👉 [Tailwind CSS Thank You Page Example](https://larainfo.com/blogs/tailwind-css-thank-you-page-example)

👉 [Tailwind CSS 3 Breadcrumb Example](https://larainfo.com/blogs/tailwind-css-3-breadcrumb-example)

👉 [Tailwind CSS 3D Button Example](https://larainfo.com/blogs/tailwind-css-3d-button-example)

👉 [How to Use Custom Colors in Tailwind CSS](https://larainfo.com/blogs/how-to-use-custom-colors-in-tailwind-css)

👉 [How to Use Strike Tag (cut text) in Tailwind CSS](https://larainfo.com/blogs/how-to-use-strike-tag-cut-text-in-tailwind-css)

👉 [Tailwind CSS Headings Typography Examples](https://larainfo.com/blogs/tailwind-css-headings-typography-examples)

👉 [Tailwind CSS Product List Example](https://larainfo.com/blogs/tailwind-css-product-list-example)

👉 [How to Center a Div in Tailwind CSS](https://larainfo.com/blogs/how-to-center-a-div-in-tailwind-css)