The most notable change is in version 4, Tailwind CSS no longer use `tailwind.config.ts` configuration file.

To add custom color or other customisation, we define variables under `@theme` directive inside CSS file.

```css
/* index.css */
import "tailwindcss";

@theme {
 --color-prime-teal: #008080;
 --font-poppins: Poppins, sans-serif;
}
```

There are set of predefined variable prefixes which they call [theme variable namespace](https://tailwindcss.com/docs/theme#theme-variable-namespaces).

```css
--color-*
--font-*
--text-*
...
```

Each prefix will generate its corresponding utility classes.

```html
Prime Teal
```

The most notable change is in version 4, Tailwind CSS no longer use <code>tailwind.config.ts</code> configuration file.
To add custom color or other customisation, we define variables under <code>@theme</code> directive inside CSS file.
<pre><code class="hljs language-css">/* index.css */
import "tailwindcss";

@theme {
 --color-prime-teal: #008080;
 --font-poppins: Poppins, sans-serif;
}
</code></pre>
There are set of predefined variable prefixes which they call <a href="https://tailwindcss.com/docs/theme#theme-variable-namespaces">theme variable namespace</a>.
<pre><code class="hljs language-css">--color-*
--font-*
--text-*
...
</code></pre>
Each prefix will generate its corresponding utility classes.
<pre><code class="hljs language-html">&#x3C;p class="color-prime-teal font-poppins">Prime Teal&#x3C;/p>
</code></pre>

Tailwind CSS v4 summary