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;
}

2. Importer CSS til komponenten din

import "./my-class.css";

3. 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

• VSCode Extension↗
• JetBrains-integrasjon↗
• Neovim LSP↗

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.

• clsx↗
• classnames↗

Nyttige Ressurser