Setup Tailwind UI in React project

Install packages

Ensure you’ve setup the open-source version of Tailwind

Install the Headless UI package for the JavaScript behaviour and the Heroicons package for icons:

npm install @headlessui/react @heroicons/react

Optional: Add the Inter font family

Add CDN link:

<link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Configure tailwind.config.js:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // ...
}

Restart your Tailwind script. For create-react-app projects, quit your dev server and run:

npm run start

Sources

• Tailwind UI docs