gradints / gradints/tailwindcss-scrollbar

Support Tailwindcss v4

Aperta
#7 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
JavaScript
Stelle
25
Fork
0
Metriche di merge delle PR
Nessuna PR unita negli ultimi 30g

Descrizione

Currently the plugin works out of the box with the new `@plugin` directive. 👍

```
@plugin '@gradin/tailwindcss-scrollbar';
```

But I can't find a way to customize the value of the plugin without the Tailwind config file.
Since v4 now recommends to not use config file anymore, I need to make it support the new `@utility` and CSS variables via `@theme`.

```
// WIP v4 config
@theme {
--scrollbar-size: 5px; // width or height, default '5px'
--scrollbar-track-background: lightgray; // default '#f1f1f1'
--scrollbar-thumb-background: var(--color-gray-400); // default '#c1c1c1'
--scrollbar-thumb-border-radius: 40px; // default '40px'
--scrollbar-thumb-hover-background: darkgray; // default '#a8a8a8'
--scrollbar-thumb-hover-border-radius: 40px; // default '40px'

/* Other CSS attribute needs to be added manually yourself */
::-webkit-scrollbar-track {
// add any css attributes here
}
::-webkit-scrollbar-thumb {
// add any css attributes here
}
::-webkit-scrollbar-thumb:hover {
// add any css attributes here
}
}
```

It's almost 2 years since I touch this code, I need to remember all the workflow to update and publish it to npmjs.

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Inizia esaminando l’entry point del plugin Tailwind CSS esistente e i requisiti di Tailwind v4 per @plugin, @utility e @theme descritti nell’issue. Conferma come è configurato e pubblicato il plugin attuale, quindi definisci come completato il supporto alla personalizzazione senza un file di configurazione e la documentazione di un workflow npm pubblicabile.

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

Valutazione

Stack tecnologico
javascript, tailwindcss
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.