-
SummaryThis guide essentially works. But in Tailwind 4, the font variables class must be in the element, it does not work if you put it in a or even . And if you put a element in the decorator, then you will have two elements in the DOM, which is not allowed.
// preview.tsx
import React from "react";
import type { Preview } from "@storybook/react";
import { Lora, Open_Sans } from "next/font/google";
import "../src/app/globals.css";
const lora = Lora({
subsets: ["latin"],
variable: "--font-lora-serif",
});
const openSans = Open_Sans({
subsets: ["latin"],
variable: "--font-open-sans",
});
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
decorators: [
(Story) => (
<div
className={`${lora.variable} ${openSans.variable} font-sans antialiased`}
>
<Story />
</div>
),
],
};
export default preview;Additional informationstorybook: 8.4.7 Create a reproductionNo response |
Beta Was this translation helpful? Give feedback.
Answered by
lirbank
Dec 9, 2024
Replies: 2 comments
-
|
If I do replace the div with a html element, the fonts actually show, but the browser console complains about nesting html elements not being acceptable. // preview.tsx
...
decorators: [
(Story) => (
<html className={`${lora.variable} ${openSans.variable} font-sans antialiased`}>
<Story />
</html>
),
],
... |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Here is the solution: import React from "react";
import type { Preview } from "@storybook/react";
import { Lora, Open_Sans } from "next/font/google";
import "../src/app/globals.css";
const lora = Lora({
subsets: ["latin"],
variable: "--font-lora-serif",
});
const openSans = Open_Sans({
subsets: ["latin"],
variable: "--font-open-sans",
});
const preview: Preview = {
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
},
decorators: [
(Story) => {
// Access the <html> element directly
const htmlElement = document.documentElement;
// Add the font variable classes to the <html> element
htmlElement.classList.add(lora.variable);
htmlElement.classList.add(openSans.variable);
return <Story />;
},
],
};
export default preview;/* globals.css */
@import "tailwindcss";
@theme {
--font-serif: var(--font-lora-serif);
--font-sans: var(--font-open-sans);
} |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
lirbank
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here is the solution: