Hoppa till huvudinnehåll

Tailwind CSS

Midas theme-paket kan integreras med Tailwind CSS för att använda designsystemets tokens direkt i dina utility classes. Paketet exporterar CSS-variabler som kan användas både i Tailwind v4 och v3.

Tailwind v4 (rekommenderat)​

Midas designsystemets tokens används med Tailwind v4 genom CSS-variabler och Tailwinds arbitrary values.

Installation​

Installera Tailwind CSS v4:

npm install tailwindcss @tailwindcss/vite

Setup​

VIKTIGT: Importera CSS-filerna i rätt ordning:

main.tsx
import '@midas-ds/theme/color-scheme.css' // Krävs för light/dark mode
import '@midas-ds/theme/variables.css'
import '@midas-ds/theme/fonts.css'

Importera Midas Tailwind-tema och Tailwind i din CSS-fil:

index.css
@import "tailwindcss";
@import "@midas-ds/theme/tailwind-theme.css";
  • color-scheme.css innehåller color-scheme: light dark som krävs för att Midas semantiska färger med light-dark() ska fungera korrekt vid tema-växling.
  • tailwind-theme.css innehåller färgpaletten (blue-100, gray-200, etc.) som Tailwind utilities. Detta gör att färgerna fungerar direkt utan arbitrary values.

Användning​

Semantiska tokens (huvudsaklig användning):

Använd Midas semantiska tokens med arbitrary values:

<div className="bg-[var(--midas-background-base)] text-[var(--midas-text-primary)] p-[var(--midas-spacing-50)]">
  <div className="text-[length:var(--midas-typography-font-size-80)] mb-[var(--midas-spacing-40)]">
    Stor text
  </div>
  <div className="text-[var(--midas-text-secondary)] mb-[var(--midas-spacing-30)]">
    Mindre text med semantiska tokens
  </div>
  <div className="bg-[var(--midas-layer-01-base)] p-[var(--midas-spacing-40)] border-[var(--midas-border-color-primary)]">
    Innehåll i en nested box
  </div>
</div>

Färgpalett (fungerar direkt):

Tack vare tailwind-theme.css fungerar färger från Midas färgpalett direkt som Tailwind utilities:

<div className="bg-blue-100 text-gray-200 border-2 border-blue-130">
  <div className="text-signal-red-100">Färgerna från paletten fungerar direkt</div>
</div>
Sammanfattning
  • Semantiska tokens (background-base, text-primary, spacing-50, etc.): Använd [var(--midas-*)]
  • Färgpalett (blue-100, gray-140, signal-red-100, etc.): Fungerar direkt som bg-blue-100

Anpassa med @theme (valfritt)​

Om du vill skapa egna kortare utility-namn kan du definiera ett @theme-block:

app.css
@import "@midas-ds/theme/tailwind-theme.css";

@theme {
  /* Egna namn för tokens */
  --color-primary: var(--midas-color-blue-100);
  --color-bg: var(--midas-background-base);
  --spacing-sm: var(--midas-spacing-30);
  --spacing-md: var(--midas-spacing-50);
}
<div className="bg-bg text-primary p-md">
  Element med kortare namn
</div>

Tailwind v3​

För projekt som använder Tailwind v3 kan du importera variablerna och använda dem via arbitrary values.

Importera variabler​

Importera Midas CSS-variabler i din huvudsakliga CSS-fil:

app.css
@import "@midas-ds/theme/variables.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Användning med anpassade värden​

Använd Tailwinds arbitrary values syntax med hakparenteser för att referera till Midas CSS-variabler:

<div className="bg-[var(--midas-background-base)] text-[var(--midas-text-primary)]">
  <div className="text-[length:var(--midas-typography-font-size-80)]">Stor text</div>
  <div className="mt-[var(--midas-spacing-50)]">Text som använder Midas tokens</div>
</div>

För de flesta utilities räcker det med bg-[var(--variable)]. Om Tailwind inte kan avgöra vilken typ av värde det är (t.ex. om text- skulle kunna vara både font-size och color) kan du lägga till en typbeskrivning: text-[color:var(--variable)] eller text-[length:var(--variable)].

Utöka Tailwind config (alternativ)​

För att slippa använda anpassade värden kan du utöka Tailwinds konfiguration med Midas tokens:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        'midas-blue': 'var(--midas-color-blue-100)',
        'midas-primary': 'var(--midas-text-primary)',
        'midas-bg-base': 'var(--midas-background-base)',
      },
      spacing: {
        'midas-20': 'var(--midas-spacing-20)',
        'midas-30': 'var(--midas-spacing-30)',
        'midas-50': 'var(--midas-spacing-50)',
        'midas-70': 'var(--midas-spacing-70)',
        'midas-100': 'var(--midas-spacing-100)',
      },
    },
  },
  plugins: [],
}
<div className="bg-midas-bg-base text-midas-primary">
  <div className="mt-midas-50">Text med förkonfigurerade Tailwind classes</div>
</div>

Använd TypeScript/JavaScript tokens​

Utöver CSS-variabler exporterar theme-paketet också tokens som TypeScript/JavaScript-objekt. Detta är användbart när du behöver tokens i din JavaScript-kod, till exempel för dynamisk styling eller beräkningar.

Importera tokens​

import { variables } from '@midas-ds/theme'

Användning​

export function Card() {
  return (
    <div
      style={{
        backgroundColor: variables.backgroundBase,
        color: variables.textPrimary,
        padding: variables.spacing50,
      }}
    >
      <p>Kort med Midas styling</p>
    </div>
  )
}

Kombinera med Tailwind​

Du kan även kombinera JavaScript tokens med Tailwind classes:

import { variables } from '@midas-ds/theme'

export function Alert() {
  return (
    <div
      className="p-[var(--midas-spacing-40)]"
      style={{
        backgroundColor: variables.colorSignalRed10,
        borderLeft: `4px solid ${variables.colorSignalRed100}`
      }}
    >
      <div className="text-[color:var(--midas-color-signal-red-150)]">
        Detta är en varning
      </div>
    </div>
  )
}

Mörkt läge​

Midas CSS-variabler stödjer automatiskt mörkt läge via light-dark() funktionen. För mer information om hur mörkt läge fungerar, se Dark Mode dokumentationen.

// Denna komponent anpassar sig automatiskt till ljust/mörkt läge

// Tailwind v4
<div className="bg-(--midas-background-base) text-(--midas-text-primary)">
  Text som ändrar färg baserat på färgschema
</div>

// Tailwind v3
<div className="bg-[var(--midas-background-base)] text-[var(--midas-text-primary)]">
  Text som ändrar färg baserat på färgschema
</div>

Tillgängliga tokens​

Midas theme-paketet innehåller tokens för:

  • Färger - --midas-color-* (blue, gray, signal-red, signal-green, etc.)
  • Semantiska färger - --midas-background-*, --midas-text-*, --midas-icon-*, --midas-border-color-*
  • Spacing - --midas-spacing-10 till --midas-spacing-120 (0.125rem till 6rem)
  • Storlekar - --midas-size-10 till --midas-size-150 (0.125rem till 3rem)
  • Typografi - --midas-typography-font-size-*, --midas-typography-line-height-*, --midas-typography-weight-*
  • Z-index - --midas-z-index-base, --midas-z-index-modal, --midas-z-index-toast
  • Breakpoints - --midas-window-sizes-sm/md/lg/xl (480px, 768px, 1024px, 1280px)
  • Transitions - --midas-transition-duration-*, --midas-transition-timing-*

För en fullständig lista över tillgängliga tokens, se @midas-ds/theme på npm eller utforska variables.css filen i paketet.

Resurser​