Font not being honoured in 0.6.3

[noozo]

I have a button component where i declare the font to be jakarta. Works properly in main site, but falls back to something else when used in stories:

[noozo]

Even tried forcing something like this in storybook.css with same result:

.psb .psb-sandbox {
  @apply font-jakarta !important;
  -webkit-font-smoothing: auto !important;
}

[noozo]

Might be related, also noticing that box or drop shadows also don't show up

[noozo]

Sidenote: i'm using daisyui as well.

[aidalgol]

I was having this problem, too, but only after I removed the important: ".my-app-web", line from tailwind.config.js, which I did because it was interfering with styling in my actual web app (everything not under the /storybook route). I solved this by having a separate tailwind config file just for storybook, which adds just that line.

// Tailwind configuration for PhoenixStorybook

const baseConfig = require("./tailwind.config.js")

module.exports = {
  important: ".my-app-web",
  ...baseConfig
}

I think this is more of a documentation bug in the setup instructions. I may submit a PR for the setup guide (the markdown file and the instructions printed to the terminal when running the mix generator) at some point once I am more familiar with PhoenixStorybook.

[cblavier]

Have you already tried the suggestions from this guide?

You may need to apply your font as such in your storybook.css

@layer utilities {
  /* this style will be generated as .my-app-sandbox * { ... } */
  * {
     @apply font-jakarta;
     -webkit-font-smoothing: auto;
  }
}

[noozo]

