Valori di spaziatura personalizzati

La scala di spaziatura predefinita di Tailwind comprende valori da 0 a 96 (da 0 a 24rem con incrementi di 0,25rem per i valori più piccoli, quindi con intervalli più ampi). Questa scala viene utilizzata in modo coerente nelle utility per margini, spaziatura interna, larghezza, altezza, distanza e posizionamento. I valori sono pensati per coprire la maggior parte delle esigenze di spaziatura delle interfacce, ma i progetti reali richiedono talvolta valori intermedi o superiori rispetto a quelli predefiniti.

I sistemi di progettazione richiedono spesso valori di spaziatura al di fuori della scala predefinita: un valore 128 (32rem) per sezioni hero a pagina intera, un valore 4.5 (18px) per un elemento specifico posizionato tra il valore standard 4 (16px) e 5 (20px), oppure un valore 13 per la larghezza di una colonna specifica della griglia. Invece di utilizzare ogni volta valori arbitrari con la notazione tra parentesi quadre, aggiunga questi valori una sola volta alla configurazione e assegni loro un nome di classe utility chiaro.

Aggiunga i valori di spaziatura personalizzati all'interno di theme.extend.spacing. La chiave diventa il suffisso di tutte le utility di spaziatura, mentre il valore è la misura CSS desiderata. Utilizzi chiavi stringa per i numeri decimali o grandi, così da assicurarsi che vengano interpretati correttamente. Una volta aggiunta, la spaziatura personalizzata funziona automaticamente con m-*, p-*, w-*, h-*, gap-*, inset-* e tutte le altre utility di spaziatura.

Dopo aver aggiunto i valori di spaziatura personalizzati, li utilizzi esattamente come le utility di spaziatura integrate. Il nome della chiave va dopo il prefisso dell'utility e il trattino. La spaziatura personalizzata funziona con i prefissi responsive, la modalità scura e le varianti di stato, proprio come quella predefinita. Grazie alla loro natura trasversale alle utility, è sufficiente scrivere una volta la configurazione per ottenere utility per spaziatura interna, margini, larghezza, altezza e distanza dalla stessa definizione.

Per i progetti con sistemi di progettazione rigidi, che devono utilizzare solo valori di spaziatura specifici, sovrascriva l'intera scala inserendo i valori direttamente in theme.spacing (al di fuori di extend). In questo modo impedisce che uno sviluppatore utilizzi accidentalmente un valore di spaziatura non approvato. Adotti questo approccio con cautela: eliminare i valori predefiniti di Tailwind rimuove molte classi utility comunemente necessarie.

Tailwind gestisce chiavi frazionarie come '4.5' generando classi utility con una versione del decimale sicura per il CSS. Il nome della classe utilizza la frazione così come è scritta: p-4.5, m-4.5. Per le chiavi contenenti barre (come le frazioni per la spaziatura basata su percentuali), la barra viene codificata nel selettore CSS. Racchiuda sempre tra virgolette le chiavi decimali e frazionarie nell'oggetto di configurazione, per evitare che JavaScript le interpreti come valori numerici letterali.

Tailwind genera automaticamente le varianti negative per tutti i valori di spaziatura, sia predefiniti sia personalizzati. Se aggiunge '128': '32rem' alla configurazione della spaziatura, otterrà anche -m-128, -mt-128, -inset-128 e così via. I valori negativi vengono generati automaticamente: non è necessaria una voce separata nella configurazione. Sono particolarmente utili per sovrapporre elementi, creare citazioni rientrate e definire posizionamenti decorativi.

Talvolta è utile avere valori di spaziatura che si adattano alla dimensione del testo invece di utilizzare valori rem fissi. Aggiunga alla configurazione valori di spaziatura espressi in unità em: saranno relativi alla dimensione del carattere dell'elemento stesso. Per esempio, un pulsante con una spaziatura interna px-1.5em avrà una spaziatura orizzontale proporzionale, indipendentemente dal fatto che il testo del pulsante sia piccolo o grande.

Quando il design si basa su una griglia da 8px (o su un'unità di base da 4px), mappi l'intera griglia nella configurazione della spaziatura. Una griglia da 8px significa che ogni spaziatura è un multiplo di 8px: 8, 16, 24, 32, 40, 48, 64, 80, 96, 128. La scala di spaziatura predefinita di Tailwind è già allineata a questo sistema (1 unità = 4px, quindi 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px). Potrebbe essere necessario estenderla solo con valori superiori a 96.

Quando Le serve un valore di spaziatura occasionale e non desidera appesantire la configurazione, utilizzi la sintassi dei valori arbitrari di Tailwind con le parentesi quadre: p-[22px], w-[347px], mt-[3.75rem]. In questo modo viene generato il valore CSS esatto senza aggiungerlo alla configurazione. I valori arbitrari sono ideali per modifiche una tantum, ma non dovrebbero diventare un'abitudine: se utilizza lo stesso valore tre o più volte, lo aggiunga invece alla configurazione.

Man mano che la spaziatura personalizzata cresce, la documenti insieme ai token dei colori e della tipografia. Crei un semplice riferimento visivo alle spaziature in Storybook, nella documentazione del sistema di progettazione o persino in una pagina HTML statica che mostri ogni valore di spaziatura come un blocco colorato. In questo modo designer e sviluppatori potranno utilizzare il valore corretto della configurazione invece di ricorrere a valori arbitrari o a soluzioni isolate e incoerenti.

In questa lezione ha imparato a: aggiungere spaziatura personalizzata in theme.extend.spacing per estendere la scala predefinita senza sostituirla; usare automaticamente la spaziatura personalizzata in tutte le utility di spaziatura (padding, margine, larghezza, altezza, gap); e usare i valori arbitrari con la notazione tra parentesi quadre come valida alternativa per misure davvero occasionali. Prossimamente esploreremo le proprietà personalizzate CSS come token di design in Tailwind.