CODEWITHSUNDEEP
tailwind-cssstorybooktailwind-css-4
Jadam
Jadam

Reputation: 1787

Tailwind v4 @theme styles not showing up in storybook stylesheet

I'm not seeing most of my tailwind v4 @theme styles show up in storybook stylesheet.

/.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 sheet in the browser

<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;
  }

  ...

So looks like a few got in, but I almost 100 defined, not to mention the custom fonts that also don't show up.

If I add something like:

html {
  background-color: pink;
}

the background turns pink and I see the styles in the stylesheet.

Upvotes: 1

Views: 50

Answers (1)

rozsazoltan
rozsazoltan

Reputation: 9073

Storybook with TailwindCSS v4

Navigating to the TailwindCSS installation section in the Storybook documentation quickly reveals that - although no version number is mentioned - it only supports v3. There is no official installation guide for v4 yet.

Some related content:

Color names

First of all, I'd like to point out that when declaring colors, it's not ideal to include the usage context in the color name itself.

For example, in --color-text-muted, the name implies that this color is specifically for text, but you set text color using the text-{color} class. This results in something like text-text-muted, which feels a bit odd.

Why shouldn't the muted color be used for backgrounds as well? In that case, it would look like bg-text-muted, which is also strange.

Instead, simply name the color --color-muted. That way, using it as text-muted or bg-muted makes it much more readable and intuitive.

Source

Starting from TailwindCSS v4, automatic source detection eliminates the need to manually specify the file paths where you use TailwindCSS classes. However, if you use these classes in a file that is excluded due to a .gitignore rule, you must explicitly add it using the @source directive with relative path.

@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... */
}

Right now, if you use the text-muted, bg-disabled, and border-default classes, all three colors will be included in the compiled CSS because they have been used at least once.

Include variable without using

Colors declared in @theme will only be included in the compiled CSS if they are used at least once. If you want them to be available even without usage, use the @theme inline function.

@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... */
}

Right now, all declared colors are included in the compiled CSS regardless of whether they are used or not.

Use native CSS variables

If you need this for something other than TailwindCSS classes, why not simply declare native CSS variables?

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

Right now, the variables declared in :root are not tied to TailwindCSS classes; they are just available for you or your dependencies to use.

Upvotes: 1

Related Questions