CSS-first configuration from TailwindCSS v4

Since you're using v4, you don't need the tailwind.config.js file; instead, you should use the CSS-first directives.

• CSS-first configuration - TailwindCSS v4 Blog
• Functions and directives - TailwindCSS v4 Docs
• New configuration option in v4 - StackOverflow

In CSS-first, you can define custom styles using 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);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

• @theme directive - TailwindCSS v4 Docs

Theme variables are defined in namespaces and each namespace corresponds to one or more utility class or variant APIs.

• Theme variable namespaces - TailwindCSS v4 Docs
• Default theme variable reference - TailwindCSS v4 Docs

How to use legacy JavaScript based configuration

However, it is still possible to continue using the tailwind.config.js through the @config directive.

• TailwindCSS v4 is backwards compatible with v3 - StackOverflow

Related:

• What's changed in TailwindCSS v4?