Il Tema

All'interno dei sorgenti di Tailwind CSS è praticamente impossibile trovare regole CSS (o SCSS o Less...) già pronte. Questo perché il framework è da intendere come una sorta di motore di generazione CSS a partire da un file di configurazione (approfondito nella precedente lezione). Effettuare una build di Tailwind equivale a generare un file CSS esclusivamente da file JavaScript che ne definiscono le regole di compilazione.

Questo approccio rappresenta la principale caratteristica di Tailwind CSS e permette di approcciare il mondo del web design come un aspetto più programmabile, con le sue regole e la sua formalità, e non più come un insieme di stili sovrascritti o di variabili SCSS/Less difficili da ricordare e spesso mal utilizzate.

L'approccio che il framework segue è simile al concetto di "Convention over Configuration". Il framework è "pronto all'uso" in tempi super rapidi secondo stili standard (decisi grazie al buonsenso degli autori) ma permette di essere configurabile praticamente in ogni sua parte senza particolari difficoltà, cosa spesso non facile con i framework tradizionali.

Tema e configurabilità

All'interno del dizionario di Tailwind CSS, quando si parla di temi, si intende appunto la configurazione di tutto il nostro design system, che include per esempio palette di colori, dimensione del font e breakpoint responsive. Tutto ciò che è incluso nella definizione di tema può essere sovrascritto o esteso. Qualsiasi regola che impatta sulla definizione del tema sarà inclusa nell'oggetto theme presente nel file di configurazione.

Se sovrascriviamo una particolare sezione, andremo a sostituire tutte le regole di default con quelle definite da noi. Se invece estendiamo la sezione, la andremo ad arricchire o eventualmente a modificare, ma solo in parte.

Una parte interessante del tema è senza dubbio la definizione dei breakpoint responsive. La configurazione di default del framework è la seguente:

screens: {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1280px',
}

Una volta presa confidenza con questa configurazione, ci si pone una scelta. Vogliamo mantenere la sua naming convention e le sue regole, o vogliamo modificarle? Nel primo caso non dobbiamo fare nulla, mentre nel secondo caso serve valutare se ha senso riscriverle in toto o semplicemente estendere lo standard.

Supponiamo di non avere confidenza con le taglie inglesi: potremmo aggiungere al nostro file di configurazione qualcosa di simile:

module.exports = {
  theme: {
    screens: {
      'piccolo': '500px',
      'medio': '750px',
      'grande': '1000px',
      'super': '1200px',
    }
  }
}

In questo caso tutto il framework verrà generato usando nuove terminologie rispetto al classici sm, md, lg e xl.

Se invece volessimo solamente aggiungere una regola addizionale per i device con altissime risoluzioni, potremmo estendere il default in questo modo:

module.exports = {
  theme: {
    extend: {
      screens: {
        '2xl': '1500px'
      }
    }
  }
}

Con questa configurazione andremo semplicemente ad aggiungere un nuovo breakpoint.

Questo approccio di sovrascrittura o estensione vale per qualsiasi regola presente nella sezione tema, non solamente per la parte di breakpoint responsive.

Nelle prossime lezioni andremo ad analizzare più in profondità quali sono le caratteristiche che può avere un tema.