diff --git a/esbuild.config.js b/esbuild.config.js
index 364031f..4c60cdc 100644
--- a/esbuild.config.js
+++ b/esbuild.config.js
@@ -31,7 +31,7 @@ const options = {
   },
   plugins: [cleaner],
   legalComments: "none",
-  external: ["react", "react-dom", "@dreamworld/addon-redux", "tailwindcss-scoped-preflight"]
+  external: ["react", "react-dom", "@dreamworld/addon-redux"]
 };
 
 build({
diff --git a/src/hooks/breakpoint.ts b/src/hooks/breakpoint.ts
index 04c25ec..c142550 100644
--- a/src/hooks/breakpoint.ts
+++ b/src/hooks/breakpoint.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { screens } from "../../tailwind.config";
+import { screens } from "../utils/tailwind";
 
 const calculateBreakpoints = () =>
   Object.entries(screens).reduce((acc, [key, value]) => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 41b18bf..c76eb53 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -4,6 +4,7 @@ import { ids, selectors } from "@/constants";
 export * from "./d3";
 export * from "./transformer";
 export * from "./workspace";
+export * from "./tailwind";
 
 export const fallible = (fn: Function) => {
   try {
diff --git a/src/utils/tailwind.ts b/src/utils/tailwind.ts
new file mode 100644
index 0000000..a383932
--- /dev/null
+++ b/src/utils/tailwind.ts
@@ -0,0 +1,9 @@
+export const screens = {
+  xs: "400px",
+  xsm: "450px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  xxl: "1536px"
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index c50ae17..c49c3f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,15 +1,6 @@
 import animate from "tailwindcss-animate";
 import { isolateInsideOfContainer, scopedPreflightStyles } from "tailwindcss-scoped-preflight";
-
-export const screens = {
-  xs: "400px",
-  xsm: "450px",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-  xxl: "1536px"
-};
+import { screens } from "./src/utils/tailwind";
 
 /** @type {import('tailwindcss').Config} */
 export default {