How to use custom color themes in TailwindCSS v4

tux_tina

My tailwind.config.js in v3 looks like this, but I can't find a way to use it in v4: theme: { extend: { colors: { lightHover: '#fcf4ff', darkHover: '#2a004a', darktheme: '#11001f', }, fontFamily: { Outfit: ["Outfit", "sans-serif"], Ovo: ["Ovo", "serif"] }, boxShadow: { 'black': '4px 4px 0 #000', 'white': '4px 4px 0 #fff', }, gridTemplateColumns: { 'auto': 'repeat(auto-fit, minmax(200px, 1fr))' } }, }, darkMode: 'selector', This is a piece of...

Originally asked by 卢佳楠 on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Starting from TailwindCSS v4, the CSS-first configuration is preferred, meaning the init process and the tailwind.config.js file have been removed. What's breaking changes from TailwindCSS v4 New CSS-first configuration from TailwindCSS v4 Removed @tailwind directives Deprecated: Sass, Less and Stylus preprocessors support Customize theme with CSS-first directives In a CSS-first configuration, several directives are available. For theme customization, you can primarily use the @theme directive: @import "tailwindcss"; @theme { --font-display: "Satoshi", "sans-serif"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22);...

Full answer by rozsazoltan: https://stackoverflow.stackexchange.com/a/79499827 (CC BY-SA 4.0).

Need it done for your business? UphillTech.