diff --git a/client/web/package.json b/client/web/package.json
index 0539d15f7..f1e5a488c 100644
--- a/client/web/package.json
+++ b/client/web/package.json
@@ -6,6 +6,7 @@
     "node": "18.16.1",
     "yarn": "1.22.19"
   },
+  "type": "module",
   "private": true,
   "dependencies": {
     "@radix-ui/react-collapsible": "^1.0.3",
diff --git a/client/web/tailwind.config.js b/client/web/tailwind.config.js
index a734179e4..8f7bdee8a 100644
--- a/client/web/tailwind.config.js
+++ b/client/web/tailwind.config.js
@@ -1,7 +1,7 @@
-const plugin = require("tailwindcss/plugin")
-const styles = require("./styles.json")
+import plugin from "tailwindcss/plugin"
+import styles from "./styles.json"
 
-module.exports = {
+const config = {
   theme: {
     screens: {
       sm: "420px",
@@ -96,20 +96,22 @@ module.exports = {
   plugins: [
     plugin(function ({ addVariant }) {
       addVariant("state-open", [
-        '&[data-state="open"]',
-        '[data-state="open"] &',
+        "&[data-state=“open”]",
+        "[data-state=“open”] &",
       ])
       addVariant("state-closed", [
-        '&[data-state="closed"]',
-        '[data-state="closed"] &',
+        "&[data-state=“closed”]",
+        "[data-state=“closed”] &",
       ])
       addVariant("state-delayed-open", [
-        '&[data-state="delayed-open"]',
-        '[data-state="delayed-open"] &',
+        "&[data-state=“delayed-open”]",
+        "[data-state=“delayed-open”] &",
       ])
-      addVariant("state-active", ['&[data-state="active"]'])
-      addVariant("state-inactive", ['&[data-state="inactive"]'])
+      addVariant("state-active", ["&[data-state=“active”]"])
+      addVariant("state-inactive", ["&[data-state=“inactive”]"])
     }),
   ],
   content: ["./src/**/*.html", "./src/**/*.{ts,tsx}", "./index.html"],
 }
+
+export default config