Padding and alignments of buttons, etc are weird when using styled + tailwind
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- nextjs, react, tailwindcss, typescript, vite
Direzione di ricerca
Inizia da vite-styled-tailwind/src/index.css e confronta i suoi valori di font-size e line-height con la documentazione del componente Button all’indirizzo primereact.org/button/. Riproduci lo stile negli esempi Vite e Next.js, quindi verifica che il padding di button e input e l’allineamento di icone e radio corrispondano all’aspetto documentato.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
When using Prime React with Styled + Tailwind options (Vite and Nextjs, for example), the padding on the button and the alignment of the icons/ other components is different than what is shown on the documentation page.
When using the original values in vite-styled-tailwind/src/index.css:
font-size: 16px;
line-height: 24px;
The button and the input field have excessive padding, the icon in the cutton is too low, radio buttons look normal.
Now I change the values in in vite-styled-tailwind/src/index.css:
font-size: 14px;
line-height: 18px;
to match font size: 14px used the Button Component documentation page (https://primereact.org/button/). line-height is not used there, interestingly enough.
As one can see, the buttons look different, also the alignment of the radio buttons and the icon inside the button is off:
There seems to be some issue here where Tailwind is interfering with the layout, can anyone help out? Thanks.
- Lingua principale
- TypeScript
- Stelle
- 140
- Fork
- 106
- Metriche di merge delle PR
- 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
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di primefaces/primereact-examples
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 30/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 45/100
Tutte le issue di primefaces/primereact-examples
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 76/100
Northeastern-Electric-Racing/FinishLine#4660 ·
I maintainer di solito rispondono entro 2 giorni
-
BeOS .json missingAperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
mihaip/infinite-mac#475 ·
-
Let TypeScript accept an initial object in ReactiveDictForse già presa @yograj-vijay-yadav l’ha presa oggi. Apertabug good first issue help wanted workshop
Difficoltà 2/5 1-3 ore Idoneità per principianti 92/100
meteor/meteor#14919 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 83/100
marmelab/atomic-crm#401 ·
I maintainer di solito rispondono entro 1 giorno
-
account: profile
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
I maintainer di solito rispondono entro 5 giorni