Brug af Tailwind CSS med SvelteKit
Installér og konfigurér Tailwind CSS i et SvelteKit-projekt med det officielle plugin.
Brug af Tailwind CSS med SvelteKit er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvorfor Tailwind
Tailwind er et utility-first CSS-framework, der passer naturligt sammen med Svelte's scoped styles.
Installér
Brug den officielle SvelteKit-Tailwind-opsætning.
npx svelte-add@latest tailwindcss
npm installKonfiguration
Tailwind-konfigurationen (tailwind.config.js) gennemgår dine Svelte-filer for brug af klasser.
content: ["./src/**/*.{html,js,svelte,ts}"]Brug i komponenter
Anvend utility-klasser direkte på elementer.
<button class="px-4 py-2 bg-blue-500 text-white rounded">Click</button>Plugins
Tilføj plugins til formularer, typografi og størrelsesforhold for at få bedre standardindstillinger.
Tilpasset tema
Udvid Tailwinds tema i konfigurationen med brandfarver og tilpassede skrifttyper.
Mørk tilstand
Brug varianten dark: med en class-strategi, der styres via en Svelte-store.
Sammensætning
Kombinér Tailwind-utilities med scoped <style>-blokke til komponentspecifikke justeringer.
JIT-ydeevne
Tailwinds JIT-compiler producerer lille CSS ved kun at inkludere de utilities, du bruger.
@apply-direktiv
Brug @apply i style-blokke til genanvendelige kombinationer af utilities.
UI-biblioteker til Tailwind
Skeleton UI, Flowbite Svelte og Melt UI tilbyder komponenter, der passer godt til Tailwind.
Hurtigt tjek
Hvad gør Tailwinds content-indstilling?
Opsummering
Tailwind + SvelteKit er en produktiv kombination. Konfigurér content-stier, og brug utilities direkte i komponenternes markup.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Brug af Tailwind CSS med SvelteKit” gratis?
Ja — hele teksten til “Brug af Tailwind CSS med SvelteKit” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Brug af Tailwind CSS med SvelteKit”?
Installér og konfigurér Tailwind CSS i et SvelteKit-projekt med det officielle plugin. Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Brug af Tailwind CSS med SvelteKit”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Brug af Tailwind CSS med SvelteKit
- D3.js-diagrammer i Svelte
- Leaflet-kort med Svelte actions
- Rich text-editorer: Tiptap