Jump to content

Tailwind CSS

Hva er Tailwind CSS?

Tailwind CSS er et lite, utility first CSS-rammeverk for å lage tilpassede temaer uten å måtte bytte mellom ulike kontekster. Det er et rent CSS-rammeverk og tilbyr ingen forhåndsbygde komponenter eller logikk. Det tilbyr også et helt annet sett med fordeler sammenlignet med et komponentbibliotek som Material UI.

Det gjør det utrolig enkelt og raskt å skrive CSS, som vist i eksemplet nedenfor:

Gammel CSS:

  1. Skriv CSS (ofte i en egen fil)
.my-class {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.25rem;
  padding: 1rem;
}
  1. Importer CSS til komponenten din
import "./my-class.css";
  1. Legg til klassen i HTML-koden din
<div class="my-class">...</div>

Tilsvarende i Tailwind:

  1. Bare skriv klassen i HTML-koden din
<div
  class="flex flex-col items-center justify-center rounded border border-gray-200 bg-white p-4"
>
  ...
</div>

React-komponenter er en sterk kombinasjon for å raskt lage brukergrensesnitt.

Tailwind CSS har et veldig fint innebygd temasystem som kommer med en nøye utvalgt fargepalett, dimensjonsstiler for bredde/høyde og padding/margin, og mediabrytepunkter for responsive layouter. Dette designsystemet kan tilpasses og utvides for å lage nøyaktig det settet med stiler som prosjektet ditt trenger.

Tru Narla, bedre kjent som mewtru, har en flott presentasjon om hvordan å bygge et temasystem med Tailwind CSS.

Bruk

Sørg for at du har installert editor-plugins for Tailwind for å forbedre utvikleropplevelsen.

Utvidelser og plugins

Formatering

Tailwind CSS-klasser kan fort bli forvirrende, så en klasseformaterer er et must. Tailwind CSS Prettier Plugin sorterer klassene i anbefalt rekkefølge slik at klassene samsvarer med utdata-CSS-bundlen. Hvis du velger Tailwind i CLI, vil vi installere og konfigurere det for deg.

Betinget Bruk av Klasser

Å legge til klasser under forhold med “ternærer” kan bli veldig rotete og vanskelig å lese. Disse pakkene hjelper deg med å organisere klassene dine når du bruker betinget logikk.

Nyttige Ressurser

RessurserLink
Tailwind Dokumentasjonhttps://tailwindcss.com/docs/editor-setup/
Tailwind Cheat Sheethttps://nerdcave.com/tailwind-cheat-sheet/
awesome-tailwindcsshttps://github.com/aniftyco/awesome-tailwindcss/
Tailwind Communityhttps://github.com/tailwindlabs/tailwindcss/discussions/
Tailwind Discord-serverhttps://tailwindcss.com/discord/
TailwindLabs Youtube-kanalhttps://www.youtube.com/tailwindlabs/
Tailwind Playgroundhttps://play.tailwindcss.com/

Recent Contributors To This Page