diff --git a/frontend/package.json b/frontend/package.json
index 63dc0ad0..87878dea 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.cjs
similarity index 100%
rename from frontend/postcss.config.js
rename to frontend/postcss.config.cjs
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2757948b..79c137d6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,11 +1,12 @@
-const { slateDark } = require('@radix-ui/colors');
+import { slateDark } from '@radix-ui/colors';
 import { colors } from './theme/colors';
 import { icons } from './theme/icons';
-const defaultTheme = require('tailwindcss/defaultTheme');
-const {
+import defaultTheme from 'tailwindcss/defaultTheme';
+import {
   iconsPlugin,
   getIconCollections,
-} = require('@egoist/tailwindcss-icons');
+} from '@egoist/tailwindcss-icons';
+import typography from '@tailwindcss/typography';
 
 const defaultSansFonts = [
   '-apple-system',
@@ -255,7 +256,7 @@ const tailwindConfig = {
   },
   plugins: [
     // eslint-disable-next-line
-    require('@tailwindcss/typography'),
+    typography,
     iconsPlugin({
       collections: {
         woot: { icons },
@@ -273,4 +274,4 @@ const tailwindConfig = {
   ],
 };
 
-module.exports = tailwindConfig;
+export default tailwindConfig;
diff --git a/frontend/theme/colors.js b/frontend/theme/colors.js
index 0f4d2af1..b3461e02 100644
--- a/frontend/theme/colors.js
+++ b/frontend/theme/colors.js
@@ -1,4 +1,4 @@
-const {
+import {
   blue,
   blueDark,
   green,
@@ -11,7 +11,7 @@ const {
   redDark,
   violet,
   violetDark,
-} = require('@radix-ui/colors');
+} from '@radix-ui/colors';
 
 export const colors = {
   woot: {