Tailwind & related things

Anh-Thi Dinh
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.
group-hover with prefix
1<div class="tw-group">
2	<div class="group-hover:tw-bg-slate-100"></div>
3</div>
:not in tailwind
Example: don’t apply :hover effect on the :disabled button
1[&:not(:disabled)]:hover:tw-bg-gray-500
Color preview doesn’t show in VSCode (preview = a square containing the color before the class)
If you have a custom color in tailwind config file,
1{
2	theme: {
3		extend: {
4			colors: {
5				'custom': 'var(--custom-color)' // not show
6				'hello': '#fff' // show			}
7		}
8	}
9}
Tailwind’s preflight break existing styles
In case you want to integrate TW to your current system, it may break the existing style because of its preflight. For example, the buttons may be hidden unexpectedly.
Use both Bootstrap and Tailwind → naming conflicts
To avoid this, use prefix option (eg. tw-font-semibold instead of font-semibold). Read more in this SO.
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!
!important
Make all classes go with !importantread this.
Only apply to one → !font-medium (read this)
calc
1// Tailwind
2class="w-[calc(100%+2rem)]"
1// CSS
2.w-\[calc\(100\%\+2rem\)\] {
3  width: calc(100% + 2rem);
4}
@headless-ui's Listbox with createPortal and @floating-ui
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}