How to use Tailwind CSS 3 with Headless UI In React

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

React JS

Install Tailwind CSS v3 In React

Create react project

npx create-react-app react-headlessui 

move to project folder & run.

cd react-headlessui
npm start

Install tailwind v3.

npm install -D tailwindcss postcss autoprefixer

Create tailwind config file.

npx tailwindcss init

Next, you need to set tailwind config path.

tailwind.config.js

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

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

App.js

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

Install headless ui

To get started, install Headless UI via npm or yarn:

# npm
npm install @headlessui/react

# Yarn
yarn add @headlessui/react

Now lets test headless ui toggle code.

App.js

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

run project via npm or yarn.

# npm
npm start

# Yarn
yarn start

You can use more tailwind headless components in doc.

Read Also

React Tailwind CSS Accordion (FAQ) Example

React Tailwind CSS Tabs Examples

How to use Tailwind CSS 3 with Headless UI In React

Toggle Switch in React JS with Tailwind CSS Example

Create Reusable Button Component with React & Tailwind CSS

React Tailwind CSS Search Bar Example

React Tailwind CSS Sidebar Example

React JS Login Form with Tailwind CSS Example

React Responsive Navbar Menu With Tailwind CSS Example

How to install Tailwind CSS in React

React Tailwind CSS Dialog (Modal) Example

React Tailwind Registration Form Example

React Tailwind CSS Table Example

React Tailwind CSS Responsive Gallery Example