Support Tailwind CSS v4

RihanArfan commented 3 weeks ago

Tailwind v4 moves configuration into CSS instead of tailwind.config.js. https://tailwindcss.com/blog/tailwindcss-v4-alpha

For example in v4 to specify a custom font, you'd just do this and then you can use .font-display within your HTML. (example from their blog post)

/* main.css */
@import "tailwindcss";

@theme {
  --font-family-display: "Satoshi", "sans-serif";
}

Workaround

Currently the workaround to use Tailwind CSS v4 with Nuxt Fonts is simply to specify using font-family in the CSS so it's loaded in.

@import "tailwindcss";

@theme {
  --font-family-marker: "Permanent Marker", cursive;
}

.nuxt-fonts-permanent-marker {
  font-family: "Permanent Marker", cursive;
}

qwerzl commented 3 weeks ago

This is already possible. v4 uses CSS variables to determine font families under the hood, so all you need is to enable experimental.processCSSVariables.

A demo here: https://codesandbox.io/p/github/qwerzl/fonts/test/tailwind-v4

RihanArfan commented 3 weeks ago

Perfect, thanks for letting me know! Closing this.

nuxt / fonts

Support Tailwind CSS v4 #132

Workaround