Dall'archivio script > HTML5

Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI

di Morgan PizziniMorgan Pizzini, in HTML5, React,

Tailwind CSS può essere modificato e integrato attraverso svariate librerie. In questo script prenderemo in considerazione Preline UI, una libreria disponibile su NPM che applica un tema e altre funzionalità a Tailwind CSS in progetti React.

Utilizzando il progetto esistente, possiamo procedere all'installazione della libreria.

npm install preline-ui
# plugin necessario per la corretta disposizione delle forms
npm install -D @tailwindcss/forms

Occorre ricordare che Tailwind CSS utilizza dei processi per ridurre al minimo il CSS, dovremo dunque inserire il codice sorgente di Preline UI e i relativi plugin all'interno di tailwind.config.js.

//tailwind.config.js
module.exports = {
  content: [
      [...],
      'node_modules/preline/dist/*.js',
  ],
  plugins: [
      [...],
      require('@tailwindcss/forms'),
      require('preline/plugin'),
  ],
}

All'interno del nostro componente React possiamo ora utilizzare Preline UI per stilizzare i componenti, in questo caso un bottone e un campo di input. 

// app.jsx
import React from 'react';
import 'preline-ui';

function App() {
  return (
    <input type="text" 
      className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 
        focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 
        dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600" 
      placeholder="mio placeholder"/>
    <button type="button" 
      className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border 
        border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 
        disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
      Premi qui
    </button>
  );
}

L'utilizzo di tutte le classi fornite aiuta a stabile i comportamenti degli elementi nei vari casi d'uso; siano essi utilizzati all'interno di un tema scuro, disabilitati o selezionati.

Nel prossimo script troveremo una soluzione alla verbosità che il tema richiede, in modo tale da poter creare dei componenti atomici, senza la necessità di inserire classi per tutte le casistiche.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
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