Scrivere CSS può essere davvero difficile. A volte può diventare frustrante mettere a punto un’idea o un progetto, a causa della messa a punto del codice di stile CSS.
Sicuramente sono molti quelli che hanno vissuto momenti di sofferenza, più volte nelle loro carriere di sviluppo.
Ma ora non più, perché possiamo imparare uno strumento interessante che ci toglie molte difficoltà. Tailwind, non Bootstrap … Tailwind.
Anche se Tailwind è in circolazione da un po’ di tempo, potresti non averlo ancora incontrato. Forse non ne hai sentito parlare, o non sai davvero se imparare un nuovo pezzo di tecnologia relativo ai CSS ti semplificherà davvero la vita.
Cos’è il CSS atomico ?
Prima di entrare nel merito di Tailwind CSS, capiamo cos’è Atomic CSS.
“Atomic CSS è l’approccio all’architettura CSS che favorisce classi piccole e monouso con nomi basati su funzioni visive”.
È un po’ come creare classi che dovrebbero raggiungere un unico scopo. Ad esempio, creiamo una classe bg-blue con il seguente CSS:
.bg-blue {
background-color: rgb(81, 191, 255);
}Ora se aggiungiamo questa classe a un tag, otterremo uno sfondo blu con il colore rgb(81, 191, 255) come puoi vedere nel codice sopra.
Ed ecco l’HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div><h1 class="bg-blue">Hello world!</h1></div>
</body>
</html>Ora immagina di scrivere regole CSS monouso così utili e di conservarle tutte in un file CSS globale. So che è un investimento una tantum, ma pensa a questo: ora puoi utilizzare queste classi di supporto monouso da qualsiasi luogo tu voglia.
Hai solo bisogno del tuo file HTML per consumare quel file CSS globale, e il gioco è fatto. Ora puoi anche utilizzare combinazioni di queste classi helper in un singolo tag HTML.
Vediamo un altro esempio…
Creiamo un file CSS con le seguenti regole:
.bg-blue {
background-color: rgb(81, 191, 255);
}
.bg-green {
background-color: rgb(81, 255, 90);
}
.text-underline {
text-decoration: underline;
}
.text-center {
text-align: center;
}
.font-weight-400 {
font-weight: 400;
}e quindi consumarlo nel nostro file HTML come segue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div><h1 class="bg-blue">Hello world 1</h1></div>
<div><h1 class="text-underline">Hello world 2</h1></div>
<div class="text-center">
<h1 class="bg-green font-weight-400 text-underline">Hello world 3</h1>
</div>
</body>
</html>Bene, ora questo genererà il seguente risultato:
Notiamo che:
Combinazione di più classi di supporto: guarda come sono combinate più classi di supporto nella riga 14 nel tag, ovvero bg-green, font-weight-400 e text-underline. Tutto ha avuto effetto nel testo Hello world 3.
Riutilizzabilità delle classi helper: nell’esempio sopra, guarda come la classe helper text-underline viene usata più volte nelle righe 12 e 14.
Guarda come siamo stati in grado di aggiungere stili diversi senza nemmeno uscire dalla pagina HTML. Chissà quanti di questi helper o classi di utilità monouso dovremmo creare se volessimo seguire questa architettura Atomic CSS. Ed è qui che entra in gioco Tailwind CSS. Il concetto di Atomic CSS non è nuovo, ma Tailwind CSS lo porta a un altro livello. Tailwind CSS: il primo framework CSS di utilità
Tailwind CSS, come per il proprio sito Web, è un “framework CSS di utilità primo” che fornisce molte di queste classi di utilità monoscopo supponenti che puoi utilizzare direttamente all’interno del tuo markup per progettare un elemento. Alcune delle classi di utilità interessanti sono: flex: utilizzato per applicare Flexbox a un items-center: per applicare la proprietà CSS align-items: center; a un round-full: per rendere circolare un’immagine e così via
Seriamente, non è possibile per me elencarli tutti perché ci sono così tante di queste classi di utilità. Ma la parte migliore è che non dobbiamo scrivere noi stessi queste classi di utilità e conservarle in nessun file CSS globale. Li prendiamo direttamente da Tailwind. Puoi ottenere un elenco di tutte le classi di utilità che Tailwind ha da offrire dalla pagina della documentazione. Inoltre, se stai lavorando in Visual Studio Code, puoi installare un’estensione chiamata Tailwind CSS IntelliSense e ti darà suggerimenti automatici mentre continui a digitare le classi di utilità, come mostrato nell’immagine seguente.
Come impostare Tailwind CSS
Esistono diversi modi per impostare Tailwind CSS nel tuo progetto, tutti menzionati nella loro documentazione.
Tailwind CSS funziona senza problemi con una miriade di framework come Next, React, Angular e altri – e persino il nostro HTML OG.
Per la demo pratica di seguito sto usando Tailwind CSS con un’applicazione Next. Per configurare direttamente un’app Next con Tailwind CSS, utilizzare il comando seguente:
Con npx
npx create-next-app --example with-tailwindcss with-tailwindcss-appo con yarn
yarn create next-app --example with-tailwindcss with-tailwindcss-appUna volta che il progetto è stato impostato, puoi tuffarti nel passaggio successivo per creare un componente di base della carta
Demo pratica
Costruiamo un componente della carta in un progetto Next.
// Card.js file
// to be rendered in index.js
import React from "react";
const Card = () => {
return (
<div className="relative w-96 m-3 cursor-pointer border-2 shadow-lg rounded-xl items-center">
{/* Image */}
<div className="flex h-28 bg-blue-700 rounded-xl items-center justify-center">
<h1 className="absolute mx-auto text-center right text-2xl text-white">
Image goes here
</h1>
</div>
{/* Description */}
<div className="p-2 border-b-2">
<h6>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
beatae nulla, atque et sunt ad voluptatum quidem impedit numquam quia?
</h6>
</div>
{/* Tech stack used */}
<div className="flex flex-wrap items-center m-2">
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#React
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Redux
</span>
<span className=" border border-blue-300 rounded-2xl px-2 my-1 mx-1">
#Javascript
</span>
</div>
{/* Links */}
<div className="flex flex-wrap items-center rounded-b-xl border-t-2 bg-white">
<button className="border rounded-2xl bg-blue-600 text-white shadow-sm p-1 px-2 m-2">
Go to Project
</button>
<button className="border-2 border-blue-600 rounded-2xl text-blue-600 shadow-sm p-1 px-2 m-2">
Github
</button>
</div>
</div>
);
};
export default Card;Ciò si traduce nella seguente carta che viene visualizzata nell’interfaccia utente:
Guarda con quanta facilità sono in grado di modellare il componente della scheda senza nemmeno uscire dal file Card.js. Non è necessario scrivere file CSS aggiuntivi.
L’uso di flex con un
applica display: flex; regola CSS ad esso. Vuoi aggiungere posizione: relativa; a un
? Basta aggiungere il relativo in className e il gioco è fatto.
Possiamo anche aggiungere diversi modificatori come hover, active, focus e così via per eseguire il rendering condizionale delle classi di utilità. È possibile applicare regole CSS complesse come questa:
.some-class-name {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}semplicemente citando spazio-x-2 nel tag
. Pulito, non è vero?
E dobbiamo menzionare questi stili esplicitamente ovunque in una sorta di file CSS globale? Assolutamente no! Tailwind lo fa automaticamente per noi. Questa è la bellezza di Tailwind.
Non abbiamo ancora finito… ci sono molti altri vantaggi. Diamo un’occhiata a loro ora.
Vantaggi di Tailwind CSS
La modalità Just-In-Time (JIT) offre tempi di costruzione rapidissimi
Prima di Tailwind v3, eliminava tutti gli stili per rimuovere gli stili inutilizzati, in modo che la build di produzione rimanesse il più piccola possibile.
Secondo Tailwind, la build di produzione era compresa tra 5-10 kB. Ma questa è la storia in produzione. In un ambiente di sviluppo, i CSS potrebbero diventare davvero grandi soprattutto se utilizziamo molte configurazioni personalizzate.
Con la v3 e successive, Tailwind ha rilasciato una nuova funzionalità chiamata compilatore Just-in-Time. Il compilatore JIT evita di compilare tutti i CSS in anticipo e compila solo i CSS come e quando ne abbiamo bisogno.
Ciò si traduce in tempi di costruzione fulminei in tutti gli ambienti. E poiché gli stili vengono generati quando e quando ne abbiamo bisogno, non è necessario eliminare gli stili inutilizzati. Ciò significa che il CSS in tutti gli ambienti sarà lo stesso. Questo ci aiuta a sbarazzarci della paura che qualsiasi CSS importante venga eliminato in produzione.
È supponente e flessibile allo stesso tempo
Tailwind CSS è supponente. Specifica alcuni vincoli quando si tratta di styling e, se me lo chiedi, questo è positivo in quanto ci aiuta a mantenere la parte del design per coloro che effettivamente la capiscono.
Basta guardare una delle classi di utilità per aggiungere un box-shadow al tuo
(fonte):
Come puoi vedere, ci sono solo 8 varianti di ombra fornite da Tailwind. Sono disponibili valori preimpostati per offset verticale e orizzontale, sfocatura, diffusione, colore e opacità. Ecco perché Tailwind è supponente.
Cerca di dare un’opinione su quali valori di proprietà scegliere su quasi tutte le proprietà di styling disponibili. E credetemi, per la maggior parte dei casi, queste 8 varianti (per box-shadow) saranno più che sufficienti per creare un’ottima interfaccia utente.
Ad esempio, nell’esempio pratico sopra, ho usato shadow-lg nel genitore principale
per ottenere quella bella ombra esterna.
L’uso della stessa variante di una particolare classe di utilità in aree diverse dell’interfaccia utente garantisce anche l’uniformità nell’intera applicazione e si traduce in una migliore UX.
Ma se hai bisogno di un valore davvero personalizzato per uno stile particolare, puoi ottenerlo aggiungendo un tema personalizzato in tailwind.config.js. Ad esempio, per ottenere un shadow-3xl (Tailwind non fornisce shadow-3xl pronto all’uso) puoi aggiungere le seguenti righe in module.exports in tailwind.config.js:
module.exports = {
theme: {
extend: {
boxShadow: {
'3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
}
}
}
}E ora con l’avvento di JIT, puoi anche utilizzare un valore arbitrario tra parentesi quadre [] come il seguente:
<div class="shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]">
// Rest of your code goes here
</div>L’uso di valori arbitrari può essere utile quando è necessario uno stile specifico solo in pochi punti. E in questo caso, creare un tema per esso in tailwind.config.js potrebbe sembrare non necessario.
I miei pensieri
Spero davvero di essere stato in grado di farti capire cos’è Tailwind CSS e cosa puoi farci.
Tailwind è un framework CSS che ci fornisce classi di utilità monouso che sono per la maggior parte supponenti e che ci aiutano a progettare le nostre pagine Web direttamente dal nostro markup o dai file .js/.jsx/.ts/.tsx.
Secondo me, Tailwind è semplice e facile da capire. È vero che potrebbe volerci del tempo per capire tutti i nomi delle classi di utilità, ma non preoccuparti: puoi fare riferimento alla loro documentazione ogni volta che rimani bloccato.
E per tutti i principianti là fuori che stanno appena iniziando il loro viaggio con lo sviluppo web, è molto importante sapere cos’è CSS3 prima ancora di esplorare Tailwind (o qualsiasi altro framework CSS come Bootstrap, Windi CSS e così via) .
Avvolgendo
Grazie per aver letto! Spero davvero che ti sia piaciuto leggere di Tailwind CSS in questo articolo e l’abbia trovato utile.
Considera di condividerlo con i tuoi amici, lo apprezzerei davvero. Seguimi su LinkedIn e Twitter (vedi sotto) e resta sintonizzato per altri contenuti sorprendenti.
Redazione BlogInnovazione.it