Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Changes in Tailwind CSS v4

Aperta
  • Qualcosa non va?
#919 89 commenti 3 reazioni 0 assegnatari Vedi su GitHub

Una pull request collegata è già stata integrata.

  • #991 di @ineshbose — integrata

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
20/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
nuxt, tailwindcss
Ambito
build-system, frontend

Direzione di ricerca

Start with the Tailwind CSS v4 prerelease documentation and compare its configuration, source detection, and theme-variable changes with the module's current behavior. Review the discussion and existing features such as hooks and exposeConfig; done requires a decided migration direction and agreed scope for the next module version.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

breaking-change enhancement help wanted question

Hi everyone,

I'm creating this issue to get an idea from the users of this module about certain changes and features in Tailwind CSS v4 that they'd like this module to integrate with.

If you haven't already, do give a read to the v4 prerelease documentation that covers all the changes:
https://tailwindcss.com/docs/v4-beta

I mention in #790 that this module mostly aims at installing and configuring Tailwind to your Nuxt project a breeze, and with this new version, Tailwind CSS has made it even easier; still, there are minor steps like configuring Vite within Nuxt (or webpack/other builders using PostCSS), setting up CSS, merging all the Nuxt layers, etc -- this is where the module would still be required.

There are a few more things that have changed in Tailwind CSS v4 that heavily influence on the approach for the next version of this module; I'm hoping to get comments on these functionalities (and more general bits I may have missed).

Configuration

Previously Tailwind required us to create a tailwind.config.js to enable minimum installation; this configuration file also helps in using plugins, safelists, and extending theme. This is no longer necessary, you can use v4 without a configuration file.

How would you configure the theme?

The idea of Tailwind v4 is that it will be more tailwind.css configuration focused, than tailwind.config.cjs (based on my understanding from this video). So, you have the @theme directive. Read more about this here - https://tailwindcss.com/docs/v4-beta#customizing-your-theme

With that said, any (existing) configuration files can still be used in v4 - https://tailwindcss.com/docs/v4-beta#using-legacy-configuration-files - but it will not be highly configurable through this approach (also note the usage of word "legacy").

Content Configuration

When creating a tailwind.config file, you were required to specify resolvable paths to your source code in the content property. This module also did that for you, so it wasn't necessary. However, projects have different natures of organising source code. Moreover, a file may exist in the tracker but not in the app lifecycle/tree; the class utilities from that file would still contribute to the final CSS.

Tailwind v4 now looks at the module graph and detects utilities accordingly. Still, paths can be configured explicitly; read https://tailwindcss.com/docs/v4-beta#configuring-source-detection.

Exposed CSS variables

There was a little section in Tailwind v3 docs about referencing (configuration) in JavaScript. Here again this module provided an exposeConfig feature 👼 that would provide tree-shakable, typed values to your configurations.

Tailwind v4 is based on CSS variables now, and the resolveConfig function is not exported anymore. https://tailwindcss.com/docs/v4-beta#referencing-theme-values-in-js

Given some of the changes pointed above, I'm trying to brainstorm on where we go next. It may be possible to maintain the current usage of the module to work with v4, but it may not enable its best potential. We can also change into a tailwind.css based module (have the module generate it and automatically integrate) which seems like a nice idea. We could just be a simple Vite/PostCSS plugin installer too 😄

So here's what I'm hoping to hear from you:

  1. are there current features from the module that you use and heavily rely on? (hooks, exposeConfig, etc)
  2. how much configuration do you tend to use for Tailwind, and if you'd move to using the new @theme, @plugin, etc. directives?
  3. is there anything in Tailwind v4 changes that you would want the module to bank on (like no longer providing our own content paths to use automatic detection, and also remove exposeConfig to use CSS variables), or possibly still have those abilities (that may not be as-usable at their best potential)?

Let me know what you all think. I'm excited to take this new exciting route that hopefully everyone can enjoy!

Lingua principale
TypeScript
Stelle
1.9k
Fork
193
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di nuxt-modules/tailwindcss

Tutte le issue di nuxt-modules/tailwindcss

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.