Tips

Best practices

• [source] Don’t use @apply just 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!

Tailwind components

!important

Make all classes go with !important → read 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)}
	)
}