diff --git a/tailwind.config.js b/tailwind.config.js
index ad765095e..32da0d6a9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,10 +1,5 @@
 module.exports = {
-  content: [
-    "./src/**/*.jsx",
-    "./src/**/*.js",
-    "./src/**/*.json",
-    "./src/**/*.css",
-  ],
+  content: ["./src/**/*.{jsx,js,json,css,ts,tsx,mdx}"],
   safelist: [
     "w-1/2",
     "w-1/3",
diff --git a/webpack.common.js b/webpack.common.js
index 5b9bb0f2a..d77d414e5 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -25,6 +25,17 @@ const jsRules = [
   },
 ];
 
+const imgRules = [
+  {
+    test: /\.(png|jpe?g|gif)$/i,
+    use: [
+      {
+        loader: "file-loader",
+      },
+    ],
+  },
+];
+
 const highlightJsImportPaths = findImports(
   [
     "./src/core/utils/syntax-highlighter.js",
@@ -57,7 +68,7 @@ const commonOutputConfig = {
 const modulesConfig = modules.map((mod) => ({
   ...externalsConfig,
   module: {
-    rules: [...cssRules, ...jsRules],
+    rules: [...cssRules, ...jsRules, ...imgRules],
   },
   entry: {
     [mod.name]: {
@@ -85,7 +96,7 @@ const modulesConfig = modules.map((mod) => ({
 const componentsConfig = modules.map((mod) => ({
   ...externalsConfig,
   module: {
-    rules: [...cssRules, ...jsRules],
+    rules: [...cssRules, ...jsRules, ...imgRules],
   },
   entry: mod.components.reduce(
     (acc, componentName) => ({
@@ -112,7 +123,11 @@ const componentsConfig = modules.map((mod) => ({
 const reactConfig = modules.map((mod) => ({
   ...externalsConfig,
   module: {
-    rules: [{ test: /\.css$/i, loader: "null-loader" }, ...jsRules],
+    rules: [
+      { test: /\.css$/i, loader: "null-loader" },
+      ...jsRules,
+      ...imgRules,
+    ],
   },
   entry: mod.components.reduce((acc, componentName) => {
     const path = `./src/${mod.directory}/${componentName}/component.jsx`;