add tailwindcss

.storybook/main.js

@@ -1,21 +1,64 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+const WEBPACK_SERVE = Boolean(process.env.WEBPACK_SERVE);
+const mode = WEBPACK_SERVE ? 'development' : 'production';
+export const isDev = mode === 'development';
+
 /** @type { import('@storybook/html-webpack5').StorybookConfig } */
 const config = {
-  stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../apps/**/*.mdx",
-    "../apps/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-  ],
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)', '../apps/**/*.mdx', '../apps/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-webpack5-compiler-swc",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
   ],
   framework: {
-    name: "@storybook/html-webpack5",
+    name: '@storybook/html-webpack5',
     options: {},
   },
+  webpackFinal: async (config) => {
+    const newConfig = {
+      ...config,
+      module: {
+        ...config.module,
+        rules: [
+          ...config.module.rules.filter((i) => {
+            if (i.test instanceof RegExp && i.test.test('.css')) {
+              return false;
+            }
+            return true;
+          }),
+          {
+            test: /\.css$/,
+            use: [
+              {
+                loader: !isDev ? MiniCssExtractPlugin.loader : 'style-loader',
+              },
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: false,
+                },
+              },
+              'postcss-loader',
+            ],
+          },
+        ],
+      },
+      plugins: [
+        ...config.plugins,
+        // ...(config.plugins ?? [])
+        //   // DocgenPlugin adds to the build time and we don't use storybook's autogenerated docs.
+        //   .filter((plugin) => plugin.constructor.name !== 'DocgenPlugin'),
+        // ,
+        new MiniCssExtractPlugin({
+          filename: '[name].bundle.css',
+          chunkFilename: '[id].css',
+        }),
+      ],
+    };
+    return newConfig;
+  },
 };
 export default config;

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<!-- .storybook/preview-head.html -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

.storybook/preview.js

@@ -1,3 +1,5 @@
+import './tailwind.css';
+
 /** @type { import('@storybook/html').Preview } */
 const preview = {
   parameters: {

.storybook/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;