Tailwind CSS + Decaro.la
Questa pagina nasce da un post, giusto per fare una prova. In breve: dovevo provare Tailwind.
Tutto il testo che trovi da qui in avanti l'ho scritto mente scrivevo il codice per riempire i vuoti. In pratica ha la valenza di un lorem ipsum.
È un po' scomodo usare tutte queste classi. Non ho capito come si fa a stilare gli pseudo. E si fa fatica a stilare i "figli di", mandando un po' la cascata a farsi benedire.
Si potrebbe comunque fare delle classi ad hoc e specificare quello che non si può con le sole classi di Tailwind.
Tailwind inteso come vento 💨 che ti spinge da dietro 🚴🏼♂️
La leggibilità di questo header (incompleto):
<header class="mt-2 mb-3 relative grid grid-cols-12 gap-4 text-left border-solid border-8 border-purple-400 md:grid-rows-1">
La dice lunga.
In realtà tutte queste dinamiche svaniscono nel momento in cui si lavora per componenti. Quindi un bottone viene stilato in questo modo 🥺
<a class="bg-blue-600 hover:bg-blue-300 text-white font-bold py-2 px-4 rounded" href="[...]" >Torna al post</a>
Incluso in un component e successivamente richiamato così:
<my-button @click="submit" ref="submitButton">Torna al post</my-button>
Molto più leggibile. Resta comunque che hai stilato un bottone con quel codice lì.
(qui sotto hai il codice di questo bottone qui sopra)
<p><a class="inline-block relative px-3 py-4 bg-purple-600 text-orange-200 uppercase mb-1 text-center font-bold transition duration-200 oh-god-i-miss-my-shadow hover:bg-green-800 cursor-pointer">Torna al post</a></p>