none of these solutions work for me. it still applies the storybook default font :(

[noozo]

I setup the storybook.css file as such:

/* This is your custom storybook stylesheet. */
@import "./app";

@layer utilities {
   {
     @apply font-jakarta;
     -webkit-font-smoothing: auto;
  }
}

But still no joy.

[noozo]

I added the import of the main app.css file because if i don't then i lose all styling (which is something i don't find in the documentation, btw, and the generator creates an empty storybook.css file.

[cblavier]

if you spin up a repository reproducing your issue, I can have a look 👀

[noozo]

Unfortunately i don't really have the time to do that. I can post the contents of the most important files, if that helps:

storybook.ex

defmodule PassionFruitWeb.Storybook do
  @moduledoc false
  use PhoenixStorybook,
    otp_app: :passion_fruit_web,
    content_path: Path.expand("../../storybook", __DIR__),
    # assets path are remote path, not local file-system paths
    css_path: "/assets/storybook.css",
    js_path: "/assets/js/storybook.js",
    sandbox_class: "passion-fruit-web"
end

storybook.css

/* This is your custom storybook stylesheet. */
@import "./app";

@layer utilities {
  body {
    @apply font-jakarta;
    -webkit-font-smoothing: auto;
  }
}

config.exs

config :esbuild,
  version: "0.17.11",
  default: [
    args: ~w(
        js/app.js
        js/storybook.js
        vendor/fonts/Recoleta/recoleta.css
        vendor/fonts/PlusJakartaSans/jakarta.css
        vendor/fonts/Caveat/caveat.css
        --bundle
        --loader:.woff2=file
        --loader:.woff=file
        --target=es2017
        --outdir=../priv/static/assets
        --external:/fonts/*
        --external:/images/*
    ),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

# Configure tailwind (the version is required)
config :tailwind,
  version: "3.4.10",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
      --postcss
    ),
    cd: Path.expand("../assets", __DIR__)
  ],
  storybook: [
    args: ~w(
      --config=tailwind.storybook.config.js
      --input=css/storybook.css
      --output=../priv/static/assets/storybook.css
      --postcss
    ),
    cd: Path.expand("../assets", __DIR__)
  ]

tailwind.storybook.config.js

const baseConfig = require("./tailwind.config.js");

module.exports = {
  important: ".passion-fruit-web",
  ...baseConfig,
};

tailwind.config.js

const plugin = require("tailwindcss/plugin");
const fs = require("fs");
const path = require("path");

// https://tailwindcss.com/docs/configuration
module.exports = {
  content: ["./js/**/*.js", "./css/**/*.css", "../lib/*_web.ex", "../lib/*_web/**/*.*ex", "../../../config/*.*exs"],
  plugins: [
    require("@tailwindcss/typography"),
    require("tailwindcss-animate"),
    // require("@tailwindcss/forms"),
    require("daisyui"),

    // Allows prefixing tailwind classes with LiveView classes to add rules
    // only when LiveView classes are applied, for example:
    //
    //     <div class="phx-click-loading:animate-ping">
    //
    plugin(({ addVariant }) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
    plugin(({ addVariant }) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
    plugin(({ addVariant }) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),

    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          "text-shadow": (value) => ({
            textShadow: value,
          }),
        },
        { values: theme("textShadow") },
      );
    }),
  ],
  theme: {
    screens: {
      sm: "320px",
      // => @media (min-width: 320px) { ... }
      // This is mobile (figma)

      md: "768px",
      // => @media (min-width: 768px) { ... }
      // This is tablet (figma)

      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      // This is laptop (figma)

      desktop: "1280px",
      // => @media (min-width: 1280px) { ... }
      // This is desktop (figma)

      xl: "1880px",
      // => @media (min-width: 1880px) { ... }
      // This is large desktop (figma)
    },
    extend: {
      width: {
        // The commented sizes are part of TailwindCSS
        // and are only here for reference
        // w-0  width: 0px;
        // w-px width: 1px;
        // w-0.5    width: 0.125rem; /* 2px */
        // w-1  width: 0.25rem; /* 4px */
        // w-1.5    width: 0.375rem; /* 6px */
        // w-2  width: 0.5rem; /* 8px */
        // w-2.5    width: 0.625rem; /* 10px */
        // w-3  width: 0.75rem; /* 12px */
        // w-3.5    width: 0.875rem; /* 14px */
        // w-4  width: 1rem; /* 16px */
        // w-5  width: 1.25rem; /* 20px */
        // w-6  width: 1.5rem; /* 24px */
        // w-7  width: 1.75rem; /* 28px */
        // w-8  width: 2rem; /* 32px */
        // w-9  width: 2.25rem; /* 36px */
        // w-10 width: 2.5rem; /* 40px */
        // w-11 width: 2.75rem; /* 44px */
        // w-12 width: 3rem; /* 48px */
        // w-14 width: 3.5rem; /* 56px */
        // w-16 width: 4rem; /* 64px */
        18: "4.5rem" /* 72px */,
        20: "5rem" /* 80px */,
        21.25: "5.313rem" /* 85px */,
        22: "5.5rem" /* 88px */,
        22.5: "5.625rem" /* 90px */,
        // w-24 width: 6rem; /* 96px */
        28: "6.75rem" /* 108px */,
        // w-28 width: 7rem; /* 112px */
        30: "7.5rem" /* 120px */,
        31: "7.75rem" /* 124px */,
        // w-32 width: 8rem; /* 128px */
        34: "8.5rem" /* 136px */,
        35: "8.75rem" /* 140px */,
        35.5: "8.875rem" /* 142px */,
        // w-36 width: 9rem; /* 144px */
        39.5: "9.875rem" /* 158px */,
        // w-40 width: 10rem; /* 160px */
        42: "10.5rem" /* 168px */,
        43: "10.75rem" /* 172px */,
        // w-44 width: 11rem; /* 176px */
        45: "11.25rem" /* 180px */,
        // w-48 width: 12rem; /* 192px */
        50: "12.5rem" /* 200px */,
        // w-52 width: 13rem; /* 208px */
        56: "14rem" /* 224px */,
        58: "14.5rem" /* 232px */,
        59: "14.75rem" /* 236px */,
        60: "14.938rem" /* 239px */,
        // w-60 width: 15rem; /* 240px */
        // w-64 width: 16rem; /* 256px */
        // w-72 width: 18rem; /* 288px */
        74: "18.5rem" /* 296 px */,
        76: "19rem" /* 304px */,
        // w-80 width: 20rem; /* 320px */
        83: "20.5rem" /* 328 px */,
        84: "21rem" /* 336px */,
        85: "21.25rem" /* 340px */,
        85.75: "21.438rem" /* 343px */,
        88: "22rem" /* 352px */,
        90: "22.5rem" /* 360 px */,
        91.5: "22.875rem" /* 366px */,
        92: "23rem" /* 368px */,
        96: "24rem" /* 384px */,
        100: "25rem" /* 400px */,
        101.5: "25.375rem" /* 406px */,
        105: "26.25rem" /* 420px */,
        111: "27.75rem" /* 444px */,
        117: "29.25rem" /* 468px */,
        120: "30rem" /* 480px */,
        126: "31.5rem" /* 504px */,
        128: "32rem" /* 512px */,
        130.5: "32.625rem" /* 522px */,
        136: "34rem" /* 544px */,
        144: "36rem" /* 576px */,
        145: "36.25rem" /* 580px */,
        145.5: "36.375rem" /* 582px */,
        149: "37.25rem" /* 596px */,
        150: "37.5rem" /* 600px */,
        168: "42rem" /* 672px */,
        170: "42.5rem" /* 680px */,
        174: "43.5rem" /* 696px */,
        175: "43.625rem" /* 698px */,
        184: "46rem" /* 736px */,
        188: "47rem" /* 752px */,
        192: "48rem" /* 768px */,
        196: "49rem" /* 784px */,
        205: "51.25rem" /* 820px */,
        210: "52.5rem" /* 840px */,
        212: "53rem" /* 848px */,
        214: "53.5rem" /* 856px */,
        215.75: "53.938rem" /* 863px */,
        226: "56.5rem" /* 904px */,
        228: "57rem" /* 912px */,
        256: "64rem" /* 1024px */,
        258: "64.5rem" /* 1032px */,
        276: "69rem" /* 1104px */,
        281: "69.438rem" /* 1111px */,
        300: "75rem" /* 1200px */,
        320: "80rem" /* 1280px */,
        360: "90rem" /* 1440px */,
        480: "120rem" /* 1920px */,
      },
      maxWidth: {
        16: "4rem" /* 64px */,
        20: "5rem" /* 80px */,
        108: "27rem" /* 432 px */,
        136: "34rem" /* 544 px */,
        140: "35rem" /* 560px */,
        140.5: "35.125rem" /* 562px */,
        149: "37.25rem" /* 596px */,
        160: "40rem" /* 640px */,
        258: "64.5rem" /* 1032px */,
      },
      minWidth: {
        40: "10rem" /* 160px */,
        60: "15rem" /* 240px */,
        160: "40rem" /* 640px */,
      },
      minHeight: {
        37.5: "9.375rem" /* 150px */,
        80: "20rem" /* 320px */,
        102: "25.5rem" /* 408px */,
      },
      height: {
        8.5: "2.125rem" /* 34px */,
        18: "4.5rem" /* 72px */,
        18.5: "4.625rem" /* 74px */,
        25: "6.25rem" /* 100px */,
        28: "7rem" /* 112px */,
        30: "7.5rem" /* 120px */,
        33: "8.438rem" /* 135px */,
        34: "8.5rem" /* 136px */,
        41: "10.438rem" /* 167px */,
        48: "11.938rem" /* 191px */,
        55: "13.75rem" /* 220px */,
        58: "14.5rem" /* 232px */,
        84.5: "21.125rem" /* 338px */,
        89.5: "22.375rem" /* 358px */,
        96: "24rem" /* 384px */,
        104: "26rem" /* 416px */,
        120: "30rem" /* 480px */,
        128: "32rem" /* 512px */,
        144: "36rem" /* 576px */,
      },
      padding: {
        t: {
          30: "7.5rem" /* 120px */,
        },
        b: {
          30: "7.5rem" /* 120px */,
        },
      },
      margin: {
        68: "17rem" /* 272px */,
        76: "19rem" /* 304px */,
        92: "23rem" /* 368px */,
        t: {
          30: "7.5rem" /* 120px */,
        },
        b: {
          30: "7.5rem" /* 120px */,
        },
      },
      colors: {
        google: "#2E80E2",
        hover: "#8B408A",
        click: "#6C336A",
        light: "#ffffff",
        100: "#F7F6F3",
        successful: "#1C9C4D",
        "successful-hover": "#29BE62",
        "successful-secondary": "#B1F1CA",
        "successful-tertiary": "#DDFBE7",
        attention: "#F6D523",
        "attention-hover": "#FAA747",
        "attention-secondary": "#FEF1DC",
        "attention-tertiary": "#FEF7EB",
        error: "#DE450D",
        "error-hover": "#C63D0C",
        "error-secondary": "#FBCDBC",
        "error-tertiary": "#FEEDE7",
        // Custom colors and overrides
        "yellow-grey": {
          50: "#FCFBF8",
          100: "#F7F6F3",
          200: "#EFEEEB",
          300: "#DFDDD7",
          400: "#C3C0B6",
          500: "#A2A09A",
          600: "#74726D",
          700: "#46433F",
          800: "#2B2927",
          900: "#191610",
        },
        grey: {
          300: "#D9D9D9",
          900: "#101828",
        },
        purple: {
          50: "#FBF4FB",
          100: "#F8EEF9",
          200: "#F1DBF3",
          300: "#E7BFE8",
          400: "#D898DA",
          500: "#A950A9",
          600: "#8B408A",
          700: "#6C336A",
          800: "#572955",
          900: "#3C163A",
          accent: "#C92CC1",
        },
        yellow: {
          50: "#FFF9EB",
          100: "#FFF2D1",
          200: "#FFE7A3",
          300: "#FFDA85",
          400: "#FFCD57",
          500: "#FFB914",
          600: "#F99A07",
          700: "#B75006",
          800: "#7A320D",
          900: "#461902",
        },
        red: {
          50: "#FEF5F1",
          100: "#FEEDE7",
          200: "#FBCDBC",
          300: "#F79673",
          400: "#F3602B",
          500: "#DE450D",
          600: "#C63D0C",
          700: "#9F3109",
          800: "#6A2106",
          900: "#431007",
        },
        green: {
          50: "#EEFCF3",
          100: "#DDFBE7",
          200: "#B1F1CA",
          300: "#8BEAAE",
          400: "#50D884",
          500: "#29BE62",
          600: "#1C9C4D",
          700: "#1A7B3F",
          800: "#17502F",
          900: "#17502F",
        },
        blue: {
          50: "#F0F8FE",
          100: "#DDEEFC",
          200: "#C2E3FB",
          300: "#98D3F8",
          400: "#67BAF3",
          500: "#489FEE",
          600: "#2E80E2",
          700: "#1962B8",
          800: "#0D5291",
          900: "#1A2E51",
        },
        orange: {
          50: "#FEF7EB",
          100: "#FEF1DC",
          200: "#FDE0B4",
          300: "#FCC783",
          400: "#FAA747",
          500: "#F9911A",
          600: "#EA7F06",
          700: "#C2580C",
          800: "#7C3A12",
          900: "#431B07",
        },
        warning: {
          50: "#FEF5F1",
          100: "#FEEDE7",
          200: "#FBCDBC",
          300: "#F79673",
          400: "#F3602B",
          500: "#DE450D",
          600: "#C63D0C",
          700: "#9F3109",
          800: "#6A2106",
          900: "#431007",
        },
        info: {
          100: "#DDEEFC",
          600: "#2E80E2",
        },
        // TODO: gradients
      },
      // typography: {
      //   DEFAULT: {
      //     css: {
      //       margin: '0',
      //       padding: '0',
      //       h1: {
      //         'font-weight': 'bolder',
      //         'font-size': '48px'
      //       },
      //       h2: {
      //         'font-weight': 'bolder',
      //         'font-size': '40px'
      //       }
      //     }
      //   }
      // },
      boxShadow: {
        sm: "none",
        DEFAULT: "0px 0px 10px 0px rgba(132,132,132,0.15)",
        md: "0px 0px 10px 0px rgba(132,132,132,0.15)",
        lg: "0px 0px 20px 0px rgba(132,132,132,0.2)",
        xl: "0px 0px 30px 0px rgba(132,132,132,0.25)",
        "2xl": "none",
        inner: "none",
        none: "none",
        dropdown: "2px 2px 0px #171717",
        "btn-primary-active": "0px 0px 0px 4px #E7BFE8",
        "btn-secondary-active": "0px 0px 0px 4px #E7BFE8",
        "btn-neutral-active": "0px 0px 0px 4px #DFDDD7",
        "btn-accent-active": "0px 0px 0px 4px #D898DA",
        "btn-error-active": "0px 0px 0px 4px #FBCDBC",
        "project-card": "0px 0px 3px 0px rgba(0, 0, 0, 0.08), 0px 4px 12px 0px rgba(0, 0, 0, 0.06)",
        modal: "0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.12)",
        "mobile-menu": "0px 8px 20px 0px rgba(0, 0, 0, 0.12)",
        y: "0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)",
        card: "0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 6px 12px 0px rgba(0, 0, 0, 0.08)",
        "specialism-badge": "0px 4px 4px 0px rgba(0, 0, 0, 0.10)",
        "tippy-bottom-shadow": "0px 6px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.10)",
        "drawer-left-shadow": "-6px 0px 12px 0px rgba(0, 0, 0, 0.08), -1px 0px 3px 0px rgba(0, 0, 0, 0.10)",
        "more-menu-shadow": "0px 6px 12px 0px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.10)",
      },
      textShadow: {
        sm: "0 1px 2px var(--tw-shadow-color)",
        DEFAULT: "0 2px 4px var(--tw-shadow-color)",
        lg: "0 8px 16px var(--tw-shadow-color)",
      },
      fontFamily: {
        recoleta: "recoleta",
        jakarta: "PlusJakartaSans",
        caveat: "Caveat",
      },
      fontSize: {
        xxxxs: "0.563rem" /* 9px */,
        xxxs: "0.625rem" /* 10px */,
        xxs: "0.7rem" /* 11px */,
        xs: "0.75rem" /* 12px */,
        sm: "0.875rem" /* 14px */,
        base: "1rem" /* 16px */,
        lg: "1.125rem" /* 18px */,
        xl: "1.25rem" /* 20px */,
        "1.5xl": "1.375rem" /* 22px */,
        "2xl": "1.5rem" /* 24px */,
        "2.5xl": "1.75rem" /* 28px */,
        "3xl": "1.875rem" /* 30px */,
        "3.5xl": "2rem" /* 32px */,
        "4xl": "2.25rem" /* 36px */,
        "5xl": "3rem" /* 48px */,
        "7.5xl": "5rem" /* 80px */,
        "9xl": "6.25rem" /* 100px */,
        "9.5xl": "8rem" /* 128px */,
        "10xl": "9rem" /* 144px */,
      },
      rotate: {
        15: "15deg",
        100: "100deg",
      },
      transformOrigin: {
        0: "0%",
      },
      zIndex: {
        100: "100",
        200: "200",
        300: "300",
        400: "400",
        500: "500",
        999: "999",
      },
      keyframes: {
        "bounce-up": {
          "0%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(-1em)" },
          "100%": { transform: "translateY(0)" },
        },
        "bounce-down": {
          "0%": { transform: "translateY(0)" },
          "50%": { transform: "translateY(1em)" },
          "100%": { transform: "translateY(0)" },
        },
        "slide-from-top": {
          "0%": { transform: "translateY(-2em)", opacity: 0 },
          "100%": { transform: "translateY(0)", opacity: 1 },
        },
        "slide-to-top": {
          "0%": { transform: "translateY(0)", opacity: 1 },
          "100%": { transform: "translateY(-2em)", opacity: 0 },
        },
        "dropdown-show": {
          "0%": { transform: "translateY(-2em)", opacity: 0 },
          "50%": { transform: "translateY(-2em)", opacity: 0 },
          "100%": { transform: "translateY(0)", opacity: 1 },
        },
        "wave-xs": {
          "0%": { transform: "rotate(0.0deg)" },
          "25%": { transform: "rotate(1.0deg)" },
          "50%": { transform: "rotate(0.0deg)" },
          "75%": { transform: "rotate(-1.0deg)" },
          "100%": { transform: "rotate(0.0deg)" },
        },
        wave: {
          "0%": { transform: "rotate(0.0deg)" },
          "10%": { transform: "rotate(14deg)" },
          "20%": { transform: "rotate(-8deg)" },
          "30%": { transform: "rotate(14deg)" },
          "40%": { transform: "rotate(-4deg)" },
          "50%": { transform: "rotate(10.0deg)" },
          "60%": { transform: "rotate(0.0deg)" },
          "100%": { transform: "rotate(0.0deg)" },
        },
        glow: {
          "0%": { "box-shadow": "0 0 0px #FEEDE7, 0 0 0px #FEEDE7, 0 0 0px #FEEDE7, 0 0 0px #FEEDE7" },
          "25%": { "box-shadow": "0 0 1px #FEBE85, 0 0 1px #FEBE85, 0 0 1px #FEBE85, 0 0 1px #FEBE85" },
          "50%": { "box-shadow": "0 0 3px #FD9F23, 0 0 3px #FD9F23, 0 0 3px #FD9F23, 0 0 3px #FD9F23" },
          "75%": { "box-shadow": "0 0 4px #DE7916, 0 0 4px #DE7916, 0 0 4px #DE7916, 0 0 4px #DE7916" },
          "100%": { "box-shadow": "0 0 5px #DE450D, 0 0 5px #DE450D, 0 0 5px #DE450D, 0 0 5px #DE450D" },
        },
        float: {
          "0%": {
            transform: "translateY(0)",
          },
          "50%": {
            transform: "translateY(0.375em)",
          },
          "100%": {
            transform: "translateY(0)",
          },
        },
        shadow: {
          "0%": {
            "border-radius": "50%",
            height: "80px",
            background: "black",
            opacity: "0.1",
            "-webkit-filter": "blur(20px)",
            "-webkit-transform": "scale(1, 0.3)",
            "animation-timing-function": "ease-out",
          },
          "50%": {
            "border-radius": "50%",
            height: "80px",
            background: "black",
            opacity: "0.2",
            "-webkit-filter": "blur(20px)",
            "-webkit-transform": "scale(1, 0.3)",
            "animation-timing-function": "ease-in",
          },
          "100%": {
            "border-radius": "50%",
            height: "80px",
            background: "black",
            opacity: "0.1",
            "-webkit-filter": "blur(20px)",
            "-webkit-transform": "scale(1, 0.3)",
            "animation-timing-function": "ease-out",
          },
        },
        "purple-shadow": {
          "0%": {
            "border-radius": "50%",
            height: "80px",
            background: "#8B408A",
            opacity: "0.1",
            "-webkit-filter": "blur(20px)",
            "-webkit-transform": "scale(1, 0.3)",
            "animation-timing-function": "ease-out",
          },
          "50%": {
            "border-radius": "50%",
            height: "80px",
            background: "#8B408A",
            opacity: "0.2",
            "-webkit-filter": "blur(20px)",
            "-webkit-transform": "scale(1, 0.3)",
            "animation-timing-function": "ease-in",
          },
          "100%": {
            "border-radius": "50%",
            height: "80px",
            background: "#8B408A",
            opacity: "0.1",
            "-webkit-filter": "blur(20px)",
            "-webkit-transform": "scale(1, 0.3)",
            "animation-timing-function": "ease-out",
          },
        },
        bubbles: {
          "0%": {
            transform: "translateY(0)",
            opacity: 0,
          },
          "25%": {
            opacity: 0.2,
          },
          "50%": {
            opacity: 0.4,
          },
          "75%": {
            opacity: 0.2,
          },
          "100%": {
            opacity: 0,
            transform: "translateY(-10em)",
          },
        },
        "fade-in-out": {
          "0%": { opacity: 0 },
          "20%": { transform: "translateX(-2em)", opacity: 0 },
          "40%": { transform: "translateX(0em)", opacity: 1 },
          "80%": { opacity: 1 },
          "100%": { opacity: 0 },
        },
        "fade-in": {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
        "fade-in-50": {
          "0%": { opacity: 0.5 },
          "50%": { opacity: 1 },
          "100%": { opacity: 1 },
        },
        "fade-out": {
          "0%": { opacity: 1 },
          "100%": { opacity: 0 },
        },
        "fade-out-50": {
          "0%": { opacity: 1 },
          "50%": { opacity: 0.5 },
          "100%": { opacity: 0.5 },
        },
        typing: {
          "0%": { width: "0%", height: "0%" },
          "100%": { width: "100%", height: "100%" },
        },
        "glow-text": {
          "0%": {},
          "30%": {
            color: "#ff0000",
            "font-weight": "bold",
          },
          "60%": {
            color: "#ff0000",
            "font-weight": "bold",
          },
          "100%": {},
        },
      },
      animation: {
        "bounce-up": "bounce-up 1s ease-in-out infinite",
        "bounce-down": "bounce-down 1s ease-in-out infinite",
        waving: "wave-xs 2s linear infinite",
        "waving-hand": "wave 2s linear infinite",
        "slide-to-top": "slide-to-top 0.3s ease-out",
        "slide-from-top": "slide-from-top 0.3s ease-in",
        "dropdown-show": "dropdown-show 0.2s ease-out",
        "auto-glow": "glow 1s ease-in-out infinite alternate",
        "glow-text-once": "glow-text 1s ease-in-out",
        float: "float 4s infinite ease-in-out",
        shadow: "shadow 4s infinite",
        "purple-shadow": "purple-shadow 4s infinite",
        bubbles: "bubbles 3s ease-in infinite",
        "fade-in-out": "fade-in-out 4s ease-in-out forwards",
        "fade-in": "fade-in 1s",
        "fast-fade-in": "fade-in 150ms",
        "fast-fade-in-out": "fade-in-out 2s ease-in-out forwards",
        "fade-out": "fade-out 1s",
        "fade-in-50": "fade-in-50 1s forwards",
        "fade-out-50": "fade-out-50 1s forwards",
        typewriter: "typing 1s",
      },
      lineHeight: {
        3.75: "0.938rem" /* 15px */,
        5.25: "1.313rem" /* 21px */,
        7.5: "1.875rem" /* 30px */,
      },
      spacing: {
        4.5: "1.125rem" /* 18px */,
        5.25: "1.313rem" /* 21px */,
        30: "7.5rem" /* 120px */,
        122: "30.5rem" /* 488px */,
      },
      transitionDuration: {
        3000: "3000ms",
        3100: "3100ms",
        3200: "3200ms",
        3300: "3300ms",
        3400: "3400ms",
        3500: "3500ms",
        3600: "3600ms",
        3700: "3700ms",
        3800: "3800ms",
        3900: "3900ms",
        4000: "4000ms",
      },
      transitionDelay: {
        50: "50ms",
      },
    },
  },
  daisyui: {
    styled: true,
    themes: [
      {
        bumblebee: {
          ...require("daisyui/src/theming/themes")["[bumblebee]"],
          primary: "#2B2927",
          secondary: "#E7BFE8",
          accent: "#A950A9",
          neutral: "#191610",
          "base-100": "#FCFBF8",
          "blue-900": "#1A2E51",
          info: "#67BAF3",
          success: "#50D884",
          warning: "#FAA747",
          error: "#F3602B",
          "--rounded-box": "0.5rem", // border radius rounded-box utility class, used in card and other large boxes
          "--rounded-btn": "0.5rem", // border radius rounded-btn utility class, used in buttons and similar element
          "--rounded-badge": "1.9rem", // border radius rounded-badge utility class, used in badges and similar
          "--animation-btn": "0.25s", // duration of animation when you click on button
          "--animation-input": "0.2s", // duration of animation for inputs like checkbox, toggle, radio, etc
          "--btn-text-case": "uppercase", // set default text transform for buttons
          "--btn-focus-scale": "0.95", // scale transform of button when you focus on it
          "--border-btn": "1px", // border width of buttons
          "--tab-border": "1px", // border width of tabs
          "--tab-radius": "0.5rem", // border radius of tabs
        },
      },
    ],
    // base: true,
    utils: true,
    logs: true,
    rtl: false,
    prefix: "",
    darkTheme: "dark",
  },
  // presets: []
};

postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

package.json

{
  "devDependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.9",
    "autoprefixer": "^10.4.20",
    "daisyui": "^4.12.10",
    "postcss": "^8.4.41",
    "postcss-import": "^16.1.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "scripts": {
    "deploy": "NODE_ENV=production tailwindcss --postcss --minify --input=css/app.css --output=../priv/static/assets/app.css && NODE_ENV=production tailwindcss --postcss --minify --input=css/storybook.css --output=../priv/static/assets/storybook.css"
  },
  "dependencies": {
    "@alpinejs/collapse": "^3.12.1",
    "@jellyfish-dev/membrane-webrtc-js": "^0.7.1",
    "alpinejs": "^3.9.1",
    "canvas-confetti": "^1.6.0",
    "chart.js": "^4.4.0",
    "countup.js": "^2.8.0",
    "flatpickr": "^4.6.13",
    "intro.js": "^7.2.0",
    "mermaid": "^9.1.7",
    "moment": "^2.29.4",
    "simple-notify": "^0.5.5",
    "sortable": "^2.0.0",
    "sortablejs": "1.15.0",
    "sweetalert2": "^11.10.5",
    "swiper": "^10.2.0",
    "tippy.js": "^6.3.7"
  }
}

Maybe i'm doing something really dumb that is causing this issue?

