Tailwind CSS & related things

Anh-Thi Dinh
Web Dev
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.
Tailwind v4
  • Defint a custom font weight ← Check all theme variable namespaces
      • 1// old in tailwind.config.ts
2theme: {
3	extend: {
4		fontWeight: { inherit: 'inherit' }
5	}
6}
7
8// new in globals.css
9@theme {
10	--font-weight-inherit: 'inherit';
11}
  • Alternative to content in the old config → @source
  • Import plugins:
      • 1@plugin 'tailwindcss-animate';
2@plugin '@tailwindcss/typography';
  • @layer utilities isn’t supported
      • 1// old
2@layer utilities {
3	.custom-class {...}
4	.another {
5		@apply hover:custom-class; // <- error in v4, undefined custom-class
6	}
7}
8
9// new v4
10@utility custom-class {...}
11.another {
12	@apply hover:custom-class;
13}
Custom class name to show the autocompletion (default to className)
1{
2	"settings": {
3		"tailwindCSS.classAttributes": ["className", "textClassName", ".*ClassName.*"]
4	}
5}
Cannot applied to .vscode/settings.json but can be used in the workspace setting. Sources: link, link.
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.
👉 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}
With custom variable,
1left-[var(--radix-menubar-trigger-width)]
@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}