feat(tailwind): add tailwind v4 config

Skulle behöva feedback från de som faktiskt jobbar med Tailwind. Har testat det jag förstår mig på 😄 men kan lätt ha missat något som man förväntar i Tailwind-sammanhang. Nuvarande output är:

/**
 * Do not edit directly, this file was auto-generated.
 */

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@theme inline {
  --color-*: initial;
  --color-brand-primary-strong: var(--sds-color-brand-primary-strong);
  --color-brand-primary-subtle: var(--sds-color-brand-primary-subtle);
  --color-brand-accent-strong: var(--sds-color-brand-accent-strong);
  --color-brand-accent-subtle: var(--sds-color-brand-accent-subtle);
  --color-brand-neutral-strong: var(--sds-color-brand-neutral-strong);
  --color-brand-neutral-subtle: var(--sds-color-brand-neutral-subtle);
  --color-interaction-primary-strong-default: var(--sds-color-interaction-primary-strong-default);
  --color-interaction-primary-strong-highlight: var(--sds-color-interaction-primary-strong-highlight);
  --color-interaction-primary-strong-pressed: var(--sds-color-interaction-primary-strong-pressed);
  --color-interaction-primary-subtle-default: var(--sds-color-interaction-primary-subtle-default);
  --color-interaction-primary-subtle-highlight: var(--sds-color-interaction-primary-subtle-highlight);
  --color-interaction-primary-subtle-pressed: var(--sds-color-interaction-primary-subtle-pressed);
  --color-interaction-primary-transparent-default: var(--sds-color-interaction-primary-transparent-default);
  --color-interaction-primary-transparent-highlight: var(--sds-color-interaction-primary-transparent-highlight);
  --color-interaction-primary-transparent-pressed: var(--sds-color-interaction-primary-transparent-pressed);
  --color-interaction-neutral-strong-default: var(--sds-color-interaction-neutral-strong-default);
  --color-interaction-neutral-strong-highlight: var(--sds-color-interaction-neutral-strong-highlight);
  --color-interaction-neutral-strong-pressed: var(--sds-color-interaction-neutral-strong-pressed);
  --color-interaction-neutral-subtle-default: var(--sds-color-interaction-neutral-subtle-default);
  --color-interaction-neutral-subtle-highlight: var(--sds-color-interaction-neutral-subtle-highlight);
  --color-interaction-neutral-subtle-pressed: var(--sds-color-interaction-neutral-subtle-pressed);
  --color-interaction-neutral-transparent-default: var(--sds-color-interaction-neutral-transparent-default);
  --color-interaction-neutral-transparent-highlight: var(--sds-color-interaction-neutral-transparent-highlight);
  --color-interaction-neutral-transparent-pressed: var(--sds-color-interaction-neutral-transparent-pressed);
  --color-interaction-danger-strong-default: var(--sds-color-interaction-danger-strong-default);
  --color-interaction-danger-strong-highlight: var(--sds-color-interaction-danger-strong-highlight);
  --color-interaction-danger-strong-pressed: var(--sds-color-interaction-danger-strong-pressed);
  --color-layout-page-default: var(--sds-color-layout-page-default);
  --color-layout-page-overlay: var(--sds-color-layout-page-overlay);
  --color-layout-divider-strong: var(--sds-color-layout-divider-strong);
  --color-layout-divider-subtle: var(--sds-color-layout-divider-subtle);
  --color-layout-focus-border: var(--sds-color-layout-focus-border);
  --color-layout-background-default: var(--sds-color-layout-background-default);
  --color-layout-background-primary: var(--sds-color-layout-background-primary);
  --color-layout-background-neutral: var(--sds-color-layout-background-neutral);
  --color-layout-background-info: var(--sds-color-layout-background-info);
  --color-layout-background-success: var(--sds-color-layout-background-success);
  --color-layout-background-warning: var(--sds-color-layout-background-warning);
  --color-layout-background-critical: var(--sds-color-layout-background-critical);
  --color-shadow-elevated-default: var(--sds-color-shadow-elevated-default);
  --color-shadow-elevated-hover: var(--sds-color-shadow-elevated-hover);
  --color-support-info-strong: var(--sds-color-support-info-strong);
  --color-support-info-subtle: var(--sds-color-support-info-subtle);
  --color-support-success-strong: var(--sds-color-support-success-strong);
  --color-support-success-subtle: var(--sds-color-support-success-subtle);
  --color-support-warning-default: var(--sds-color-support-warning-default);
  --color-support-warning-subtle: var(--sds-color-support-warning-subtle);
  --color-support-critical-strong: var(--sds-color-support-critical-strong);
  --color-support-critical-subtle: var(--sds-color-support-critical-subtle);
  --color-text-primary: var(--sds-color-text-primary);
  --color-text-on-strong: var(--sds-color-text-on-strong);
  --color-text-secondary: var(--sds-color-text-secondary);
  --color-text-critical: var(--sds-color-text-critical);

  --font-*: initial;
  --font-sans: Haffer, Arial, sans-serif;
  --font-mono: monospace;

  --text-*: initial;
  --text-body-small: var(--sds-typography-body-fontsize-small);
  --text-body-regular: var(--sds-typography-body-fontsize-regular);
  --text-body-large: var(--sds-typography-body-fontsize-large);
  --text-body-lead: var(--sds-typography-body-fontsize-lead);
  --text-heading-overline: var(--sds-typography-heading-fontsize-overline);
  --text-heading-paragraph: var(--sds-typography-heading-fontsize-paragraph);
  --text-heading-small: var(--sds-typography-heading-fontsize-small);
  --text-heading-medium: var(--sds-typography-heading-fontsize-medium);
  --text-heading-large: var(--sds-typography-heading-fontsize-large);
  --text-heading-xlarge: var(--sds-typography-heading-fontsize-xlarge);
  --text-heading-huge: var(--sds-typography-heading-fontsize-huge);
  --text-body-small--line-height: var(--sds-typography-body-lineheight-small);
  --text-body-regular--line-height: var(--sds-typography-body-lineheight-regular);
  --text-body-large--line-height: var(--sds-typography-body-lineheight-large);
  --text-body-lead--line-height: var(--sds-typography-body-lineheight-lead);
  --text-heading-overline--line-height: var(--sds-typography-heading-lineheight-overline);
  --text-heading-paragraph--line-height: var(--sds-typography-heading-lineheight-paragraph);
  --text-heading-small--line-height: var(--sds-typography-heading-lineheight-small);
  --text-heading-medium--line-height: var(--sds-typography-heading-lineheight-medium);
  --text-heading-large--line-height: var(--sds-typography-heading-lineheight-large);
  --text-heading-xlarge--line-height: var(--sds-typography-heading-lineheight-xlarge);
  --text-heading-huge--line-height: var(--sds-typography-heading-lineheight-huge);

  --font-weight-*: initial;
  --font-weight-regular: var(--sds-typography-weight-regular);
  --font-weight-bold: var(--sds-typography-weight-bold);

  --breakpoint-*: initial;
  --breakpoint-tablet: 720px;
  --breakpoint-desktop: 1024px;
  --breakpoint-ultrawide: 1440px;

  --spacing-*: initial;

  --radius-*: initial;
  --radius-minimal: var(--sds-space-border-radius-minimal);
  --radius-small: var(--sds-space-border-radius-small);
  --radius-medium: var(--sds-space-border-radius-medium);
  --radius-large: var(--sds-space-border-radius-large);
  --radius-full: var(--sds-space-border-radius-full);
}

Och förväntad användning är tillsammans med @sikt/sds-core & tailwindcss@^4.0.0:

@import url("@sikt/sds-core");
@import url("@sikt/sds-tokens/dist/tailwind/config.css");

<button class="text-brand-primary-strong desktop:p-(--sds-space-padding-small)">Hello, World!</button>

Val som är gjorda men öppen för debatt:

• Tailwind preflight (CSS reset) är borttagen, och använder istället @sikt/sds-core
• Där det finns SDS tokens har motsvarande för Tailwind disable:ats, feks --color-*: initial; som då tar bort allt av Tailwind theme colors
• Spacing i Tailwind är en uträknad skala baserat på ett värde, här måste vi istället använda existerande CSS variabler p-(--sds-space-padding-small)istället för p-4 (spacing*4)