[noozo]

Missed storybook.js

// If your components require any hooks or custom uploaders, or if your pages
// require connect parameters, uncomment the following lines and declare them as
// such:

// If your components require alpinejs, you'll need to start
// alpine after the DOM is loaded and pass in an onBeforeElUpdated

import Alpine from "alpinejs";
import collapse from "@alpinejs/collapse";
window.Alpine = Alpine;
Alpine.plugin(collapse);
document.addEventListener("DOMContentLoaded", () => {
  window.Alpine.start();
});

import GlobalHooks from "./global_hooks";
// import * as Params from "./params";
// import * as Uploaders from "./uploaders";
(function () {
  if (!window.storybook) {
    window.storybook = {};
  }

  window.storybook.Hooks = GlobalHooks;
  // window.storybook = { Hooks, Params, Uploaders };

  window.storybook.LiveSocketOptions = {
    dom: {
      onBeforeElUpdated(from, to) {
        if (from._x_dataStack) {
          window.Alpine.clone(from, to);
        }
      },
    },
  };
})();

[noozo]

Also, the beginning of app.css

@import "./_components.css";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "simple-notify/dist/simple-notify.min.css";
@import "flatpickr/dist/flatpickr.min.css";
@import "flatpickr/dist/themes/light.css";
@import "flatpickr/dist/plugins/monthSelect/style.css";
@import "tippy.js/dist/tippy.css";
@import "tippy.js/animations/shift-away-subtle.css";
@import "swiper/swiper.css";
@import "intro.js/introjs.css";
@import "_introjs_pf.css";
@import "tippy.js/themes/light.css";

