主页 / user-2183687

Jadam's questions

Martin Hope
Jadam
Asked: 2025-03-06 07:25:50 +0800 CST
  • 6

我没有看到大多数 tailwind v4 @theme 样式出现在故事​​书样式表中。

/.storybook/preview.ts

import type { Preview } from '@storybook/react'
import '../ui/src/styles/index.css'

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  tags: ['autodocs'],
}

export default preview

/ui/src/styles/index.css

@import 'tailwindcss';

@theme {
  --color-text-disabled: oklch(0.708 0 0);
  --color-text-muted: oklch(0.556 0 0);
  --color-text-default: oklch(0.439 0 0);
  --color-text-emphasis: oklch(0.371 0 0);
  --color-text-header: oklch(0.205 0 0);
  --color-text-link: oklch(0.205 0 0);

  --color-brand: oklch(0.4616 0.0757 170.11);
  --color-priority: oklch(0.7226 0.1352 50.08);
  --color-danger: oklch(0.5796 0.2219 19.61);

  --color-neutral-0: oklch(1 0 0);
  --color-neutral-25: oklch(0.9782 0.0035 39.48);
  --color-neutral-50: oklch(0.985 0 0);
  --color-neutral-100: oklch(0.97 0 0);
  --color-neutral-200: oklch(0.922 0 0);
  --color-neutral-300: oklch(0.87 0 0);
  --color-neutral-400: oklch(0.708 0 0);
  --color-neutral-500: oklch(0.556 0 0);
  --color-neutral-600: oklch(0.439 0 0);
  --color-neutral-700: oklch(0.371 0 0);
  --color-neutral-800: oklch(0.269 0 0);
  --color-neutral-900: oklch(0.205 0 0);


  /* lots of other color vars... */
}

浏览器中的样式表

<style type="text/css" data-vite-dev-id="/Users/johnlichty/code/heard-app/ui/src/styles/index.css">/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-neutral-50: oklch(0.985 0 0);
    --color-neutral-100: oklch(0.97 0 0);
    --color-neutral-200: oklch(0.922 0 0);
    --color-neutral-700: oklch(0.371 0 0);
    --color-neutral-900: oklch(0.205 0 0);
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-medium: 500;
    --radius-md: 0.375rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-font-feature-settings: var(--font-sans--font-feature-settings);
    --default-font-variation-settings: var(
      --font-sans--font-variation-settings
    );
    --default-mono-font-family: var(--font-mono);
    --default-mono-font-feature-settings: var(
      --font-mono--font-feature-settings
    );
    --default-mono-font-variation-settings: var(
      --font-mono--font-variation-settings
    );
    --color-danger: oklch(0.5796 0.2219 19.61);
    --color-neutral-0: oklch(1 0 0);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var( --default-font-variation-settings, normal );
    -webkit-tap-highlight-color: transparent;
  }

  ...

所以看起来有几个进去了，但我几乎定义了 100 个，更不用说还没有显示的自定义字体了。

如果我添加类似的东西：

html {
  background-color: pink;
}

背景变成粉红色，我看到样式表中的样式。

tailwind-css