Gå til innholdet
Fristil Designsystem

Tailwind

Tailwind er ikke påkrevd i Fristil, og er heller ikke i veien. Bruker du det, skal du kunne skrive p-6 på en .fs-button og forvente at det virker, og bygge dine egne flater med Fristils farger uten å slå opp et eneste variabelnavn.

Pakken har ingen avhengighet til Tailwind. Temaet er en vanlig CSS-fil, så det er versjonen i appen din som leser den, og to versjoner kan ikke komme i konflikt.

Oppsett

Section titled “Oppsett”
app.css
@layer theme, base, fristil, components, utilities;


@import "tailwindcss";
@import "@fristil/designsystem/tokens.css";
@import "@fristil/designsystem/tailwind.css";


/* og stilarkene for komponentene du bruker */
@import "@fristil/designsystem/button.css";

Den første linja er det eneste du må huske. Uten den nullstiller Tailwinds Preflight komponentene, eller komponentene slår klassene dine. Lagrekkefølgen forklarer hvorfor.

Det er alt. Ingen tailwind.config.ts, ingen forhåndsinnstilling som skal importeres i JavaScript.

Når Fristil og Tailwind er to stilark

Section titled “Når Fristil og Tailwind er to stilark”

Kommer Fristil inn som en <link>, og Tailwind fra et annet sted, finnes det ingen felles inngangsfil å sette linja øverst i. Da hører den i et <style> som står først i <head>, før begge:

<head>
  <style>@layer theme, base, fristil, components, utilities;</style>


  <link rel="stylesheet" href="/statisk/tailwind-bygget.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css" />
</head>

En @layer-setning oppretter bare lag som ikke finnes ennå, og flytter ikke dem som alt er erklært. Tailwind erklærer theme, base, components, utilities på første linje av sin egen CSS, og Fristils tokens.css åpner @layer fristil. Det stilarket som lastes først avgjør derfor rekkefølgen, og begge rekkefølgene står som feil i tabellen under. Setningen i <head> avgjør den før noen av filene rekker å erklære noe, og da er det likegyldig hvilket av de to stilarkene som lastes først.

Temaet med fs--klassene, tailwind.css, er en @theme-blokk Tailwinds kompilator må lese, og kan ikke lenkes. Er det ingen kompilator i bildet, får du komponentene og tokenene, men ikke text-fs-l og bg-fs-neutral-canvas.

Overstyr en komponent med vanlige klasser

Section titled “Overstyr en komponent med vanlige klasser”

Komponentene ligger i @layer fristil, og utility-klassene kommer etter. En Tailwind-klasse vinner derfor over komponentens egen verdi, uten !important og uten å slå spesifisitet:

Knappen beholder farger, fokusmarkering og deaktivert tilstand. Du endrer bare det du peker på.

Bygg dine egne flater med Fristils verdier

Section titled “Bygg dine egne flater med Fristils verdier”

Alt temaet legger til heter fs-, som klassene ellers i systemet. Da vet du alltid hvilke verdier som er Fristils, og Tailwinds egne er urørt: bg-neutral-100 betyr fortsatt det samme.

Eksempelet over er ikke tegnet av. Det kompileres av en ekte Tailwind når dokumentasjonen bygges, av nøyaktig den markupen som står i kodefanen.

Hva temaet gir deg

Section titled “Hva temaet gir deg”

Fargene følger matrisen: hver celle blir en klasse, og navnet er <verktøy>-fs-<familie>-<rolle>.

KlasserVerdi
bg-fs-accent-fill, text-fs-accent-contentFylt flate, og teksten oppå den
text-fs-accent-text, bg-fs-accent-surfaceLenker, og en tonet aksentflate
border-fs-neutral-border, border-fs-neutral-border-subtleKanter og streker
bg-fs-neutral-canvas, text-fs-neutral-text-strong, text-fs-neutral-text-subtleSiden, brødteksten og dempet tekst
bg-fs-success-surface, text-fs-success-textStatus. Det samme for warning, danger og visited
bg-fs-brand1-surfaceMerkefargene, når betydningen ikke finnes ennå
text-fs-xxs til text-fs-megaTekststørrelser
max-w-fs-aside, max-w-fs-wide-contentBredder for sideoppsett
shadow-fs-overlaySkyggen under flater som ligger over siden

Alle peker på tokens, så de snur med temaet. bg-fs-neutral-canvas er hvit i lyst tema og nesten sort i mørkt, uten at du skriver dark:.

Avstandene er de samme

Section titled “Avstandene er de samme”

Tailwind regner p-4 som calc(var(--spacing) * 4), og temaet setter --spacing til --fs-spacing-1. p-4 er dermed nøyaktig --fs-spacing-4, den samme verdien komponentene bruker. Endrer du skalaen, følger både komponentene og Tailwind-klassene med:

:root {
  --fs-spacing-1: 0.3rem;
}

Brekkpunktene er med vilje utelatt fra temaet. Fristils sm til 2xl har allerede Tailwinds verdier, så md: virker som før.

Lagrekkefølgen

Section titled “Lagrekkefølgen”

Lagene teller i den rekkefølgen de først blir nevnt, og det siste vinner uansett spesifisitet. Derfor står rekkefølgen på første linje:

RekkefølgeHva som skjer
fristil før basePreflight nullstiller komponentene. Knappen mister bakgrunnen.
fristil etter utilitiesKomponentene slår klassene dine. p-6 gjør ingenting.
base, fristil, utilitiesBegge deler virker

Begge feiltilfellene er testet i tilpasning.browser.test.ts, som bygger dem i hvert sitt dokument og leser av hva knappen faktisk får. Dokumentasjonssiden du leser nå er satt opp på samme måte.

Tre ting som er greie å vite

Section titled “Tre ting som er greie å vite”

Ingen komponent bruker shadow DOM. Alt står i vanlig DOM, så utility-klasser og din egen CSS når fram overalt.

@apply virker, men trengs sjelden. Skal du samle en gjentakelse, er en vanlig klasse i din egen CSS enklere å lese, og den kan bruke var(--fs-color-…) direkte.

Preflight er Tailwinds valg, ikke vårt. Fristils komponenter nullstiller det de trenger selv, blant annet box-sizing, så de virker like godt uten Preflight som med.

Uten Tailwind

Section titled “Uten Tailwind”

Ingenting av dette er påkrevd. var(--fs-color-accent-fill) og class="fs-button" virker like godt i ren CSS, og i alle andre verktøy som skriver CSS. Se Tilpasning.