@import "_typography";
@import "_buttons";
@import "_badges";
@import "_checkboxes";
@import "_drawer";
@import "_dividers";
@import "_forms";
@import "_modal";
@import "_toast";
@import "_tabs";
@import "_tables";
@import "_state_machine";
@import "_cards";
@import "_links";
@import "_datepicker";
@import "_grid";
/* overrides flatpickr/dist/themes/light.css */
@import "_datepicker_month";
/* overrides of flatpickr/dist/plugins/monthSelect/style.css */
@import "_tooltips";
@import "specialist/_score";

body {
  @apply bg-yellow-grey-50 font-jakarta text-yellow-grey-800 m-auto font-normal antialiased;
}

[cblavier]

I'm sorry but this is a bit rough to help you properly. I didn't spot any big mistake, but the devil hides in the details...

[noozo]

Any chance you could add a custom font to the storybook example repo and see if that works properly?

[cblavier]

I'll give it a shot later today

[cblavier]

I tried another font with the following commit (available in this branch)

It's working as expected 🤷‍♂️

[noozo]

Not tailwind, though 🤔

[noozo]

This is so weird. If i inspect the element and untick all the font-family definitions, i get the default browser font. Then if i click the .psb definition, i do get the storybook default font. But if I click the jakarta font then nothing happens. Any chance i'm messing up the font loading in storybook somehow?

