Tips

Best practices

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!

Tailwind components

!important

Make all classes go with !importantread this.

Only apply to one → !font-medium (read this)

Third-party libraries

@headless-ui's Listbox with createPortal and @floating-ui

👉 Refs: [@floating-ui](<https://floating-ui.com/>), [@headless-ui](<https://headlessui.com/>), [createPortal](<https://react.dev/reference/react-dom/createPortal>).

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.

import { Listbox, Transition } from '@headlessui/react'
import { createPortal } from 'react-dom'

export default .... {
	const { refs, floatingStyles } = useFloating()

	return (
		<Listbox ...>
			<Listbox.Button ref={refs.setReference} ...>
			{createPortal(
				<Transition ref={refs.setFloating} ...>
					<Listbox.Options style={{...otherStyles, ...floatingStyles}}>
					...
			, document.body)}
	)
}