-
Klikk her for å se noe som er skjult
- 💡 Tips
- 📜 Oppgave
- 🙈 Løsningsforslag
- Ikke stress gjennom oppgavene. Du får best utbytte av å ikke hoppe rett på løsningsforslagene.
- Vær nysgjerrig, trykk på lenker, ikke kjenn på at du må bli ferdig.
- Løsningsforslag er forslag og ikke fasit.
- Spør oss om hjelp! Spør sidemannen. Se på løsningsforslag. Google. Ikke sitt i frustasjonen for lenge!
- Følg nysgjerrigheten, og still spørsmål. Det er du som skal lære og ha det gøy!
Oppgavene er skrevet i markdown, og VSCode burde åpne markdown-filer i preview-mode automatisk. Dersom den ikke gjør det kan man åpne de manuelt i preview ved å trykke på preview-knappen i VSCode som vist under.
Oppgavene kan også lese på github.
💡 Visual Studio Code har en innebygd terminal
- Høyreklikk på en fil i filutforskeren til VSCode og velg «Open in Integrated Terminal».
- Eller velg «Terminal» i menyen helt i toppen av skjermen -> «New Terminal»
💡 Hvordan navigere i terminalen?
list opp mapper og filer:
$ lsGå inn i mappe:
$ cd mappenavnGå ut av mappe:
$ cd ..💡 Hvordan få opp flere terminaler samtidig?
Høyreklikk i terminalen i VSCode -> Velg «New Terminal» for å få den i en nye fane, eller «Split terminal» for å få to terminaler side om side.
Steg 1: Klon repoet
💡 Ønsker du en egen kopi av repoet?
Helt frivillig: Om du ønsker en egen kopi av repoet tilknyttet din Github-konto, eller du ønsker å bruke git og pushe endringer er dette tidspunktet å forke repoet.
Vi legger ikke opp til at du trenger git til mer enn å klone repoet.
📜 Klon repoet
💡 Hvordan klone et repo?
Kopier lenken til repoet (Lenken fra ditt eget repo om du har forket det)
Åpne en terminal, og naviger til hvor du ønsker å kopiere koden.
Klon repoet med kommandoen:
$ git clone https://github.com/lenke/til/repoVi har lagt opp til å bruke VSCode som kan lastes ned herfra om du ikke allerede har det installert.
Hvorfor VSCode?
- Tailwind vedlikeholder en offisiell VSCode extension som gir autocomplete og annet snacks.
- Det er enklere for oss å hjelpe til når vi bruker samme editor.
📜 Åpne mappen tailwind-workshop i VSCode. Det burde dukke opp en popup med anbefalte extensions som vist under, velg «Install.
Hvis ikke kan du legge til anbefalte extensions individuelt
Trykk på lenken og trykk «install».
📜 Åpne en terminal, og kjør følgende kommandoer (uten $):
$ node -v
$ npm -v
$ npx -vDersom du får et versjonsnummer for alle kommandoene er alt klart ✅
Hvis ikke, ta kontakt, så hjelper vi deg 🏃
📜 Åpne en terminal i rotmappen til prosjektet (tailwind-workshop) og kjør kommandoen:
$ npm installI mappen /kun-html ligger en readme med oppgaver hvor vi går løs på Tailwind 🚀.
Vi fortsetter med å se på oppgavene i mappen /tailwind-konfigurasjonen, hvor vi dykker ned i hvordan vi kan konfigurere Tailwind ⚙️.
♻️ Vi har sett at det er veldig enkelt å gjenbruke HTML som er stylet med Tailwind, og byggge videre på det for å lage noe eget.
📜 Bruk litt tid på å se hva som er laget med Tailwind - hva som er mulig🌟 - som en forberedelse til neste oppgave.
💡 Se etter hvilke utilities som er brukt og søk de gjerne opp opp i dokumentasjonen! Prøv å lim inn i HTML i kun HTML-utgangspunktet vårt, eller evt. CSS og Tailwind-konfigurasjon i Tailwind-konfigurasjonsfil-utgangspunktet vårt.
- Built With Tailwind CSS
- På builtwithtailwind.com er det mulig å scrolle gjennom previews av sider bygd med Tailwind. Sjekk ut hva folk har laget!
- Tailwind UI
- Sjekk ut tailwindui.com som har over 500 Tailwind-komponenter laget av folkene bak Tailwind.
- Fyr av ei melding til
@skjelmopå Abakus-slacken om du vil prøve en som er bak hengelås. Har lisens på de eller fleste kompoentene, og dere kan bruke de for workshopen, men de kan dessverre ikke distribueres offentlig gjennom et git-repo.
- Flowbite
- Sjekk ut flowbite.com, som f.eks. har ferdige skjemaer
- Gradienter for Tailwind
- Ferdiglagde gradienter for TailwindCSS, bare trykk på Tailwind-ikonet for å kopiere utilties!
🤖 Videre er Tailwind er bygget for å være konfigurerbart, og siden miljøet rundt Tailwind er stort finnes det mange ressurser for å generere Tailwind-konfigurasjon.
- palette.app: Brukes av folka bak Tailwind. Introduksjon til palette.app.
- Tailwind Color Shades: Et enkelt verktøy for å lage fargepaletter.
- Tailwind Gradient Generator: For å lage gradienter med Tailwind utilties
- tailwind-tools.com: Verktøy for å generere layout med Flex eller Grid.
- Lengre liste med verktøy på bestoftailwind.com/tools
- Lengre liste med verktøy på awesome-tailwindcss
Nå har vi ett utgangspunkt med kun HTML og ett med HTML, CSS og egen Tailwind-konfigurasjonsfil.
Vi har gått gjennom litt av hva Tailwind har å tilby, og gått i dybden på enkelte aspekter. Samtidig er det veldig mye å utforske!
Herfra blir det mer press på deg for følge nysgjerrigheten og bruke tilgjengelige ressurser!
📜 Utforsk utilities og konsepter med Tailwind på egenhånd 🦸♀ ! Har en liste med mulige temaer å dykke ned i under👇
💡 Kan anbefale å lene seg på dokumentasjonen og et Tailwind cheat-sheet.
💡 Husk å åpne /tailwind-konfigurasjon i et eget vindu i VSCode dersom du bruker den, for at IntelliSense skal plukke opp konfigurasjonen i tailwind.config.js.
- Dark mode
- Det er ikke trivielt å støtte dark-mode med CSS, men Tailwind gjør det veldig enkelt!
- Hover, focus og andre tilstander
- Hvordan endrer man styling når man har musen over et element, og hvordan kan vi style et element kun når det får fokus fra tastaturet? Her er ring utilities (video) et kult konsept fra Tailwind!
- Responsivt design
- Tailwind er «responsive by design», hvordan håndterer vi at skjermstørrelsen varierer?
- Fargepalett
- Tailwind gjør det enkelt å jobbe med egne farger!
- Flex og Grid
- Tailwind har gode utilities for å jobbe med layouts!
- Bilder
- Hvordan style bilder med Tailwind? De har utilities for aspect ratio, filter og mye mer!
- Typografi
- Tailwind har masse utilities som går på tekst
- Gradienter
Bare spør om flere muligheter for å fordype seg!
Dersom du ønsker å følge med på hva som rører seg rundt TailwindCSS fremover kan jeg anbefale:
- ✉️ Tailwind Weekly: Et kort nyhetsbrev rundt CSS som tar rundt 3 minutter å lese. Sendes ut ukentlig som navnet tilsier.
- 🐦 Adam Wathan på Twitter: Hovedpersonen bak TailwindCSS er aktiv på Twitter.
- 🎥 TailwindLabs på Youtube: Konsise videoer fra Tailwind-teamet som dykker ned i konkrete utilities og plugins, går gjennom nye konsepter og gjenskaper eksisterende sider med Tailwind.
Om du ønsker å få til funksjonalitet, eller ta i bruk Tailwind på et eksisterende prosjekt, finnes det mange ferdige setups forskjellige rammeverk.
Dersom du er kjent med React er det også satt opp en superenkel React-applikasjon laget i mappen /react-komponenter som har fem komponenter som utgangspunkt.