Loading the fonts happens at the esbuild level:

config :esbuild,
  version: "0.17.11",
  default: [
    args: ~w(
        js/app.js
        js/storybook.js
        vendor/fonts/Recoleta/recoleta.css
        vendor/fonts/PlusJakartaSans/jakarta.css
        vendor/fonts/Caveat/caveat.css
        --bundle
        --loader:.woff2=file
        --loader:.woff=file
        --target=es2017
        --outdir=../priv/static/assets
        --external:/fonts/*
        --external:/images/*
    ),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

Any chance that doesn't get picked up by storybook for some reason?

[noozo]

https://github.com/user-attachments/assets/a88304c6-3c97-44d7-92b9-2d73ab9c11af

[cblavier]

Not tailwind, though 🤔

this is tailwind: everything under @layer utilities is managed by Tailwind (see this doc)

I suspect this is more a font loading issue, but I will try with a local font file as well

[cblavier]

still working well, with a local font file loaded with esbuild, and declared in tailwind https://github.com/phenixdigital/phoenix_storybook_demo/commit/53dfa9d4d7c57426739fddb2c0582a071a504e97 🤷‍♂️

[noozo]

Moved the fonts outside of esbuild (just plainly loaded them in app.css) and seems to work. Weird stuff. I would expect the esbuild version to work as well, but all is good now. Thanks for helping out!