Dall'archivio script > HTML5

Utilizzare Tailwind CSS all'interno di React: primi componenti

di Morgan PizziniMorgan Pizzini, in HTML5,

Nel nostro percorso alla scoperta di Tailwind CSS, approfondiamo ora l'utilizzo pratico di questo framework per la creazione di componenti di base all'interno di un'applicazione web statica, provando ad utilizzare elementi comuni come navbar, bottoni e form.

Per iniziare, creiamo una navbar responsiva utilizzando le classi di utilità di Tailwind. Definiamo la struttura base nel nostro file .html e applichiamo le classi di Tailwind per ottenere uno stile adeguato.

// index.html
<nav class="bg-blue-500 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-white font-bold text-xl">Il Nostro Logo</div>
    <ul class="flex space-x-4">
      <li class="text-white hover:text-gray-300">Home</li>
      <li class="text-white hover:text-gray-300">Servizi</li>
      <li class="text-white hover:text-gray-300">Contatti</li>
    </ul>
  </div>
</nav>

In questo esempio, le classi di Tailwind CSS come bg-blue-500, p-4, mx-auto, e hover:text-gray-300 sono utilizzate per definire lo stile della navbar. Tailwind semplifica la gestione degli stili, consentendoci di concentrarci sulla struttura e il layout.

Se aprissimo ora la pagina, in un qualsiasi browser, ci accorgeremmo che nessuno stile CSS è applicato. Controllando poi il file public/styles.css, frutto della compilazione di style.css, noteremo che non conterrà alcuna classe utilizzata per la navbar. Questo accade perchè nella configurazione di Tailwind CSS, che verrà letta da postcss non abbiamo specificato quale file html/js utilizzerà le classi Tailwind CSS. Rimediamo a questo problema, aggiungendo il puntatore corretto all'interno di tailwind.config.js

module.exports = {
  content: [
    "./public/**/*.{html,js}"
  ],
  ...
}


Ricompilando il file, la pagina verrà ora presentata seguendo gli stili CSS impostati.

Passiamo ora alla creazione di bottoni: a differenza di altri framework, come Bootstrap non troveremo una classe btn-primary, bensì dovremmo impostare ogni aspetto dello stile per ognuno dei bottoni

<div class="flex space-x-4">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Pulsante Primario
  </button>
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
    Pulsante Secondario
  </button>
</div>

Infine, impostiamo un form elegante utilizzando le classi di Tailwind CSS:

<form class="max-w-md mx-auto mt-8">
  <div class="mb-4">
    <label class="block text-gray-700 text-sm font-bold mb-2" htmlFor="username">
      Nome Utente
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="username"
      type="text"
      placeholder="Inserisci il tuo nome utente"
    />
  </div>
  <div class="mb-6">
    <label class="block text-gray-700 text-sm font-bold mb-2" htmlFor="password">
      Password
    </label>
    <input
      class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
      id="password"
      type="password"
      placeholder="********"
    />
  </div>
  <div class="flex items-center justify-between">
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="button"
    >
      Accedi
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
      Password dimenticata?
    </a>
  </div>
</form>

Tailwind semplifica la definizione degli stili dei campi di input, dei pulsanti e delle etichette; ma la rende anche molto verbosa, per questo motivo nei prossimi script vedremo come migliorare e semplificare la scrittura di un componente per Tailwind CSS.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi