MDX styling doesn't work after importing Tailwind CSS

[tanwanjern]

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

// Remove this code, MDX is working fine but Tailwind isn't
{
  name: '@storybook/addon-postcss',
  options: {
    postcssLoaderOptions: {
      implementation: require('postcss'),
    },
  },
},

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?

[fivaz]

mdx2 requires a line breaking

<style>
{`

instead of

<style>{`

check if this is not the problem

[jhohlfeld]

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.

[alifarooq0]

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?

[aneeshkr-me]

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: [],
}