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

Document how to create custom utility classes and override them for different themes without confusion due to namespaces (Tailwind 4)

Aperta
  • Qualcosa non va?
#2,292 0 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Documentazione
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
tailwindcss
Ambito
documentation

Direzione di ricerca

Start by reading the issue examples and the linked discussion, then inspect the Tailwind v4 documentation covering @theme and custom variants. Determine the recommended namespace approach for theme-specific custom utilities; the work is done when the relevant docs explain it clearly with an example and avoid the naming confusion described here.

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

Descrizione

Imagine I want to have several custom utility classes - such as button-default-background or button-default-border - and also override them during dark mode (because I suppose this is one approach to create apps which support themes).

Now I could do it in following way based on tailwind 4 docs:

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-button-default-background: #eb6bd8;
}

@layer base {
 * {
   @variant dark {
     --color-button-default-background: #8e0d7a;
   }
 }
}

But it would generate utilities like bg-button-default-background and text-button-default-background right? However having value named: text-button-default-background seems a bit strange (usage of text and background in the same word) isn't it?

Current docs don't mention how to solve this problem.

In this discussion there was suggestion how to solve this, so can we put this information in the docs, if that's the best way to implement this using tailwind 4?

Lingua principale
MDX
Stelle
150
Fork
78
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 tailwindlabs/tailwindcss.com

Tutte le issue di tailwindlabs/tailwindcss.com

Issue simili

Altre issue su Documentation

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.