Menggunakan Tailwind CSS dengan SvelteKit
Instal dan konfigurasikan Tailwind CSS dalam proyek SvelteKit dengan plugin resmi.
Menggunakan Tailwind CSS dengan SvelteKit adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Mengapa Tailwind
Tailwind adalah kerangka kerja CSS yang mengutamakan utilitas dan berpadu secara alami dengan gaya tercakup milik Svelte.
Pasang
Gunakan penyiapan Tailwind SvelteKit resmi.
npx svelte-add@latest tailwindcss
npm installKonfigurasi
Konfigurasi Tailwind (tailwind.config.js) memindai file Svelte Anda untuk mencari penggunaan kelas.
content: ["./src/**/*.{html,js,svelte,ts}"]Gunakan di Komponen
Terapkan kelas utilitas langsung ke elemen.
<button class="px-4 py-2 bg-blue-500 text-white rounded">Click</button>Pengaya
Tambahkan pengaya formulir, tipografi, dan rasio aspek untuk bawaan yang lebih kaya.
Tema Khusus
Perluas tema Tailwind dalam konfigurasi untuk warna merek dan fon khusus.
Mode Gelap
Gunakan varian dark: dengan strategi kelas yang dikendalikan melalui penyimpanan Svelte.
Komposisi
Gabungkan utilitas Tailwind dengan blok <style> tercakup untuk penyesuaian khusus komponen.
Kinerja JIT
Kompilator JIT Tailwind menghasilkan CSS berukuran kecil dengan hanya menyertakan utilitas yang Anda gunakan.
Direktif @apply
Gunakan @apply di dalam blok gaya untuk kombinasi utilitas yang dapat digunakan kembali.
Pustaka UI di Tailwind
Skeleton UI, Flowbite Svelte, dan Melt UI menawarkan komponen yang ramah terhadap Tailwind.
Pemeriksaan Singkat
Apa fungsi pengaturan konten Tailwind?
Ringkasan
Tailwind + SvelteKit adalah kombinasi yang produktif. Konfigurasikan jalur konten dan gunakan utilitas langsung dalam markup komponen.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menggunakan Tailwind CSS dengan SvelteKit” gratis?
Ya — teks lengkap “Menggunakan Tailwind CSS dengan SvelteKit” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menggunakan Tailwind CSS dengan SvelteKit”?
Instal dan konfigurasikan Tailwind CSS dalam proyek SvelteKit dengan plugin resmi. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Menggunakan Tailwind CSS dengan SvelteKit” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menggunakan Tailwind CSS dengan SvelteKit
- Grafik D3.js dalam Svelte
- Peta Leaflet dengan Tindakan Svelte
- Editor Teks Kaya: Tiptap