Open tanwanjern opened 2 years ago
mdx2 requires a line breaking
<style>
{`
instead of
<style>{`
check if this is not the problem
Well, I think we are looking at tailwind working nicely in the second example. It is just that tailwind per default resets all styling to h1-h6.
I'm seeing this exact same issue. it works for tsx
files but doesn't work for .mdx
files. How do I inject my tailwind css into the .mdx
files?
as @jhohlfeld said tailwind resets all the h1-h6 and p elements. If you want to use tailwind styles in these mdx files you should do something like
<h1 class="text-blue-500 text-4xl">Title</h1>
<h2 class="text-blue-400 text-xl">Subtitle</h2>
<p>Items</p>
@alifarooq0
To add to that, include 'mdx' in the 'content' field of your tailwind.config.js.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,ts,jsx,tsx,json,css,mdx}",
"./src/*.{js,ts,jsx,tsx,json,css}",
],
theme: {
extend: {},
},
plugins: [],
}
Describe the bug The MDX styling is not working after I import the Tailwind CSS into the Storybook.
To Reproduce Here is the code I added to import Tailwind
.storybook/main.js
Before Importing Tailwind
After Importing Tailwind
Full Code Demo: https://github.com/tanwanjern/next-storybook-demo Question: https://stackoverflow.com/questions/72826382/mdx-styling-doesnt-work-after-importing-tailwind-css-to-storybook
System "next": "12.2.0", "react": "18.2.0", "react-dom": "18.2.0" "@storybook/react": "^6.5.9",
Additional context How can I make Tailwind and MDX styling work together in Storybook? And which Storybook add-ons are not necessary so that I can remove them?