Mukautettujen apuluokkien lisääminen pluginilla
Kirjoittakaa plugin, joka lisää uusia apuluokkia, kuten text-shadow-* tai scrollbar-hide, joita Tailwindin oletusjakelu ei sisällä.
Mukautettujen apuluokkien lisääminen pluginilla on ilmainen Tailwind CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Milloin mukautettu utility kannattaa lisätä
Lisätkää mukautettu utility, kun huomaatte kirjoittavanne samaa raakaa CSS:ää toistuvasti @apply-lohkoihin tai upotettuihin tyyleihin, kun Tailwindista puuttuu utility kelvolliselle CSS-ominaisuudelle tai kun selainkohtainen etuliiteyhdistelmä tarvitsee selkeän luokanimen. Hyvät mukautetut utilityt noudattavat Tailwindin yhden vastuun periaatetta: yksi utility hallitsee yhtä CSS-ominaisuutta tai toisiinsa tiiviisti liittyvää ominaisuusryhmää. Välttäkää utilityjä, jotka määrittävät monia toisiinsa liittymättömiä ominaisuuksia – ne kuuluvat komponenteille.
Vierityspalkin piilotusutility
Yksi yleisimmin pyydetyistä mukautetuista utilityistä on .scrollbar-hide – se piilottaa vierityspalkin visuaalisesti, mutta pitää elementin vieritettävänä. Tämä edellyttää selainkohtaisia ominaisuuksia eri selaimille: scrollbar-width: none Firefoxille ja -webkit-scrollbar: display none Chromium-selaimille. Kun tämä paketoidaan pluginiksi, se on käytettävissä yksinkertaisena scrollbar-hide-luokkana kaikkialla merkintäkielessä.
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.scrollbar-hide': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': {
display: 'none'
}
},
'.scrollbar-default': {
'-ms-overflow-style': 'auto',
'scrollbar-width': 'auto',
'&::-webkit-scrollbar': {
display: 'block'
}
}
});
})
]
};
// Usage
// <div class='overflow-x-auto scrollbar-hide'>...Tekstivarjostusutilityt
CSS:n text-shadow on yleisesti käytetty ominaisuus, jota Tailwind ei sisällytä oletusarvoisesti. Kun sille rakennetaan teemaintegran sisältävä plugin, käyttäjät voivat käyttää sitä kuten mitä tahansa sisäänrakennettua utilityä ja mukauttaa sitä myös asetusten kautta. Määritelkää oletusarvot teemassa ja viitatkaa niihin pluginissa, jotta utility huomioi käyttäjän tailwind.config.js-tiedostossa tekemät ohitukset.
const plugin = require('tailwindcss/plugin');
module.exports = {
theme: {
extend: {
textShadow: {
sm: '0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2))',
DEFAULT: '0 2px 4px var(--tw-shadow-color, rgba(0,0,0,0.3))',
lg: '0 4px 8px var(--tw-shadow-color, rgba(0,0,0,0.4))'
}
}
},
plugins: [
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{ 'text-shadow': (value) => ({ textShadow: value }) },
{ values: theme('textShadow') }
);
})
]
};
// Usage: text-shadow-sm, text-shadow, text-shadow-lg
// Or arbitrary: text-shadow-[0_4px_6px_rgba(0,0,0,0.5)]Kirjoitussuunnan utilityt
Kirjoitussuuntaan liittyvät CSS:n loogiset ominaisuudet (margin-inline-start, padding-inline-end, inset-inline-start) mahdollistavat oikealta vasemmalle (RTL) -asettelun tuen ilman päällekkäistä CSS:ää. Tailwind v3 lisäsi joitakin loogisia ominaisuuksia, mutta voitte kirjoittaa pluginin kattamaan jäljelle jäävät puutteet Tailwindin tyyliä noudattavalla yhtenäisellä nimeämiskäytännöllä.
plugin(function({ addUtilities, theme }) {
const spacing = theme('spacing');
const utilities = {};
Object.entries(spacing).forEach(([key, value]) => {
// Logical margin utilities (RTL-aware)
utilities['.ms-' + key] = { 'margin-inline-start': value };
utilities['.me-' + key] = { 'margin-inline-end': value };
utilities['.ps-' + key] = { 'padding-inline-start': value };
utilities['.pe-' + key] = { 'padding-inline-end': value };
// Logical inset
utilities['.start-' + key] = { 'inset-inline-start': value };
utilities['.end-' + key] = { 'inset-inline-end': value };
});
addUtilities(utilities);
})Liukuvärjätyn tekstin utility
Liukuvärjätty teksti edellyttää kolmen CSS-ominaisuuden yhdistelmää: background-clip: text, -webkit-background-clip: text ja color: transparent. Koska varsinaiset liukuvärin värit tulevat bg-gradient-to-*- ja from-*/to-*-utilityistä, pluginin tarvitsee tarjota vain leikkauksen perusta. Tämä on klassinen usean ominaisuuden utility, joka hyötyy yhdestä helposti muistettavasta luokanimestä.
plugin(function({ addUtilities }) {
addUtilities({
'.text-gradient': {
'-webkit-background-clip': 'text',
'background-clip': 'text',
'-webkit-text-fill-color': 'transparent',
'color': 'transparent'
}
});
})
// Usage: combine with standard bg-gradient utilities
<h1 class='
text-gradient
bg-gradient-to-r
from-purple-500
to-blue-500
text-4xl font-bold
'>
Beautiful gradient text
</h1>Gridin auto-fill-utility
CSS Gridin responsiivisten ruudukkojen auto-fill- ja auto-fit-toistomallit ovat yleisiä, mutta niiden syntaksi on pitkä. Plugin, joka tuottaa parametroitavia grid-utilityjä yleisimpiä sarakkeiden vähimmäisleveyksiä varten, yksinkertaistaa responsiivisten ruudukkojen kirjoittamista huomattavasti. Käyttäkää matchUtilities-toimintoa, jotta käyttäjät voivat määrittää sarakkeiden mielivaltaisia vähimmäisleveyksiä.
plugin(function({ matchUtilities }) {
matchUtilities(
{
'grid-fill': (value) => ({
gridTemplateColumns: 'repeat(auto-fill, minmax(' + value + ', 1fr))'
}),
'grid-fit': (value) => ({
gridTemplateColumns: 'repeat(auto-fit, minmax(' + value + ', 1fr))'
})
},
{ values: { sm: '10rem', md: '15rem', lg: '20rem', xl: '25rem' } }
);
})
// Usage:
// <div class='grid grid-fill-md gap-4'>
// Items auto-arrange into columns of min 15rem
// </div>CSS Grid -alueiden utilityt
Nimetyt grid-alueet grid-template-areas-ominaisuuden avulla edellyttävät pitkää CSS:ää, jota on vaikea ilmaista Tailwindin utility-mallilla. Plugin voi lisätä utilityt yleisiä nimettyjen alueiden asetteluja varten – esimerkiksi klassisen sivuasettelun, jossa on header-, sidebar-, main- ja footer-alueet – yksittäisinä utility-luokkina. Ne sopivat hyvin yhteen col-span-*- ja row-span-*-utilityjen kanssa monimutkaisemmissa asetteluissa.
plugin(function({ addUtilities }) {
addUtilities({
'.grid-area-page': {
gridTemplateAreas:
'"header header"' +
'"sidebar main"' +
'"footer footer"',
gridTemplateColumns: '250px 1fr',
gridTemplateRows: 'auto 1fr auto'
},
'.area-header': { gridArea: 'header' },
'.area-sidebar': { gridArea: 'sidebar' },
'.area-main': { gridArea: 'main' },
'.area-footer': { gridArea: 'footer' }
});
})
// Usage:
// <div class='grid grid-area-page min-h-screen'>
// <header class='area-header'>...</header>
// <aside class='area-sidebar'>...</aside>
// <main class='area-main'>...</main>
// <footer class='area-footer'>...</footer>
// </div>Sisäänrakennettuja laajemmat animaatioutilityt
Tailwind tarjoaa utilityt animate-spin, animate-pulse, animate-bounce ja animate-ping. Monipuolisempia animaatioita, kuten heilunta-, sydämenlyönti- tai leijuntaefektiä varten, lisätkää teemaan mukautetut keyframet ja viitatkaa niihin pluginissa. Plugin varmistaa, että animaatioluokat noudattavat Tailwindin animate-*-nimeämiskäytäntöä ja pitää järjestelmän yhtenäisenä.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' }
},
heartbeat: {
'0%, 100%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.3)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.3)' },
'70%': { transform: 'scale(1)' }
}
},
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
heartbeat: 'heartbeat 1.5s ease-in-out infinite'
}
}
}
};
// Usage: class='animate-wiggle' or class='animate-heartbeat'Mukautettujen utilityjen testaaminen
Varmistakaa, että pluginin utilityt näkyvät tuotetussa CSS:ssä luomalla testattava HTML-tiedosto, joka käyttää luokanimiä, ja suorittamalla Tailwind CLI. JIT-moottorin on löydettävä luokka tiedostosta, joka vastaa sisältöön määritettyjä globaaleja kuvioita. Testatkaa myös responsiivisten ja tila varianttien toiminta, jos aiotte käyttää niitä – jotkin pseudoelementtiutilityt, kuten ::-webkit-scrollbar, eivät tue responsiivisia etuliitteitä mielekkäällä tavalla.
<!-- test.html -->
<div class='scrollbar-hide overflow-y-auto h-48'>
<p class='text-shadow-lg text-2xl font-bold text-gray-900'>Test</p>
<div class='grid grid-fill-md gap-4'>
<div class='bg-gray-100 p-4 rounded'>Card 1</div>
<div class='bg-gray-100 p-4 rounded'>Card 2</div>
</div>
</div>
<!-- Run: npx tailwindcss -i src/input.css -o test-output.css --content test.html -->
<!-- Inspect test-output.css for your custom utility classes -->Mukautettujen utilityjen dokumentointi
Dokumentoikaa mukautetut utilityt tiimiänne varten, jotta kaikki tietävät, mitä on saatavilla ja miten niitä käytetään. Luokaa PLUGINS.md-tiedosto tai Storybook-sivu, jossa luetellaan jokainen mukautettu utility sekä sen luokanimet, hyväksytyt arvot ja käyttöesimerkit. Ilman dokumentaatiota tiimin jäsenet kirjoittavat usein saman CSS:n kahdesti – kerran utilitynä ja uudelleen upotettuina tyyleinä – koska he eivät tienneet pluginin olemassaolosta.
/*
Custom Utilities Documentation
================================
.scrollbar-hide
Hides the scrollbar while preserving scroll functionality.
Use with: overflow-y-auto, overflow-x-auto
Example: <div class='overflow-y-auto h-64 scrollbar-hide'>
.text-shadow-{size}
Adds a text shadow. Sizes: sm, DEFAULT, lg.
Example: <h1 class='text-shadow-lg text-3xl font-bold'>
Arbitrary: <h1 class='text-shadow-[0_4px_8px_rgba(0,0,0,0.5)]'>
.text-gradient
Enables gradient text via background-clip: text.
Must combine with bg-gradient-to-* and from-*/to-* utilities.
Example: <span class='text-gradient bg-gradient-to-r from-purple-500 to-pink-500'>
.grid-fill-{size}
Auto-fill grid with minimum column width. Sizes: sm, md, lg, xl.
Example: <div class='grid grid-fill-md gap-4'>
*/Mukautettujen utilityjen suorituskykyvaikutus
Mukautetut utilityt kasvattavat tuotetun CSS:n kokoa. Jos utility tuottaa monia muunnelmia, kuten välistysutilityt yli 30 skaala-askelmalle, tuloste voi kasvaa merkittävästi. Valitkaa ohjelmallisesti tuotettavat utilityt harkiten. Käyttäkää matchUtilities-toimintoa pienen teemaarvojoukon kanssa ja hyödyntäkää yksittäistapauksissa mielivaltaisia arvoja sen sijaan, että tuottaisitte etukäteen kaikki mahdolliset yhdistelmät. Näin CSS-paketti pysyy kevyenä joustavuudesta tinkimättä.
// Avoid: generates 30+ utilities upfront
plugin(function({ addUtilities, theme }) {
const spacing = theme('spacing'); // 30+ entries
const utils = {};
Object.entries(spacing).forEach(([k, v]) => {
utils['.clip-' + k] = { clipPath: 'inset(' + v + ')' };
});
addUtilities(utils); // large CSS output
});
// Better: use matchUtilities with limited defaults
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{ 'clip': (v) => ({ clipPath: 'inset(' + v + ')' }) },
{ values: { none: '0', sm: '0.5rem', md: '1rem' } }
// Users can still do clip-[2rem] for custom values
);
});Pikatarkistus
Testatkaa, miten hyvin hallitsette tämän oppitunnin Tailwind CSS Mastery -käsitteet.
Oppitunnin kertaus
Tässä oppitunnissa opitte, että addUtilities lisää staattisia mukautettuja utility-luokkia, matchUtilities lisää utilityjä, jotka tukevat mielivaltaisia arvoja, ja mukautetut utilityt tulee dokumentoida ja rajata todellisiin, toistuviin tarpeisiin. Seuraavaksi opimme lisäämään pluginien avulla mukautettuja tilavariantteja, joilla kohdistetaan tyylejä mukautettuihin selektoreihin ja data-attribuutteihin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Mukautettujen apuluokkien lisääminen pluginilla” ilmainen?
Kyllä – oppitunnin ”Mukautettujen apuluokkien lisääminen pluginilla” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Mukautettujen apuluokkien lisääminen pluginilla”?
Kirjoittakaa plugin, joka lisää uusia apuluokkia, kuten text-shadow-* tai scrollbar-hide, joita Tailwindin oletusjakelu ei sisällä. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Mukautettujen apuluokkien lisääminen pluginilla”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tailwindin Plugin-rajapinta
- Mukautettujen apuluokkien lisääminen pluginilla
- Mukautettujen varianttien lisääminen pluginilla
- Pluginien julkaiseminen ja uudelleenkäyttö