How do I add a custom colour in Tailwind v4?
Add it under @theme in your stylesheet, as --color-brand, and every utility picks it up: bg-brand, text-brand, border-brand.
And for dark mode?
Redefine the variable under .dark. The utilities read the variable, so they follow it without a dark: prefix.
Can I use it with opacity?
Yes. bg-brand/10 works, since v4 mixes colours with color-mix instead of splitting them into channels.
What about a gradient between two brand colours?
Use from-brand to-brand-2. Both stops read the theme variables, so the gradient switches with dark mode too. If the two colours are far apart, add via-brand-mid so the middle doesn't go grey.
Does it work in arbitrary values?
Reference it as var(--color-brand) inside the brackets.
How do I share the theme across two apps?
Put the @theme block in a package and import that stylesheet from both apps. Each app can still override a variable after the import.
Will my old tailwind.config.js still work?
Only through @config, as a bridge while you move over. New projects don't need a config file at all.
Thanks
Any time.