Sviluppiamo una pagina di Resume con React, Tailwind e Vite — parte 2/2

Rieccoci! Nella prima parte di questa serie abbiamo creato lo scheletro applicativo del nostro resume, adesso ci “sporcheremo” le mani con Tailwind.

In poche parole (un sunto per le persone pigre)

In questa seconda e ultima parte ti spiegherò quali sono i vantaggi di Tailwind e come puoi usarlo per “stilare” i tuoi progetti.

Vedremo insieme qualche esempio e alla fine troverai il link alla repo Github del template che ho realizzato:

Eccolo Live: https://resume-template-six.vercel.app

Perchè Tailwind

Tailwind CSS è un tema hot in questo momento. Ha dei principi molto solidi e punta ad ottimizzare e rivoluzionare il modo di scrivere codice CSS.

Uno dei vantaggi principali è quello di offrire una vasta gamma di utility generalizzate che possono servirti in diversi casi.

Possiamo vedere un esempio calzante qui sotto:

un codice del genere
<div class="profile-card">...

con Tailwind può trasformarsi in questo:
<div class="m-4 p-2 bg-grey-100 border rounded shadow-md">...

Minuscole classi che definiscono un aspetto stilistico ciascuna invece che poche e grosse classi poco generalizzabili e quindi poco riusabili.

Esempio Flash: Realizziamo una Card

Ecco un esempio di un componente Card realizzato con Tailwind CSS.

ALERT: all'inizio, la ripetizione di tutte queste classi potrebbe sembrarti molto strana e potresti quindi decidere di non proseguire, ma cerca di dare ancora un po‘ di tempo a Tailwind e inizia a giocarci un po’.

Con un po’ di pratica inizierai sicuramente ad apprezzare e a comprendere quanti vantaggi puoi ottenere con il concetto di composizione.

Vediamo adesso il codice:

<div class="bg-white rounded shadow border p-6 w-64">
  <h5 class="text-3xl font-bold mb-4 mt-0">My Title</h5>
  <p class="text-gray-700 text-sm">Content goes here</p>
</div>

Ecco l’esempio live: https://codepen.io/riktar/pen/poeRMRQ

Vediamo in dettaglio le utility utilizzate con il loro corrispettivo CSS:

• bg-white: background: #fff
• rounded: border-radius: 0.25rem
• shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)
• border: border-width: 1px
• p-6: padding: 1.5rem
• w-64: width: 16rem

Ecco quelle del titolo:

• text-3xl: font-size: 1.875rem
• font-bold: font-weight: 700
• mb-4: margin-bottom: .75rem
• mt-0: margin-top: 0

e quelle per il contenuto della card:

• text-gray-700: color: #4a5568
• text-sm: font-size: .875rem

Rispetto agli altri…

Forse ti starai chiedendo:

“Perché dovremmo usare un framework di utility che renderà il nostro HTML più complesso?”

La risposta è semplice: La maggior parte dei framework CSS fa troppo.

Quando si utilizza Bootstrap o qualcosa di simile, avremo molte classi predefinite come card, navbar e altro.

Non appena vogliamo personalizzare queste cose per i nostri progetti, dovremo scrivere CSS personalizzati e provare a sovrascrivere gli stili di base, provocando quasi sempre discrepanze o, diciamocelo, dei veri e propri casini!

Tailwind ci offre un approccio “usa ciò di cui hai bisogno”.

Questo vantaggio sarà più evidente quanto più tempo trascorrerai con il framework.

Potrebbe volerci un po ‘di tempo per abituarsi, ma credo che ne valga la pena.

Non avrai mai più bisogno di sovrascrivere le classi del framework CSS.

Bonus Time

Vuoi toccare con mano qualcosa fatto con Tailwind? Ho preparato una repo Github con un tema che puoi personalizzare a tuo piacimento.

Lo trovi qui:

webeetle/resume-react-app

Se l’articolo ti è piaciuto o hai domande, ti aspetto nei commenti!

Alla prossima.