Tailwindcss @apply doesn't work in <style jsx></style>

[denbalogh]

Hello there. Can you, please 🙏 , help me. I have a nextjs app with tailwindcss.

I use tailwind @apply directive in styled jsx:

<style jsx>{`
    header.menu-opened {
        @apply bg-white;
    }
    header.menu-opened nav {
        @apply block;
    }
`}</style>;

When I build the app or use npm run dev it works. It renders:

<header class="jsx-4176275436 w-full fixed left-0 top-0 menu-opened h-screen">
    <div class="jsx-4176275436 p-5 flex flex-row justify-between items-center">
        <img src="./images/logo.svg" alt="gritera logo" class="jsx-4176275436" />
        <button type="button" class="mobileToggle h-10 w-10 -mb-2 lg:hidden flex justify-center items-center focus:outline-none"><span class="icon-cross text-lg"></span></button>
    </div>
    <nav class="jsx-4176275436 hidden">
        <ul class="jsx-4176275436 px-5 border-t border-b border-neutral-200">
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">What we do</a></li>
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">Who we are</a></li>
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">Work with us</a></li>
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">Blog</a></li>
        </ul>
        <div class="jsx-4176275436 flex flex-row justify-center items-center py-8">
            <a class="bg-neutral-100 flex flex-row justify-center items-center flex-1 py-2 ml-5 text-neutral-400 active:text-white active:bg-black last:mr-5" href="/">
                <img src="/images/uk.svg" alt="EN" /><span class="font-gotham-book text-body-mobile ml-3">EN</span>
            </a>
            <a class="bg-neutral-100 flex flex-row justify-center items-center flex-1 py-2 ml-5 text-neutral-400 active:text-white active:bg-black last:mr-5" href="/">
                <img src="/images/norway.svg" alt="NO" /><span class="font-gotham-book text-body-mobile ml-3">NO</span>
            </a>
        </div>
    </nav>
</header>

But when I run storybook it renders:

<header class="w-full fixed left-0 top-0 menu-opened h-screen">
    <div class="p-5 flex flex-row justify-between items-center">
        <img src="./images/logo.svg" alt="gritera logo" /><button type="button" class="mobileToggle h-10 w-10 -mb-2 lg:hidden flex justify-center items-center focus:outline-none"><span class="icon-cross text-lg"></span></button>
    </div>
    <nav class="hidden">
        <ul class="px-5 border-t border-b border-neutral-200">
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">What we do</a></li>
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">Who we are</a></li>
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">Work with us</a></li>
            <li class="my-8"><a class="text-body-mobile uppercase font-gotham-book text-neutral-400" href="/">Blog</a></li>
        </ul>
        <div class="flex flex-row justify-center items-center py-8">
            <a class="bg-neutral-100 flex flex-row justify-center items-center flex-1 py-2 ml-5 text-neutral-400 active:text-white active:bg-black last:mr-5" href="/">
                <img src="/images/uk.svg" alt="EN" /><span class="font-gotham-book text-body-mobile ml-3">EN</span>
            </a>
            <a class="bg-neutral-100 flex flex-row justify-center items-center flex-1 py-2 ml-5 text-neutral-400 active:text-white active:bg-black last:mr-5" href="/">
                <img src="/images/norway.svg" alt="NO" /><span class="font-gotham-book text-body-mobile ml-3">NO</span>
            </a>
        </div>
    </nav>
    <style>
        header.menu-opened {
            @apply bg-white;
        }
        header.menu-opened nav {
            @apply block;
        }
    </style>
</header>

Here are the config files I use:

// .babelrc
{
  "presets": [["next/babel", {
    "preset-env": {},
    "styled-jsx": {
      "plugins": ["styled-jsx-plugin-postcss"]
    }
  }]]
}

// next.config.js
const withFonts = require('next-fonts')

module.exports = withFonts({
  enableSvg: true,
  webpack(config) {
    return config
  },
})

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}

// .storybook/config.js
import { configure } from '@storybook/react';
import '../styles/globals.css'

configure(require.context('../components/', true, /\.stories\.tsx?$/), module);

// .storybook/tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react" 
  },
  "include": [
    "next-env.d.ts",
    "../components/**/*.stories.ts",
    "../components/**/*.stories.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}
  

//.storybook/webpack.config.js
var path = require('path')

module.exports = ({ config }) => {  
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("awesome-typescript-loader"),
        options: {
          configFileName: path.resolve(__dirname, "./tsconfig.json"),
        },
      },
      {
        loader: require.resolve("react-docgen-typescript-loader"),
        options: {
          tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
        },
      }
    ],
  });

  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

Do you have any idea what might be the cause? I couldn't find anything similar on google.

[akhatri]

I also cant get this to work but with CSS (SASS) modules. There needs to be some example of implementing this. It works fine on the normal Next.js app but tailwind fails to load in Storybook. Using the normal class names without the @apply works fine though. So it appears to be some config setup in storybook? I've looked online but without any luck :(