主页 / coding / 问题 / 79487904
Accepted
Jadam
Asked: 2025-03-06 07:25:50 +0800 CST

Tailwind v4 @theme 样式未显示在故事书样式表中

  • 772

我没有看到大多数 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

1 个回答

  1. Best Answer

    使用 TailwindCSS v4 的故事书

    导航到 Storybook 文档中的 TailwindCSS 安装部分，很快就会发现 - 虽然没有提到版本号 - 它仅支持 v3。目前还没有 v4 的官方安装指南。

    一些相关内容：

    颜色名称

    首先，我想指出的是，在声明颜色时，在颜色名称本身中包含使用上下文并不理想。

    例如，在 中--color-text-muted，名称暗示此颜色专用于文本，但您使用text-{color}类设置文本颜色。这会导致类似 的结果text-text-muted，感觉有点奇怪。

    为什么背景不能用柔和的颜色呢？那样的话，看起来会像bg-text-muted，这也很奇怪。

    相反，只需将颜色命名为 即可--color-muted。这样，将其用作text-muted或bg-muted可以使其更具可读性和直观性。

    来源

    从 TailwindCSS v4 开始，自动源检测消除了手动指定使用 TailwindCSS 类的文件路径的需要。但是，如果您在由于.gitignore规则而被排除的文件中使用这些类，则必须使用@source带有相对路径的指令明确添加它。

    @import "tailwindcss";

@source "../node_modules/@my-company/ui-lib";

@theme inline {
  --color-disabled: oklch(0.708 0 0);
  --color-muted: oklch(0.556 0 0);
  --color-default: oklch(0.439 0 0);
  /* lots of other color vars... */
}

    现在，如果您使用text-muted、bg-disabled和border-default类，所有三种颜色都将包含在编译的 CSS 中，因为它们至少被使用过一次。

    包含变量而不使用

    中声明的颜色@theme仅当至少使用一次时才会包含在编译的 CSS 中。如果您希望即使不使用它们也可以使用，请使用该@theme inline函数。

    @import "tailwindcss";

@theme inline {
  --color-disabled: oklch(0.708 0 0);
  --color-muted: oklch(0.556 0 0);
  --color-default: oklch(0.439 0 0);
  --color-emphasis: oklch(0.371 0 0);
  --color-header: oklch(0.205 0 0);
  --color-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... */
}

    现在，所有声明的颜色都包含在编译的 CSS 中，无论是否使用。

    使用原生 CSS 变量

    如果您需要将其用于 TailwindCSS 类以外的其他内容，为什么不简单地声明本机 CSS 变量呢？

    @import 'tailwindcss';

@theme {
  --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);
}

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

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

    现在，声明的变量:root与 TailwindCSS 类无关；它们仅供您或您的依赖项使用。

    • 1

相关问题