Cos’\u00c8 Tailwind CSS?<\/h2>\n![\"Homepage](\"https:\/\/staging.kinsta.site\/wp-content\/uploads\/2022\/01\/tailwind-css-homepage-1024x472.png\")
Tailwind CSS.<\/figcaption><\/figure>\nTailwind CSS \u00e8 un framework CSS (Cascading Style Sheets)<\/a> con classi predefinite che potete usare per costruire e progettare pagine web direttamente nel vostro markup. Vi permette di scrivere CSS nel vostro codice HTML sotto forma di classi predefinite.<\/p>\nDefiniremo cos’\u00e8 un framework e cosa intendiamo con “utility-first CSS” per aiutarvi a capire meglio cosa sia Tailwind CSS.<\/p>\n
Cos’\u00c8 un Framework?<\/h2>\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 della creazione di framework \u00e8 quello di aumentare la velocit\u00e0 di sviluppo con meno lavoro.<\/p>\nOra che sappiamo cosa significa framework, dovrebbe essere pi\u00f9 semplice capire che Tailwind CSS \u00e8 uno strumento costruito sulle caratteristiche dei CSS. Tutte le funzionalit\u00e0 del framework sono derivate dagli stili CSS composti come classi.
\n<\/p>\n
Cos’\u00c8 un Framework CSS Utility-First?<\/h2>\n
Quando diciamo utility-first CSS, ci riferiamo a classi nel nostro markup (HTML)<\/a> con funzionalit\u00e0 predefinite. Questo implica che dovete solo scrivere una classe con stili predefiniti collegati a essa, e quegli stili verranno applicati all’elemento.<\/p>\nIn un caso in cui state lavorando con i vanilla CSS (cio\u00e8 CSS senza alcun framework o libreria), dovreste prima dare al vostro elemento un nome di classe e poi allegare diverse propriet\u00e0 e valori a quella classe, che, a sua volta, applicher\u00e0 lo stile al vostro elemento.<\/p>\n
Vi mostriamo 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![\"Un](\"https:\/\/staging.kinsta.site\/wp-content\/uploads\/2022\/01\/button.png\")
Il nostro pulsante.<\/figcaption><\/figure>\nLo faremo prima usando i vanilla CSS e poi usando le classi di utility disponibili in Tailwind CSS.<\/p>\n
Con i Vanilla CSS<\/h3>\n<button class<\/span>=\"btn\">Click me<\/button><\/code><\/pre>\nAbbiamo assegnato ai tag dei pulsanti la classe btn<\/code>, che sar\u00e0 stilizzata 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<\/span>=\"bg-black<\/span> p-2 rounded\">Click me<\/button><\/code><\/pre>\nTutto 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.
\n<\/p>\n
Prerequisiti per Usare Tailwind CSS<\/h2>\n
Prima di usare Tailwind CSS, ci sono alcuni prerequisiti che dovreste considerare di soddisfare per usare senza difficolt\u00e0 le caratteristiche del framework. Eccone alcuni:<\/p>\n
\n- Buona conoscenza dell’HTML<\/a>, della sua struttura e di come funziona<\/li>\n
- Solide basi di CSS<\/span> – media queries<\/a>, flexbox e sistema a griglia<\/span><\/li>\n<\/ul>\n
Dove Si Pu\u00f2 Usare Tailwind CSS?<\/h3>\n
Potete usare Tailwind CSS in progetti web frontend, inclusi framework JavaScript come React.js<\/a>, Next.js<\/a>, Laravel<\/a>, Vite, Gatsby, ecc.<\/p>\nPro e Contro di Tailwind CSS<\/h3>\n
Ecco alcuni dei vantaggi dell’utilizzo di Tailwind CSS:<\/p>\n
\n- Processo di sviluppo pi\u00f9 veloce<\/li>\n
- Vi aiuta a fare pi\u00f9 pratica con i CSS perch\u00e9 le utility sono simili<\/li>\n
- Tutte le utility e i componenti sono facilmente personalizzabili<\/li>\n
- La dimensione complessiva del file per la produzione \u00e8 solitamente piccola<\/li>\n
- Facile da imparare se conoscete gi\u00e0 i CSS<\/li>\n
- Buona documentazione per imparare<\/li>\n<\/ol>\n
Alcuni degli svantaggi dell’utilizzo di Tailwind CSS includono:<\/p>\n
\n- Il vostro markup potrebbe sembrare disorganizzato per grandi progetti perch\u00e9 tutti gli stili si trovano nei file HTML.<\/li>\n
- Non \u00e8 facile da imparare se non conoscete bene il CSS.<\/li>\n
- Vi obbliga a costruire tutto da zero, compresi i vostri elementi di input. Quando installate Tailwind CSS, tutti gli stili CSS predefiniti vengono rimossi.<\/li>\n
- Tailwind CSS non \u00e8 l’opzione migliore se state cercando di ridurre al minimo il tempo speso per sviluppare<\/a> il frontend<\/a> del vostro sito web e concentrarvi principalmente sulla logica del backend<\/a>.<\/li>\n<\/ol>\n
Quando Usare Tailwind CSS<\/h3>\n
Tailwind CSS viene usato per accelerare il processo di sviluppo scrivendo meno codice. Include un sistema di progettazione che aiuta a mantenere la coerenza tra i vari requisiti di progettazione come il padding, la spaziatura e cos\u00ec via; con questo, non dovete preoccuparvi di creare i vostri sistemi di progettazione.<\/p>\n
Potete anche usare Tailwind CSS se state cercando di usare un framework che sia facilmente configurabile perch\u00e9 non vi costringe a usare i componenti (barre di navigazione, pulsanti, moduli<\/a> e cos\u00ec via) sempre allo stesso modo; potete scegliere come devono essere i vostri componenti. Ma non dovreste mai usare Tailwind se non avete imparato e fatto pratica con i CSS.<\/p>\nSomiglianze e Differenze tra Tailwind CSS e Altri Framework CSS<\/h3>\n
Ecco alcune somiglianze:<\/p>\n
\n- Vi aiutano a lavorare pi\u00f9 velocemente.<\/li>\n
- Sono dotati di classi predefinite.<\/li>\n
- Sono stati costruiti su regole CSS.<\/li>\n
- Sono entrambi facili da imparare e da usare con una conoscenza pratica dei CSS.<\/li>\n<\/ol>\n
\u00a0<\/p>\n
Ora guardiamo alcune delle differenze:<\/p>\n
\n- Tailwind CSS \u00e8 diverso dalla maggior parte dei framework perch\u00e9 dovete creare i vostri componenti. Per esempio, Bootstrap ha componenti come barre di navigazione, pulsanti e cos\u00ec via, ma con Tailwind dovete costruire tutto in autonomia.<\/li>\n
- Alcuni framework come Bootstrap<\/a> non sono facilmente personalizzabili, quindi siete costretti a usare i loro modelli di progettazione. In Tailwind, voi controllate il flusso di tutto.<\/li>\n
- \u00c8 richiesta una conoscenza approfondita dei CSS per usare Tailwind. Scrivere i nomi delle classi non \u00e8 sufficiente perch\u00e9 dovete combinarli come se steste scrivendo CSS vanilla per ottenere lo stesso risultato. Tutto quello che dovete sapere nella maggior parte degli altri framework \u00e8 quale componente verr\u00e0 costruito quando usate un nome di classe.<\/li>\n<\/ol>\n\n
Come Iniziare a Usare Tailwind CSS<\/h2>\n
Prima di installare Tailwind CSS e integrarlo nel vostro progetto, assicuratevi che:<\/p>\n
\n- Avete installato Node.js sul vostro computer<\/a> per usare il gestore di pacchetti Node (npm)<\/a> nel terminale.<\/li>\n
- Il progetto \u00e8 impostato e avete creato i file necessari.<\/li>\n<\/ol>\n
Questa \u00e8 la struttura del nostro progetto al momento:<\/p>\n
-Tailwind-tutorial\n -public\n -index.html\n -styles.css\n -src\n -styles.css<\/code><\/pre>\nSuccessivamente, avviate il terminal per il vostro progetto ed eseguite i seguenti comandi:<\/p>\n
npm install -D tailwindcss<\/code><\/pre>\nIl comando precedente installer\u00e0 il framework Tailwind CSS come dipendenza. Successivamente, generate il vostre file tailwind.config.js eseguendo il comando qui sotto:<\/p>\n
npm install -D tailwindcss<\/code><\/pre>\nIl file tailwind.config.js sar\u00e0 vuoto al momento della creazione, quindi dobbiamo aggiungere alcune righe di codice:<\/p>\n
module.exports = {\n content: [\".\/src\/**\/*.{html,js}\", \".\/public\/*.html<\/span>\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};<\/code><\/pre>\nI percorsi dei file forniti nell’array dei contenuti permetteranno a Tailwind di eliminare qualsiasi stile inutilizzato durante la compilazione.<\/p>\n
La prossima cosa da fare \u00e8 aggiungere le direttive “@tailwind” al vostro file CSS nella cartella src<\/strong>: qui \u00e8 dove Tailwind genera tutti i suoi stili di utility predefiniti per voi:<\/p>\n@tailwind base;\n@tailwind components<\/span>;\n@tailwind utilities<\/span>;<\/code><\/pre>\nL’ultima cosa da fare \u00e8 avviare il processo di compilazione eseguendo questo comando nel vostro terminale:<\/p>\n
npx tailwindcss -i .\/src\/styles.css -o .\/public\/styles.css --watch<\/code><\/pre>\nNel codice qui sopra, stiamo dicendo a Tailwind che il nostro file di input \u00e8 il foglio di stile nella cartella src e che qualsiasi stile abbiamo usato deve essere costruito nel file di output nella cartella public. --watch<\/code> permette a Tailwind di osservare il vostro file per le modifiche per un processo di compilazione automatica; ometterlo significa che dobbiamo eseguire lo script ogni volta che vogliamo costruire il nostro codice e vedere l’output desiderato.<\/p>\n\nUsare Tailwind CSS<\/h3>\n
Ora che abbiamo installato e impostato Tailwind CSS per il nostro progetto, vediamo alcuni esempi per comprendere appieno la sua applicazione.<\/p>\n
Esempio Flexbox<\/h4>\n
Per usare flex<\/a> in Tailwind CSS, dovete aggiungere una classe di flex e poi la direzione degli elementi flex:<\/p>\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:\/\/staging.kinsta.site\/wp-content\/uploads\/2022\/01\/flexbox-container-1024x582.png\")
I nostri tre pulsanti viola.<\/figcaption><\/figure>\nUsando flex-row-reverse<\/code> invertirete l’ordine di apparizione dei pulsanti.<\/p>\nflex-col<\/code> li impila 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:\/\/staging.kinsta.site\/wp-content\/uploads\/2022\/01\/flex-col-1024x582.png\")
I nostri tre pulsanti viola.<\/figcaption><\/figure>\nProprio come l’esempio precedente, flex-col-reverse<\/code><\/strong> inverte l’ordine.<\/p>\nEsempio di Griglia<\/h4>\n
Quando si specificano le colonne e le righe nel sistema a griglia, si adotta un approccio diverso passando un numero che determiner\u00e0 come gli elementi occuperanno lo spazio disponibile:<\/p>\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:\/\/staging.kinsta.site\/wp-content\/uploads\/2022\/01\/grid-col-1024x582.png\")
I nostri sei pulsanti viola.<\/figcaption><\/figure>\nColori<\/h4>\n
Tailwind include 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 loro codici esadecimali HTML<\/a> che illustrano questo aspetto:<\/p>\n![\"Personalizzazione](\"https:\/\/staging.kinsta.site\/wp-content\/uploads\/2022\/01\/tailwind-color-variants-1024x617.png\")
Personalizzazione dei colori dalla tavolozza predefinita di Tailwind. (Fonte dell’immagine)<\/a><\/figcaption><\/figure>\nFaremo un esempio di come potete farlo usando il colore rosso qui sopra per dare un colore di sfondo a un elemento pulsante:<\/p>\n
<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>\nQuesta 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 bg-black<\/code> e bg-white<\/code>.<\/p>\nPer aggiungere il colore del testo, si usa la classe text-{color<\/span>}<\/code>:<\/p>\n<p class<\/span>=\"text<\/span>-yellow-600\">Hello World<\/span><\/p><\/code><\/pre>\nPadding<\/h4>\n
Tailwind ha gi\u00e0 un sistema di progettazione che vi aiuterebbe a mantenere una scala coerente nei vostri progetti. Tutto quello che dovete sapere \u00e8 la sintassi per applicare ogni utility.<\/p>\n
Qui di seguito alcune utility per aggiungere il padding ai vostri elementi:<\/p>\n
\np<\/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>\nPer applicarle ai vostri elementi, dovreste usare i numeri appropriati forniti da Tailwind, in modo simile ai numeri che rappresentavano le varianti di colore nell’ultima sezione. Ecco cosa intendiamo:<\/p>\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
Le utility<\/span> predefinite per il padding e il margine sono molto simili. Dovete sostituire la p<\/code> con una m<\/code>:<\/p>\n\nm<\/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
Anche se Tailwind CSS ha un sacco di utility e sistemi di progettazione gi\u00e0 costruiti, \u00e8 ancora possibile che ci sia una particolare funzionalit\u00e0 che vi piacerebbe aggiungere per estendere gli usi di Tailwind. Tailwind CSS ci 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> usando un po\u2019 di JavaScript<\/a>.<\/p>\nconst<\/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>\nOra, scomponiamo il tutto. La prima cosa che abbiamo fatto \u00e8 stata importare la funzione plugin di Tailwind:<\/p>\n
const<\/span> plugin<\/span> = require(\"tailwindcss\/plugin<\/span>\");<\/code><\/pre>\nPoi siamo andati a creare i nostri plugin nell’array dei plugin:<\/p>\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>\nPotreste dover rieseguire lo script di compilazione dopo aver creato il vostro plugin.<\/p>\n
Ora che i plugin sono pronti, possiamo testarli:<\/p>\n
<button class<\/span>=\"bg-aqua<\/span> rotate-150deg\">Click me<\/button><\/code><\/pre>\nSe avete fatto tutto correttamente, dovreste avere un pulsante di colore verde acqua con il testo ruotato a 150\u00ba sull’asse X.<\/p>\n\n\n
Riepilogo<\/h2>\n
Tailwind CSS \u00e8 un framework CSS (Cascading Style Sheets)<\/a> con classi predefinite che potete usare per costruire e progettare pagine web direttamente nel vostro markup. Vi permette di scrivere CSS nel vostro codice HTML sotto forma di classi predefinite.<\/p>\n Definiremo cos’\u00e8 un framework e cosa intendiamo con “utility-first CSS” per aiutarvi a capire meglio cosa sia Tailwind 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 della creazione di framework \u00e8 quello di aumentare la velocit\u00e0 di sviluppo con meno lavoro.<\/p>\n Ora che sappiamo cosa significa framework, dovrebbe essere pi\u00f9 semplice capire che Tailwind CSS \u00e8 uno strumento costruito sulle caratteristiche dei CSS. Tutte le funzionalit\u00e0 del framework sono derivate dagli stili CSS composti come classi. Quando diciamo utility-first CSS, ci riferiamo a classi nel nostro markup (HTML)<\/a> con funzionalit\u00e0 predefinite. Questo implica che dovete solo scrivere una classe con stili predefiniti collegati a essa, e quegli stili verranno applicati all’elemento.<\/p>\n In un caso in cui state lavorando con i vanilla CSS (cio\u00e8 CSS senza alcun framework o libreria), dovreste prima dare al vostro elemento un nome di classe e poi allegare diverse propriet\u00e0 e valori a quella classe, che, a sua volta, applicher\u00e0 lo stile al vostro elemento.<\/p>\n Vi mostriamo 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 usando i vanilla CSS e poi usando le classi di utility disponibili in Tailwind CSS.<\/p>\n Abbiamo assegnato ai tag dei 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. Prima di usare Tailwind CSS, ci sono alcuni prerequisiti che dovreste considerare di soddisfare per usare senza difficolt\u00e0 le caratteristiche del framework. Eccone alcuni:<\/p>\n Potete usare Tailwind CSS in progetti web frontend, inclusi framework JavaScript come React.js<\/a>, Next.js<\/a>, Laravel<\/a>, Vite, Gatsby, ecc.<\/p>\n Ecco alcuni dei vantaggi dell’utilizzo di Tailwind CSS:<\/p>\n Alcuni degli svantaggi dell’utilizzo di Tailwind CSS includono:<\/p>\n Tailwind CSS viene usato per accelerare il processo di sviluppo scrivendo meno codice. Include un sistema di progettazione che aiuta a mantenere la coerenza tra i vari requisiti di progettazione come il padding, la spaziatura e cos\u00ec via; con questo, non dovete preoccuparvi di creare i vostri sistemi di progettazione.<\/p>\n Potete anche usare Tailwind CSS se state cercando di usare un framework che sia facilmente configurabile perch\u00e9 non vi costringe a usare i componenti (barre di navigazione, pulsanti, moduli<\/a> e cos\u00ec via) sempre allo stesso modo; potete scegliere come devono essere i vostri componenti. Ma non dovreste mai usare Tailwind se non avete imparato e fatto pratica con i CSS.<\/p>\n Ecco alcune somiglianze:<\/p>\n \u00a0<\/p>\n Ora guardiamo alcune delle differenze:<\/p>\n Prima di installare Tailwind CSS e integrarlo nel vostro progetto, assicuratevi che:<\/p>\n Questa \u00e8 la struttura del nostro progetto al momento:<\/p>\n Successivamente, avviate il terminal per il vostro progetto ed eseguite i seguenti comandi:<\/p>\n Il comando precedente installer\u00e0 il framework Tailwind CSS come dipendenza. Successivamente, generate il vostre file tailwind.config.js eseguendo il comando qui sotto:<\/p>\n Il file tailwind.config.js sar\u00e0 vuoto al momento della creazione, quindi dobbiamo aggiungere alcune righe di codice:<\/p>\n I percorsi dei file forniti nell’array dei contenuti permetteranno a Tailwind di eliminare qualsiasi stile inutilizzato durante la compilazione.<\/p>\n La prossima cosa da fare \u00e8 aggiungere le direttive “@tailwind” al vostro file CSS nella cartella src<\/strong>: qui \u00e8 dove Tailwind genera tutti i suoi stili di utility predefiniti per voi:<\/p>\n L’ultima cosa da fare \u00e8 avviare il processo di compilazione eseguendo questo comando nel vostro terminale:<\/p>\n Nel codice qui sopra, stiamo dicendo a Tailwind che il nostro file di input \u00e8 il foglio di stile nella cartella src e che qualsiasi stile abbiamo usato deve essere costruito nel file di output nella cartella public. Ora che abbiamo installato e impostato Tailwind CSS per il nostro progetto, vediamo alcuni esempi per comprendere appieno la sua applicazione.<\/p>\n Per usare flex<\/a> in Tailwind CSS, dovete aggiungere una classe di flex e poi la direzione degli elementi flex:<\/p>\n Usando Proprio come l’esempio precedente, Quando si specificano le colonne e le righe nel sistema a griglia, si adotta un approccio diverso passando un numero che determiner\u00e0 come gli elementi occuperanno lo spazio disponibile:<\/p>\n Tailwind include 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 loro codici esadecimali HTML<\/a> che illustrano questo aspetto:<\/p>\n Faremo un esempio di come potete farlo 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 vi aiuterebbe a mantenere una scala coerente nei vostri progetti. Tutto quello che dovete sapere \u00e8 la sintassi per applicare ogni utility.<\/p>\n Qui di seguito alcune utility per aggiungere il padding ai vostri elementi:<\/p>\n Per applicarle ai vostri elementi, dovreste usare i numeri appropriati forniti da Tailwind, in modo simile ai numeri che rappresentavano le varianti di colore nell’ultima sezione. Ecco cosa intendiamo:<\/p>\n Le utility<\/span> predefinite per il padding e il margine sono molto simili. Dovete sostituire la Anche se Tailwind CSS ha un sacco di utility e sistemi di progettazione gi\u00e0 costruiti, \u00e8 ancora possibile che ci sia una particolare funzionalit\u00e0 che vi piacerebbe aggiungere per estendere gli usi di Tailwind. Tailwind CSS ci 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> usando 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 Potreste dover rieseguire lo script di compilazione dopo aver creato il vostro plugin.<\/p>\n Ora che i plugin sono pronti, possiamo testarli:<\/p>\n Se avete fatto tutto correttamente, dovreste avere un pulsante di colore verde acqua con il testo ruotato a 150\u00ba sull’asse X.<\/p>\n\n\nCos’\u00c8 un Framework?<\/h2>\n
\n<\/p>\nCos’\u00c8 un Framework CSS Utility-First?<\/h2>\n
Con i Vanilla CSS<\/h3>\n
<button class<\/span>=\"btn\">Click me<\/button><\/code><\/pre>\nbtn<\/code>, che sar\u00e0 stilizzata 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<\/span>=\"bg-black<\/span> p-2 rounded\">Click me<\/button><\/code><\/pre>\n
\n<\/p>\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 Usare Tailwind CSS<\/h2>\n
\n
-Tailwind-tutorial\n -public\n -index.html\n -styles.css\n -src\n -styles.css<\/code><\/pre>\n npm install -D tailwindcss<\/code><\/pre>\n npm install -D tailwindcss<\/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>\n npx tailwindcss -i .\/src\/styles.css -o .\/public\/styles.css --watch<\/code><\/pre>\n--watch<\/code> permette a Tailwind di osservare il vostro file per le modifiche per un processo di compilazione automatica; ometterlo significa che dobbiamo eseguire lo script ogni volta che vogliamo costruire il nostro codice e vedere l’output desiderato.<\/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>\nflex-row-reverse<\/code> invertirete l’ordine di apparizione dei pulsanti.<\/p>\nflex-col<\/code> li impila 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>\nflex-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>\nColori<\/h4>\n
<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