Tailwind & related things

☝

The official doc is really good to start, this note is for what I use regularly.

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.

Play with tailwind.

: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.

👉 Disable preflight in the config.

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 !important → read 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

👉 Refs: @floating-ui, @headless-ui, 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.

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}