Tailwind CSS & related things

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.

Tailwind v4

Default theme variable reference

Import config js cũ, use @config

All directives like @theme, @source,…

Defint a custom font weight ← Check all theme variable namespaces

Alternative to content in the old config → @source

Import plugins:

@layer utilities isn’t supported

Custom class name to show the autocompletion (default to className)

group-hover with prefix

:not in tailwind

Example: don’t apply :hover effect on the :disabled button

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,

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

With custom variable,

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