[Bug]: Working in development but not in production

[ahmedsamirdev]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.3.0

What browser are you using?

chrome

Reproduction repository

https://codesandbox.io/s/nameless-fog-2k3ur?file=/components/Nav.js

Describe your issue

I have problem with "(Disclosure) from @headlessui/react" doesn't work.. this in dev mode (nextjs) deplyed in vercel

and this in production and after pushing the code successfully

Here's the code ..
https://codesandbox.io/s/nameless-fog-2k3ur?file=/components/Nav.js

deployed code ..
https://ahmedsamir.dev/test

[ahmedsamirdev]

I found out the problem was the purge in tailwind.config.js
purge: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js'],
and ofc when I remove the purge it affects the site badly on mobile
why?

[adamwathan]

Hey! Please provide an actual reproduction repository — if you're saying the issue is the purge stuff then the Codesandbox is missing a lot of important information because there is no tailwind.config.js file provided.

A GitHub repo of the actual Next.js is needed to really see what's going on.

Since this is a styling related thing that is fixed by editing your Tailwind config, it's definitely not a bug with Headless UI itself, so going to convert to a discussion.

[MiljenkoLogozar]

I have the same problem with { Switch } from '@headlessui/react'

I dev environment working perfectly:

In production (Next.js 11.0.1, TailwindCSS 2.2.4):

Toggle/Switch event working but complete Visual component is missing (https://www.storydeck.io/pricing/)

[demeralde]

I haven't got this problem (yet), but I was just thinking about how it's going to cause issues:

<Transition
  show={show}
  as={Fragment}
  enter="transform ease-out duration-300 transition"
  enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
  enterTo="translate-y-0 opacity-100 sm:translate-x-0"
  leave="transition ease-in duration-100"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
/>

PurgeCSS doesn't know to search these arbitrary props. It only searches for className.

Headless UI should provide a straightforward configuration for use with Tailwind/PurgeCSS, so this works out of the box (instead of it needing to be manually configured).

[RobinMalfait]

Hey! Thanks for your concern, but both purge css and the new JIT engine will work just fine. They look at the full file contents and not just the className/class attribute.