DEV Community

Cover image for How to use Tailwind CSS 3 with Headless UI In React
saim
saim

Posted on • Originally published at larainfo.com

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 
Enter fullscreen mode Exit fullscreen mode

move to project folder & run.

cd react-headlessui
npm start
Enter fullscreen mode Exit fullscreen mode

Install tailwind v3.

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Create tailwind config file.

npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Next, you need to set tailwind config path.

tailwind.config.js

module.exports = {
 content: [
  "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
  extend: {},
 },
 plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.
index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

tailwind react headless toggle

run project via npm or yarn.

# npm
npm start

# Yarn
yarn start
Enter fullscreen mode Exit fullscreen mode

You can use more tailwind headless components in doc.

Buy Me A laptop

Read Also

πŸ‘‰ Tailwind CSS Halloween Buttons Tutorial Example

πŸ‘‰ Tailwind CSS List Style Marker Example

πŸ‘‰ Create a Google Clone UI using Tailwind CSS

πŸ‘‰ Tailwind CSS Use Custom Fonts Example

πŸ‘‰ Tailwind CSS Line Chart Example

πŸ‘‰ Tailwind CSS Gradient Button Example

πŸ‘‰ Tailwind CSS Text Gradient Example

πŸ‘‰ Tailwind CSS Simple POST CRUD UI Example

πŸ‘‰ Tailwind CSS Thank You Page Example

πŸ‘‰ Tailwind CSS 3 Breadcrumb Example

πŸ‘‰ Tailwind CSS 3D Button Example

πŸ‘‰ How to Use Custom Colors in Tailwind CSS

πŸ‘‰ How to Use Strike Tag (cut text) in Tailwind CSS

πŸ‘‰ Tailwind CSS Headings Typography Examples

πŸ‘‰ Tailwind CSS Product List Example

πŸ‘‰ How to Center a Div in Tailwind CSS

Top comments (0)