Undefined CSS Variable with TailwindCSS

[hmajid2301]

I am using TailwindCSS with Storybook, I have the following setup:

The tailwind.config.js looks like:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--primary)',
        secondary: 'var(--secondary)',
       ....
      },
  },
  variants: {},
};

My global.css looks like:

@tailwind base;
@tailwind components;
@tailwind utilities;

.root,
#root {
  --primary: #367ee9;
  --secondary: #a0aec0;
}

and my .storybook/preview.js file looks:

...
import '../src/styles/global.css';
...

My main issue is that in the docs tab my css variables are undefined however in the canvas tab the css variable is defined. An example mdx file.

import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { FaSearch as Search, FaSun as Sun } from 'react-icons/fa';

import Icon from './Icon';

<Meta title="Atoms | Icon" component={Icon} />

# Icon

<Preview>
  <Story
    name="Basic"
    args={{
      icon: <Search />,
      label: 'Search Icon',
    }}
  >
    {(args) => <Icon {...args} />}
  </Story>
</Preview>

<Props story="Basic" />

I'm using Storybook UI V6:

{
    "@storybook/addon-a11y": "6.0.0-beta.20",
    "@storybook/addon-actions": "6.0.0-beta.20",
    "@storybook/addon-controls": "6.0.0-beta.15",
    "@storybook/addon-docs": "6.0.0-beta.20",
    "@storybook/addon-essentials": "6.0.0-beta.20",
    "@storybook/addon-info": "6.0.0-alpha.2",
    "@storybook/addon-storysource": "6.0.0-beta.20",
    "@storybook/addon-viewport": "6.0.0-beta.20",
}

Below I've attached some screenshots

Thanks for any help

Taken from this repo

[shilman]

Try removing addon-info, it's deprecated and having different versions can cause strange dependency errors to occur.

[hmajid2301]

removed addon-info, still have the same problem.

[shilman]

Aha! Sorry didn't read the original question closely enough. Try:

.root,
#root,
#docs-root {
  --primary: #367ee9;
  --secondary: #a0aec0;
}

[hmajid2301]

yes thats sorted it thanks :)