Ecco la nostra video guida su come usare Tailwind CSS per sviluppare siti web<\/a>:<\/strong><\/p>\n Tailwind CSS \u00e8 un framework CSS (Cascading Style Sheets)<\/a> con classi predefinite che pu\u00f2 essere utilizzato per costruire e progettare pagine web direttamente nel markup. Permette di inserire codice CSS all’interno dell’HTML utilizzando classi predefinite.<\/p>\n Per capire meglio cosa sia Tailwind CSS, spieghiamo cos’\u00e8 un framework e chiariamo cosa si intende con “utility-first CSS”.<\/p>\n Come termine generale di programmazione, un framework<\/a> \u00e8 uno strumento che fornisce componenti riutilizzabili e gi\u00e0 pronti costruiti sulla base delle caratteristiche di uno strumento gi\u00e0 esistente. Lo scopo generale di un framework \u00e8 quello di snellire il lavoro di sviluppo.<\/p>\n Tailwind CSS \u00e8 uno strumento basato sulle caratteristiche dei CSS. Tutte le funzionalit\u00e0 del framework sono derivate dagli stili CSS composti come classi.<\/p>\n Quando diciamo utility-first CSS, ci riferiamo a classi con funzionalit\u00e0 predefinite nel nostro markup (HTML)<\/a>. Questo vuol dire che basta scrivere una classe a cui sono collegati stili predefiniti e quegli stili verranno applicati all’elemento.<\/p>\n Lavorando con vanilla CSS (cio\u00e8 CSS senza alcun framework o libreria), bisognerebbe prima dare ad un elemento un nome di classe e poi assegnare diverse propriet\u00e0 a quella classe, che, a sua volta, applicher\u00e0 lo stile all’elemento.<\/p>\n Vediamo un esempio. Qui creeremo un pulsante con angoli arrotondati e un testo che dice “Click me”. Questo \u00e8 l’aspetto che avr\u00e0 il pulsante:<\/p>\n Lo faremo prima con vanilla CSS e poi con le classi di utility disponibili in Tailwind CSS.<\/p>\n Abbiamo assegnato al tag del pulsanti la classe Tutto questo \u00e8 necessario per ottenere lo stesso effetto dell’esempio con vanilla CSS. Non abbiamo creato nessun foglio di stile esterno dove scrivere gli stili perch\u00e9 ogni nome di classe che abbiamo usato ha gi\u00e0 uno stile predefinito.<\/p>\n Prima di usare Tailwind CSS, ci sono alcuni prerequisiti da verificare. Eccone alcuni:<\/p>\n Tailwind CSS pu\u00f2 essere utilizzato in progetti web frontend con framework JavaScript come React.js<\/a>, Next.js<\/a>, Laravel<\/a>, Vite, Gatsby, ecc.<\/p>\n Ecco alcuni dei vantaggi di Tailwind CSS:<\/p>\n Alcuni degli svantaggi di Tailwind CSS:<\/p>\n Tailwind CSS viene utilizzato per snellire il processo di sviluppo scrivendo meno codice. Include un sistema di progettazione che aiuta a mantenere la coerenza tra i vari elementi di progettazione come il padding, la spaziatura e cos\u00ec via; con questo, non bisogna preoccuparvi di creare i propri sistemi di progettazione.<\/p>\n \u00c8 possibile utilizzare Tailwind CSS anche se si sta cercando un framework che sia facilmente configurabile perch\u00e9 non costringe a usare i componenti (barre di navigazione, pulsanti, moduli<\/a> e cos\u00ec via) sempre allo stesso modo; si pu\u00f2 scegliere come devono essere i componenti. Ma non bisognerebbe mai usare Tailwind se non si \u00e8 pratici dei CSS.<\/p>\n Ecco alcune somiglianze:<\/p>\n \u00a0<\/p>\n Queste sono alcune delle differenze:<\/p>\n Prima di installare Tailwind CSS e integrarlo in un progetto, \u00e8 necessario assicurarsi che:<\/p>\n Questa \u00e8 la struttura del nostro progetto al momento:<\/p>\n Avviamo il terminale per il vostro progetto ed eseguiamo questi comandi:<\/p>\n Il comando precedente installer\u00e0 il framework Tailwind CSS come dipendenza. Quindi generiamo il file tailwind.config.js eseguendo il questo comando:<\/p>\n Al momento della creazione, il file tailwind.config.js sar\u00e0 vuoto, quindi dobbiamo aggiungere alcune righe di codice:<\/p>\n I percorsi dei file forniti nell’array dei contenuti permetteranno a Tailwind di eliminare stili inutilizzati durante la build.<\/p>\n Bisogner\u00e0 quindi aggiungere le direttive “@tailwind” al file CSS nella cartella src<\/strong>: qui Tailwind genera tutti i suoi stili di utility predefiniti:<\/p>\n L’ultima cosa da fare \u00e8 avviare il processo di build eseguendo questo comando nel vostro terminale:<\/p>\n Nel codice qui sopra, diciamo a Tailwind che il nostro file di input \u00e8 il foglio di stile presente nella cartella src e che tutti gli stili che abbiamo utilizzato devono essere nel file di output nella cartella public. Ora che abbiamo installato e configurato Tailwind CSS per il nostro progetto, vediamone alcuni esempi.<\/p>\n Per usare flex<\/a> in Tailwind CSS, bisogna aggiungere una classe flex e poi la direzione degli elementi:<\/p>\n Con Proprio come nell’esempio precedente, Quando si specificano le colonne e le righe nel sistema a griglia, si adotta un approccio diverso. Si passa un numero che determiner\u00e0 il modo in cui gli elementi occuperanno lo spazio disponibile:<\/p>\n Tailwind dispone di molti colori predefiniti. Ogni colore ha una serie di variazioni diverse, con la variazione pi\u00f9 chiara a 50 e la pi\u00f9 scura a 900.<\/p>\n Ecco un’immagine di pi\u00f9 colori e i rispettivi codici esadecimali HTML<\/a>:<\/p>\n Vediamo un esempio usando il colore rosso qui sopra per dare un colore di sfondo a un elemento pulsante:<\/p>\n Questa sintassi \u00e8 la stessa per tutti i colori in Tailwind tranne che per il bianco e il nero, che sono scritti allo stesso modo ma senza l’uso di numeri Per aggiungere il colore del testo, si usa la classe Tailwind ha gi\u00e0 un sistema di progettazione che permette di mantenere una scala coerente nei progetti. Tutto quello che bisogna conoscere \u00e8 la sintassi necessaria per applicare le utility.<\/p>\n Qui di seguito alcune utility per aggiungere il padding agli elementi:<\/p>\n Per applicare queste utility agli elementi, \u00e8 necessario assegnare i valori appropriati forniti da Tailwind, in modo simile ai numeri che rappresentano le varianti di colore mostrati nell’ultima sezione:<\/p>\n Le utility<\/span> predefinite per il padding e il margine sono molto simili. Basta sostituire la Anche se Tailwind CSS ha un sacco di utility e sistemi di progettazione predefiniti, \u00e8 sempre possibile che ci sia una particolare funzionalit\u00e0 che si vorrebbe aggiungere per estenderne l’uso. Tailwind CSS permette di farlo creando un plugin.<\/p>\n Sporchiamoci le mani creando un plugin che aggiunge il color verde acqua e una utility di rotazione che ruota un elemento di 150\u00ba sull’asse X. Creeremo queste utility nel file tailwind.config.js<\/strong> utilizzando un po\u2019 di JavaScript<\/a>.<\/p>\n Ora scomponiamo il tutto. La prima cosa che abbiamo fatto \u00e8 stata importare la funzione plugin di Tailwind:<\/p>\n Poi siamo andati a creare i nostri plugin nell’array dei plugin:<\/p>\n Potrebbe essere necessario rieseguire lo script di build dopo aver creato il plugin.<\/p>\n Ora che i plugin sono pronti, possiamo testarli:<\/p>\n Se abbiamo fatto tutto correttamente, dovremmo avere un pulsante di colore verde acqua con il testo ruotato a 150\u00ba sull’asse X.<\/p>\n\nCos’\u00e8 Tailwind CSS?<\/h2>\n
![\"Homepage](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/tailwind-css-homepage-1024x472.png\")
Cos’\u00e8 un framework?<\/h2>\n
Cos’\u00e8 un framework CSS Utility-First?<\/h2>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/button.png\")
Con Vanilla CSS<\/h3>\n
<button class<\/span>=\"btn\">Click me<\/button><\/code><\/pre>\nbtn<\/code>, cui saranno assegnati gli stili utilizzando un foglio di stile esterno. Cio\u00e8:<\/p>\n.btn {\n background-color<\/span>: #000;\n color<\/span>: #fff;\n padding: 8px;\n border: none;\n border-radius: 4px;\n}<\/code><\/pre>\nCon Tailwind CSS<\/h3>\n
<button class=\"bg-black text-white p-2 rounded\">Click me<\/button><\/code><\/pre>\nPrerequisiti per usare Tailwind CSS<\/h2>\n
\n
Dove si pu\u00f2 usare Tailwind CSS?<\/h3>\n
Pro e contro di Tailwind CSS<\/h3>\n
\n
\n
Quando usare Tailwind CSS<\/h3>\n
Somiglianze e differenze tra Tailwind CSS e altri framework CSS<\/h3>\n
\n
\n
Come iniziare a utilizzare Tailwind CSS<\/h2>\n
\n
-Tailwind-tutorial\n -public\n -index.html\n -styles.css\n -src\n -styles.css<\/code><\/pre>\nnpm install -D tailwindcss<\/code><\/pre>\nnpx tailwindcss init<\/code><\/pre>\nmodule.exports = {\n content: [\".\/src\/**\/*.{html,js}\", \".\/public\/*.html<\/span>\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};<\/code><\/pre>\n@tailwind base;\n@tailwind components<\/span>;\n@tailwind utilities<\/span>;<\/code><\/pre>\nnpx tailwindcss -i .\/src\/styles.css -o .\/public\/styles.css --watch<\/code><\/pre>\n--watch<\/code> permette a Tailwind di osservare le modifiche al file per la build automatica; omettendolo, per vedere l’output desiderato, dovremo eseguire lo script ogni volta che lanciamo la build.<\/p>\n\nUsare Tailwind CSS<\/h3>\n
Esempio Flexbox<\/h4>\n
<div<\/span> class<\/span>=\"flex flex-row\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n<\/div<\/span>><\/code><\/pre>\n![\"Tre](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/flexbox-container-1024x582.png\")
flex-row-reverse<\/code> si inverte l’ordine di apparizione dei pulsanti.<\/p>\nflex-col<\/code> li dispone uno sopra l’altro. Ecco un esempio:<\/p>\n<div<\/span> class<\/span>=\"flex flex-col\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n<\/div<\/span>><\/code><\/pre>\n![\"Tre](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/flex-col-1024x582.png\")
flex-col-reverse<\/code><\/strong> inverte l’ordine.<\/p>\nEsempio di griglia<\/h4>\n
<div<\/span> class<\/span>=\"grid<\/span> grid<\/span>-cols-3\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n <button> Button 4 <\/button>\n <button> Button 5 <\/button>\n <button> Button 6 <\/button>\n <\/div<\/span>><\/code><\/pre>\n![\"Sei](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/grid-col-1024x582.png\")
Colori<\/h4>\n
![\"Personalizzazione](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/tailwind-color-variants-1024x617.png\")
<button class<\/span>=\"bg-red<\/span>-50\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-100\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-200\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-300\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-400\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-500\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-600\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-700\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-800\">Click me<\/button>\n<button class<\/span>=\"bg-red<\/span>-900\">Click me<\/button><\/code><\/pre>\nbg-black<\/code> e bg-white<\/code>.<\/p>\ntext-{color<\/span>}<\/code>:<\/p>\n<p class<\/span>=\"text<\/span>-yellow-600\">Hello World<\/span><\/p><\/code><\/pre>\nPadding<\/h4>\n
\n
p<\/code> denota il padding su tutto l’elemento.<\/li>\npy<\/code> denota padding-top e padding-bottom.<\/li>\npx<\/code> denota padding-left e padding-right.<\/li>\npt<\/code> denota padding-top.<\/li>\npr<\/code> denota padding-righ.<\/li>\npb<\/code> denota padding-bottom.<\/li>\npl<\/code> denota padding-left<\/li>\n<\/ul>\n<button class<\/span>=\"p-0\">Click me<\/button>\n<button class<\/span>=\"pt-1\">Click me<\/button>\n<button class<\/span>=\"pr-2\">Click me<\/button>\n<button class<\/span>=\"pb-3\">Click me<\/button>\n<button class<\/span>=\"pl-4\">Click me<\/button><\/code><\/pre>\nMargine<\/h4>\n
p<\/code> con una m<\/code>:<\/p>\n\n
m<\/code><\/li>\nmy<\/code><\/li>\nmx<\/code><\/li>\nmt<\/code><\/li>\nmr<\/code><\/li>\nmb<\/code><\/li>\nml<\/code><\/li>\n<\/ul>\nCome creare un plugin Tailwind CSS<\/h2>\n
const<\/span> plugin<\/span> = require(\"tailwindcss\/plugin<\/span>\");\n\nmodule.exports = {\n content: [\".\/src\/**\/*.{html,js}\", \".\/public\/*.html<\/span>\"],\n theme: {\n extend: {},\n },\n plugins: [\n plugin<\/span>(function<\/span> ({ addUtilities }) {\n const<\/span> myUtilities = {\n \".bg-aqua<\/span>\": { background: \"aqua<\/span>\" },\n \".rotate-150deg\": {\n transform: \"rotateX(150deg)\",\n },\n };\n addUtilities(myUtilities);\n }),\n ],\n\n};<\/code><\/pre>\nconst<\/span> plugin<\/span> = require(\"tailwindcss\/plugin<\/span>\");<\/code><\/pre>\n plugins: [\n plugin<\/span>(function<\/span> ({ addUtilities }) {\n const<\/span> newUtilities = {\n \".bg-aqua<\/span>\": { background: \"aqua<\/span>\" },\n \".rotate-150deg\": {\n transform: \"rotateX(150deg)\",\n },\n };\n addUtilities(newUtilities);\n }),\n ],<\/code><\/pre>\n<button class<\/span>=\"bg-aqua<\/span> rotate-150deg\">Click me<\/button><\/code><\/pre>\nRiepilogo<\/h2>\n