Ovaj će članak objasniti metodu korištenja statičkih pomoćnih programa u Tailwind CSS-u.
Kako koristiti statičke pomoćne programe u Tailwindu?
Za korištenje statičkih uslužnih programa u Tailwindu dodajte ' addUtilities() ” u datoteci “tailwind.config.js” i konfigurirajte željene statičke pomoćne programe. Zatim upotrijebite statičke pomoćne programe u HTML programu i provjerite rade li statički pomoćni programi ispravno kada gledate HTML web stranicu.
Istražimo sljedeće korake:
Korak 1: Konfigurirajte statičke pomoćne programe u datoteci 'tailwind.config.js'.
Otvori ' tailwind.config.js ' i dodajte ' dodaci ” odjeljak. Zatim upotrijebite ' addUtilities() ” za konfiguriranje željenih statičkih pomoćnih programa. Na primjer, konfigurirali smo sljedeće statičke pomoćne programe:
const plugin = require('tailwindcss/plugin')
module.exports = {
sadržaj: ['./index.html'],
dodaci: [
dodatak(funkcija({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'hidden',
},
'.bg-koral': {
pozadina: 'koraljni'
},
'.skew-5deg': {
transformacija: 'skewY(-5deg)',
},
})
})
]
};
Ovdje:
- ' addUtilities() ” funkcija registrira prilagođene statičke pomoćne programe pružajući objekt koji sadrži klase pomoćnih programa i njihove odgovarajuće stilove.
- ' .sadržaj-auto ” klasa pomoćnih programa postavlja svojstvo vidljivosti sadržaja na auto.
- ' .sadržaj-skriven ” klasa pomoćnih programa postavlja svojstvo vidljivosti sadržaja na skriveno.
- ' .bg-koralj ” uslužna klasa postavlja boju koralja u pozadinu.
- ' .košenje-5 stupnjeva ” klasa korisnosti postavlja svojstvo transformacije na skewY(-5deg).
Korak 2: Koristite statičke pomoćne programe u HTML programu
Sada upotrijebite željene statičke pomoćne programe u HTML programu:
< div razreda = 'h-zaslon bg-koraljni' >
< str razreda = 'automatski sadržaj' >Zdravo< / str >
< str razreda = 'sadržaj skriven' >Dobro došli ovdje< / str >
< str razreda = 'koso-5 stupnjeva' >Transformiraj tekst< / str >
< / div >
< / tijelo >
Korak 3: Provjerite izlaz
Na kraju pokrenite HTML program kako biste bili sigurni da statički uslužni programi rade ispravno:
Gornji izlaz pokazuje da statički uslužni programi rade ispravno prema onome što su definirani.
Zaključak
Za korištenje statičkih uslužnih programa u Tailwindu potrebno je koristiti ' addUtilities() ” u datoteci “tailwind.config.js” i konfigurirajte željene statičke pomoćne programe. Funkcija “addUtilities()” i dodavanje klasa pomoćnih programa koje se mogu primijeniti izravno u HTML programu. Ovaj članak objašnjava metodu korištenja statičkih pomoćnih programa u Tailwind CSS-u.