NebraskaCoder
diff --git a/‎.storybook/main.js‎ ‎.storybook/main.ts‎.storybook/main.js renamed to .storybook/main.ts
Lines changed: 25 additions & 1 deletion b/‎.storybook/main.js‎ ‎.storybook/main.ts‎.storybook/main.js renamed to .storybook/main.ts
Lines changed: 25 additions & 1 deletion
diff --git a/‎.storybook/preview.js‎
Lines changed: 0 additions & 9 deletions b/‎.storybook/preview.js‎
Lines changed: 0 additions & 9 deletions
diff --git a/‎.storybook/preview.ts‎
Lines changed: 14 additions & 0 deletions b/‎.storybook/preview.ts‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎components/controls/Button.tsx‎
Lines changed: 5 additions & 1 deletion b/‎components/controls/Button.tsx‎
Lines changed: 5 additions & 1 deletion
diff --git a/‎jest.config.ts‎
Lines changed: 1 addition & 1 deletion b/‎jest.config.ts‎
Lines changed: 1 addition & 1 deletion
@@ -1,3 +1,6 @@
+// @ts-ignore
+
+const path = require("path");
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 
 module.exports = {
@@ -6,6 +9,14 @@ module.exports = {
     "../stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-actions",
@@ -15,13 +26,26 @@ module.exports = {
   core: {
     builder: "@storybook/builder-webpack5",
   },
-  webpackFinal: async (config) => {
+  webpackFinal: async (config: any) => {
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
       new TsconfigPathsPlugin({
         extensions: config.resolve.extensions,
       }),
     ];
+    config.module.rules.push({
+      test: /\,css&/,
+      use: [
+        {
+          loader: "postcss-loader",
+          options: {
+            ident: "postcss",
+            plugins: [require("tailwindcss"), require("autoprefixer")],
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../"),
+    });
     return config;
   },
 };
@@ -0,0 +1,14 @@
+// @ts-ignore
+require("@styles/globals.css");
+
+module.exports = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
@@ -6,7 +6,11 @@ interface ButtonProps {
 }
 
 const Button = ({ children, onClick }: ButtonProps) => {
-  return <button onClick={onClick}>{children}</button>;
+  return (
+    <button className="bg-cyan-600" onClick={onClick}>
+      {children}
+    </button>
+  );
 };
 
 export default Button;
@@ -112,7 +112,7 @@ const jestConfig = {
   // },
 
   moduleNameMapper: {
-    "^@(components)/(.*)$": "<rootDir>/$1/$2",
+    "^@(components|styles)/(.*)$": "<rootDir>/$1/$2",
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader