Tailwind CSS Academy logo
HTMLWebbNivåer A1 → B222 språk

Tailwind CSS Academy

Bemästra det utility-baserade CSS-ramverk som OpenAI, Vercel och Shopify förlitar sig på. Lär er alla utilities, responsiv design, mörkt läge, animationer och optimering för produktion. En lärstig från CoddyKit med 30 korta kurser och 120 interaktiva lektioner, med en AI-handledare till hands dygnet runt.

Kurser
30
Lektioner
120
Interaktiva steg
1,559
Gratis att börja
Kurs 1
Kursplan

30 kurser i den här lärvägen

Alla kurser i lärvägen Tailwind CSS Academy, i rätt ordning. Den första är gratis.

1

A14 lektionerGratis

Upptäck den utility-first-filosofi som ligger bakom Tailwind CSS och förstå hur den skiljer sig från traditionella CSS-ramverk som Bootstrap. Lär er konfigurera Tailwind i ett projekt och skriva era…

2

A14 lektionerPRO

Bemästra Tailwinds omfattande uppsättning typografiutilities för att styra teckenstorlek, vikt, radhöjd, teckenavstånd och textjustering. Lär er skapa lättläst och visuellt tilltalande text utan någo…

3

A14 lektionerPRO

Utforska Tailwinds omfattande färgpalett och lär er tillämpa bakgrundsfärger, gradienter och bakgrundsbilder. Förstå hur opacitetsmodifierare används och skapa visuellt innehållsrika ytor.

4

A14 lektionerPRO

Lär er Tailwinds konsekventa skala för mellanrum och lägg till margin och padding på valfritt element. Förstå riktningsbaserade genvägar och negativa marginaler för att styra layouten med precision.

5

A14 lektionerPRO

Tillämpa CSS Flexbox-layouter med Tailwinds flexutilities utan att skriva en enda rad egen CSS. Bygg horisontella och vertikala layouter, styr justering och hantera radbrytning på ett enkelt sätt.

6

A24 lektionerPRO

Använd CSS Grid via Tailwinds gridutilities för att bygga komplexa tvådimensionella layouter. Definiera kolumner, rader och områden med enkla klassnamn och styr elementens placering med precision.

7

A24 lektionerPRO

Styr elementens dimensioner med Tailwinds utilities för bredd, höjd, minimi- och maximibegränsningar samt aspektförhållanden. Bygg responsiva komponenter och komponenter med fasta storlekar med trygg…

8

A24 lektionerPRO

Formge elementens kanter och djup med Tailwinds border- och shadowutilities. Lär er lägga till rundade hörn, styra kantens bredd och färg samt använda boxskuggor för att skapa djup.

9

A24 lektionerPRO

Lägg till interaktivitet i gränssnittet genom att villkorligt tillämpa stilar vid hover, focus, active, disabled och andra pseudo-tillstånd. Lär er Tailwinds system med variantprefix för att styra va…

10

A24 lektionerPRO

Bygg layouter som anpassar sig till alla skärmstorlekar med Tailwinds mobile-first-brytpunkter för responsiv design. Tillämpa olika utility-klasser vid specifika viewport-bredder för att skapa verkli…

11

B14 lektionerPRO

Implementera dark mode i era webbappar med Tailwinds inbyggda dark-variant. Lär er skillnaden mellan klassstrategin och mediestrategin och bygg UI-komponenter som ser bra ut i både ljusa och mörka te…

12

B14 lektionerPRO

Få ut hela kraften ur Tailwind genom att bemästra filen tailwind.config.js. Lär er utöka standardtemat, lägga till anpassade värden, konfigurera innehållssökvägar och hantera pluginer.

13

B14 lektionerPRO

Anpassa Tailwind efter ert varumärke genom att lägga till anpassade färger, integrera Google Fonts och definiera en anpassad skala för mellanrum. Bygg ett projektspecifikt designspråk som fortfarande…

14

B14 lektionerPRO

Lär er när och hur Tailwinds direktiv @apply används för att samla upprepade utility-mönster i återanvändbara CSS-klasser. Balansera utility-first-metoden mot behovet av lättunderhållna komponentabst…

15

B14 lektionerPRO

Lägg till mjuka rörelser i gränssnittet med Tailwinds inbyggda utilities för övergångar och animationer. Lär er styra varaktighet, easing och fördröjning samt tillämpa keyframe-animationer för engage…

16

B14 lektionerPRO

Bygg välformgivna och återanvändbara UI-primitiver med Tailwinds utility-klasser. Lär er standardmönster för knappar med varianter, kort med sidhuvuden och sidfötter samt små informationsbadges.

17

B14 lektionerPRO

Bygg responsiva navigeringsfält och utfällbara sidebars med Tailwind-utilities. Lär er hantera mobila hamburgermenyer och skapa klistrad navigering som finns kvar när användaren scrollar.

18

B14 lektionerPRO

Formge tillgängliga och attraktiva formulärelement med Tailwind-utilities. Lär er skapa textfält, select-menyer, kryssrutor, radioknappar och kompletta formulärlayouter med valideringstillstånd.

19

B14 lektionerPRO

Bygg UI-mönster för överlagringar, som modaler, dialogrutor och dropdown-menyer, med Tailwind och minimal JavaScript. Lär er positionering, z-index-stapling och mjuka övergångar vid öppning och stäng…

20

B14 lektionerPRO

Förstå Tailwinds Just-In-Time-motor och hur den endast genererar den CSS ni använder. Lär er optimera er produktionsbundle, analysera utdata och skriva klasser som JIT-motorn kan upptäcka.

21

B24 lektionerPRO

Etablera ett robust system med designtokens i Tailwinds konfiguration för konsekvent tematisering av flera varumärken. Mappa primitiva tokens till semantiska tokens och bygg ett skalbart designspråk…

22

B24 lektionerPRO

Integrera Tailwind CSS i React- och Next.js-applikationer med den officiella konfigurationen. Lär er bästa praxis för att tillämpa utilities i JSX, hantera villkorliga klasser och organisera stilar i…

23

B24 lektionerPRO

Kombinera Tailwind CSS med Headless UI för att bygga helt tillgängliga, oformaterade komponenter. Tillämpa era egna Tailwind-klasser på menyer, dialogrutor, comboboxar och övergångar samtidigt som ni…

24

B24 lektionerPRO

Utöka Tailwinds funktionalitet genom att skriva anpassade pluginer som lägger till nya utilities, komponenter och varianter. Lär er plugin-API:et för att kapsla in återanvändbar stil-logik och dela d…

25

B24 lektionerPRO

Bygg UI-komponenter som uppfyller WCAG:s tillgänglighetsstandarder med Tailwind-utilities för färgkontrast, fokushantering och stöd för skärmläsare. Skriv HTML-struktur och Tailwind-stilar som funger…

26

B24 lektionerPRO

Tillämpa professionell bästa praxis för att leverera Tailwind CSS i produktionsapplikationer. Lär er granska bundlar, strategier för klassorganisation, lintning och tekniker för prestandaoptimering s…

27

B24 lektionerPRO

Tillämpa allt ni har lärt er hittills för att från grunden bygga en komplett och responsiv landningssida för marknadsföring med enbart Tailwind CSS. Gå igenom sektioner för hero, funktioner, kundomdö…

28

B24 lektionerPRO

Skapa ett komplett gränssnitt för en admin-dashboard med Tailwind CSS. Bygg en sidebar, ett toppfält, statistikkort, datatabeller och platshållarwidgets för diagram i en enhetlig och responsiv layout.

29

B24 lektionerPRO

Utforska hur Tailwind passar in i bredare strategier för CSS-arkitektur i storskaliga projekt. Lär er organisera filer, strukturera komponentlager och samexistera med äldre CSS eller andra stylingver…

30

B24 lektionerPRO

