- [source] Don’t use
@applyjust to make things look “cleaner”. Otherwise you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you.
Problems with Tailwind CSS IntelliSense VSCode extension
When you type the first class right after
className=", this gives you nothing. However, if you type "" (the second " will display automatically), the suggestions will appear normally!Make all classes go with
!important → read this.Only apply to one →
!font-medium (read this)There is a problem when using Listbox. That’s when your component is inside an “overflow: hidden” component. The Listbox Panel will be hidden by its parent.
To solve this, we use the idea of createPortal and move the Panel to the root of the document and we use floating-ui (especially, we use only
@floating-ui/react-dom ← it’s smaller size than @floating-ui/react) to position the panel to be near to the button.1import { Listbox, Transition } from '@headlessui/react'
2import { createPortal } from 'react-dom'
3
4export default .... {
5 const { refs, floatingStyles } = useFloating()
6
7 return (
8 <Listbox ...>
9 <Listbox.Button ref={refs.setReference} ...>
10 {createPortal(
11 <Transition ref={refs.setFloating} ...>
12 <Listbox.Options style={{...otherStyles, ...floatingStyles}}>
13 ...
14 , document.body)}
15 )
16}