Menambah Utiliti Tersuai melalui Pemalam
Tulis pemalam yang menambah kelas utiliti baharu seperti text-shadow-* atau scrollbar-hide yang tiada dalam edaran Tailwind lalai.
Menambah Utiliti Tersuai melalui Pemalam ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Bila Perlu Menambah Utiliti Tersuai
Tambahkan utiliti tersuai apabila Anda mendapati diri Anda berulang kali menulis CSS mentah yang sama dalam blok @apply atau gaya sebaris, apabila Tailwind tidak mempunyai utiliti untuk sifat CSS yang sah, atau apabila gabungan awalan khusus pelayar memerlukan nama kelas yang kemas. Utiliti tersuai yang baik mengikut prinsip tanggungjawab tunggal Tailwind: satu utiliti mengawal satu sifat CSS atau satu kumpulan sifat yang berkait rapat. Elakkan mencipta utiliti yang menetapkan banyak sifat yang tidak berkaitan — sifat sedemikian sesuai diletakkan dalam komponen.
Utiliti Menyembunyikan Bar Skrol
Salah satu utiliti tersuai yang paling kerap diminta ialah .scrollbar-hide — utiliti ini menyembunyikan bar skrol secara visual sambil mengekalkan keupayaan elemen untuk menatal. Hal ini memerlukan sifat khusus vendor untuk pelbagai pelayar: scrollbar-width: none untuk Firefox dan -webkit-scrollbar: display none untuk pelayar Chromium. Membungkusnya dalam plugin menjadikannya tersedia sebagai kelas scrollbar-hide yang mudah di mana-mana sahaja dalam penanda anda.
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'>...Utiliti Bayang Teks
text-shadow CSS ialah sifat yang biasa digunakan tetapi tidak disertakan oleh Tailwind secara lalai. Membina plugin untuknya dengan penyepaduan tema membolehkan pengguna menggunakannya seperti utiliti terbina dalam, di samping menyokong penyesuaian melalui konfigurasi. Tentukan nilai lalai dalam tema dan rujuk nilai tersebut dalam plugin supaya utiliti menghormati penggantian pengguna dalam tailwind.config.js.
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)]Utiliti Arah Penulisan
Sifat logik CSS untuk arah penulisan (margin-inline-start, padding-inline-end, inset-inline-start) membolehkan sokongan susun atur kanan-ke-kiri (RTL) tanpa CSS pendua. Tailwind v3 menambahkan beberapa sifat logik, tetapi Anda boleh menulis plugin untuk melengkapkan kekurangan yang masih ada dengan konvensyen penamaan yang konsisten dan sepadan dengan gaya Tailwind.
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);
})Utiliti Teks Gradien
Teks gradien memerlukan gabungan tiga sifat CSS: background-clip: text, -webkit-background-clip: text, dan color: transparent. Memandangkan warna gradien sebenar datang daripada utiliti bg-gradient-to-* dan from-*/to-*, plugin hanya perlu menyediakan asas pemotongan. Ini ialah contoh klasik utiliti berbilang sifat yang sesuai dijadikan satu nama kelas yang mudah diingati.
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>Utiliti Auto-Isi Grid
Pola ulangan auto-fill dan auto-fit CSS Grid untuk grid responsif adalah perkara biasa tetapi memerlukan sintaks yang panjang. Plugin yang menjana utiliti grid berparameter untuk lebar minimum lajur yang paling biasa dapat memudahkan penulisan grid responsif dengan ketara. Gunakan matchUtilities supaya pengguna boleh menentukan lebar minimum lajur arbitrari.
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>Utiliti Kawasan CSS Grid
Kawasan grid bernama melalui grid-template-areas memerlukan CSS yang panjang dan sukar dinyatakan dalam model utiliti Tailwind. Plugin boleh menambahkan utiliti untuk susun atur kawasan bernama yang biasa — seperti susun atur halaman klasik dengan kawasan pengepala, bar sisi, utama dan pengaki — sebagai kelas utiliti tunggal. Utiliti ini berfungsi dengan baik bersama col-span-* dan row-span-* untuk susun atur yang lebih kompleks.
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>Utiliti Animasi Selain Utiliti Terbina Dalam
Tailwind menyediakan animate-spin, animate-pulse, animate-bounce, dan animate-ping. Untuk animasi yang lebih pelbagai — seperti kesan goyangan, degupan jantung atau terapung — tambahkan bingkai utama tersuai pada tema dan rujuknya dalam plugin. Plugin memastikan nama kelas animasi mengikut konvensyen animate-* Tailwind, lalu mengekalkan keselarasan sistem.
// 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'Menguji Utiliti Tersuai Anda
Sahkan bahawa utiliti plugin Anda muncul dalam CSS yang dijana dengan mencipta fail HTML ujian yang menggunakan nama kelas tersebut dan menjalankan CLI Tailwind. Enjin JIT mesti menemui kelas itu dalam fail yang sepadan dengan glob kandungan Anda. Uji juga bahawa varian responsif dan varian keadaan berfungsi jika Anda memang memerlukannya — sesetengah utiliti unsur pseudo seperti ::-webkit-scrollbar tidak menyokong awalan responsif dengan bermakna.
<!-- 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 -->Mendokumentasikan Utiliti Tersuai
Dokumentasikan utiliti tersuai untuk pasukan Anda supaya mereka mengetahui perkara yang tersedia dan cara menggunakannya. Cipta fail PLUGINS.md atau halaman Storybook yang menyenaraikan setiap utiliti tersuai bersama nama kelas, nilai yang diterima dan contoh penggunaan. Tanpa dokumentasi, ahli pasukan sering menulis CSS yang sama dua kali — sekali sebagai utiliti dan sekali lagi sebagai gaya sebaris — kerana mereka tidak mengetahui kewujudan plugin tersebut.
/*
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'>
*/Kesan Prestasi Utiliti Tersuai
Utiliti tersuai menambah saiz CSS yang dijana. Jika utiliti menjana banyak variasi (seperti utiliti jarak merentasi lebih daripada 30 peringkat skala), hasilnya boleh berkembang dengan ketara. Pilih dengan teliti utiliti yang dijana secara program. Gunakan matchUtilities dengan set kecil nilai tema dan bergantung pada nilai arbitrari untuk kes sekali guna, bukannya menjana terlebih dahulu setiap gabungan yang mungkin. Dengan cara ini, himpunan CSS Anda kekal ringan sambil mengekalkan fleksibiliti.
// 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
);
});Semakan Pantas
Uji pemahaman Anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, Anda telah mempelajari: addUtilities menambahkan kelas utiliti tersuai statik, matchUtilities menambahkan utiliti dengan sokongan nilai arbitrari, dan utiliti tersuai hendaklah didokumentasikan serta dihadkan skopnya kepada keperluan sebenar yang berulang. Seterusnya, kita akan mempelajari cara menambahkan varian keadaan tersuai melalui plugin untuk menyasarkan pemilih tersuai dan atribut data.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Menambah Utiliti Tersuai melalui Pemalam” percuma?
Ya — teks penuh “Menambah Utiliti Tersuai melalui Pemalam” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menambah Utiliti Tersuai melalui Pemalam”?
Tulis pemalam yang menambah kelas utiliti baharu seperti text-shadow-* atau scrollbar-hide yang tiada dalam edaran Tailwind lalai. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Menambah Utiliti Tersuai melalui Pemalam” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- API Pemalam Tailwind
- Menambah Utiliti Tersuai melalui Pemalam
- Menambah Varian Tersuai melalui Pemalam
- Menerbitkan dan Menggunakan Semula Pemalam