Samla alla färdigheter från det här spåret för att bygga ett komplett Tailwind-baserat designsystem. Definiera tokens, bygg ett komponentbibliotek, skriv en plugin och dokumentera systemet för teamet…

CoddyKit PRO

Lås upp alla 30 kurser i den här lärvägen och alla andra lärvägar

AI-handledare, certifieringsprov och certifikat. Fungerar på webben, iOS och Android.

Se alla abonnemang
Årsvis$29.90 / årCirka $2.49 i månadenBetala en gångLivstid$69.99 en gångInga förnyelser. PRO för alltid.
Kursöversikt

Bemästra Tailwind CSS

Bemästra det utility-baserade CSS-ramverk som OpenAI, Vercel och Shopify förlitar sig på. Lär er alla utilities, responsiv design, mörkt läge, animationer och optimering för produktion. Det här spåret omfattar 30 progressiva minikurser från nybörjarnivå (A1) till avancerad nivå (B2), med korta, fokuserade lektioner och snabba kunskapstest som hjälper er att befästa varje koncept.

Det här får ni lära er

Ni börjar med grunderna och bygger vidare med ämnen på medel- och avancerad nivå, där varje kurs bygger på den föregående. Varje lektion är praktiskt inriktad, med verkliga exempel och en AI-handledare som finns till hands när ni behöver hjälp.

Så fungerar det

Varje kurs är uppdelad i fyra fokuserade lektioner. Genomför några lektioner om dagen så behärskar ni hela spåret på veckor i stället för månader.

Så lär du dig

  1. 01

    Interaktiva lektioner

    Praktiska kodövningar med feedback i realtid

  2. 02

    AI-handledare

    Få omedelbar hjälp av vår AI när du kör fast

  3. 03

    Inbyggd kodredigerare

    Skriv och kör kod direkt i webbläsaren

  4. 04

    Certifikat

    Få ett certifikat när du slutför kursen

FAQ

Vanliga frågor

Är kursen i Tailwind CSS Academy gratis?

Ja. Ni kan börja kursen i Tailwind CSS Academy gratis och genomföra de interaktiva lektionerna utan kostnad. Med en valfri PRO-prenumeration får Ni tillgång till avancerade AI-verktyg och ett certifikat som kan delas.

Behöver jag tidigare erfarenhet för att lära mig HTML?

Nej. Kursen börjar med grunderna och går stegvis vidare till mer avancerade ämnen, så Ni kan börja även utan tidigare erfarenhet av HTML.

Hur lär jag mig HTML på CoddyKit?

Ni lär Er genom att göra. Korta interaktiva lektioner kombinerar tydliga förklaringar med praktiska kodövningar som körs i realtid, och en AI-handledare som är tillgänglig dygnet runt ger personlig hjälp när Ni kör fast.

Får jag ett certifikat när jag har slutfört Tailwind CSS Academy?

Ja. PRO-användare kan göra ett prov och få ett delbart intyg på att de har slutfört kursen i Tailwind CSS Academy, med en verifierbar kod.

Kan jag lära mig HTML i mobilen?

Ja. CoddyKit finns på webben och som inbyggda iOS- och Android-appar, så Ni kan lära Er HTML på valfri enhet och synkronisera Era framsteg mellan dem.

Vad kostar CoddyKit PRO?

Den första kursen i Tailwind CSS Academy är gratis. CoddyKit PRO låser upp alla kurser: $5.90 per vecka, $7.90 per månad, $29.90 per år eller $69.99 en gång för livstidsåtkomst utan förnyelser.

Hur lång tid tar det att slutföra Tailwind CSS Academy?

Tailwind CSS Academy har 30 kurser och 120 lektioner. De flesta lektioner tar cirka 5–10 minuter, så hela lärvägen motsvarar ungefär 14 timmars praktisk övning i egen takt.

Börja med Tailwind CSS Academy nu

Anslut Er till tusentals deltagare som lär sig programmering med AI-drivna lektioner.