Tailwindcss #apply is not working in storybook - next.js

Question

I am using Next css modules (sass). I tried every solutions I've encountered but I still cannot get it working.
My problem is, when I run the storybook, the css doesn't compile #apply method from tailwind. There is a simple solution which is remove the #apply and use the classname directly to the element but I don't have the time to do because the application is too big at this point.
// main.js
const path = require('path');
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.#(js|jsx|ts|tsx)',
],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions',
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
postcssOptions: {
plugins: [require.resolve('tailwindcss')],
},
implementation: require('postcss'),
},
},
},
],
framework: '#storybook/react',
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.sass$/,
use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
output in storybook
Any help would be appreciated

Answer 1

I managed to make it work by using this config.
.storybook/main.js
const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.#(js|jsx|ts|tsx)',
],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/addon-interactions',
'storybook-addon-next-router',
{
name: '#storybook/addon-postcss',
options: {
postcssLoaderOptions: {
postcssOptions: {
plugins: [require.resolve('tailwindcss')],
},
implementation: require('postcss'),
},
},
},
],
framework: '#storybook/react',
webpackFinal: async (config) => {
config.resolve.plugins.push(new TsconfigPathsPlugin());
config.module.rules.push({
test: /\.sass$/,
use: ['style-loader', 'css-loader?modules&importLoaders', 'sass-loader'],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
.storybook/preview.js
import '../styles/globals.css';
import { RouterContext } from 'next/dist/shared/lib/router-context';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
nextRouter: {
Provider: RouterContext.Provider,
},
};
In global.css, I imported the tailwind utilities
global.css
#tailwind base;
#tailwind components;
#tailwind utilities;