diff --git a/tailwind.config.js b/tailwind.config.js
index 643aad5a8..e06ce1bd9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,66 +1,64 @@
-const plugin = require('tailwindcss/plugin');
-const colors = require('tailwindcss/colors');
+import { neutral } from 'tailwindcss/colors';
+import plugin from 'tailwindcss/plugin';
 
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './icons/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}'
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['var(--font-inter)']
+export const content = [
+  './pages/**/*.{js,ts,jsx,tsx}',
+  './components/**/*.{js,ts,jsx,tsx}',
+  './icons/**/*.{js,ts,jsx,tsx}',
+  './app/**/*.{js,ts,jsx,tsx}'
+];
+export const theme = {
+  extend: {
+    fontFamily: {
+      sans: ['var(--font-inter)']
+    },
+    colors: {
+      gray: neutral,
+      hotPink: '#FF1966',
+      dark: '#111111',
+      light: '#FAFAFA',
+      violetDark: '#4c2889'
+    },
+    keyframes: {
+      fadeIn: {
+        from: { opacity: 0 },
+        to: { opacity: 1 }
       },
-      colors: {
-        gray: colors.neutral,
-        hotPink: '#FF1966',
-        dark: '#111111',
-        light: '#FAFAFA',
-        violetDark: '#4c2889'
+      marquee: {
+        '0%': { transform: 'translateX(0%)' },
+        '100%': { transform: 'translateX(-100%)' }
       },
-      keyframes: {
-        fadeIn: {
-          from: { opacity: 0 },
-          to: { opacity: 1 }
-        },
-        marquee: {
-          '0%': { transform: 'translateX(0%)' },
-          '100%': { transform: 'translateX(-100%)' }
-        },
-        blink: {
-          '0%': { opacity: 0.2 },
-          '20%': { opacity: 1 },
-          '100% ': { opacity: 0.2 }
-        }
-      },
-      animation: {
-        fadeIn: 'fadeIn .3s ease-in-out',
-        carousel: 'marquee 60s linear infinite',
-        blink: 'blink 1.4s both infinite'
+      blink: {
+        '0%': { opacity: 0.2 },
+        '20%': { opacity: 1 },
+        '100% ': { opacity: 0.2 }
       }
+    },
+    animation: {
+      fadeIn: 'fadeIn .3s ease-in-out',
+      carousel: 'marquee 60s linear infinite',
+      blink: 'blink 1.4s both infinite'
     }
-  },
-  future: {
-    hoverOnlyWhenSupported: true
-  },
-  plugins: [
-    require('@tailwindcss/typography'),
-    plugin(({ matchUtilities, theme }) => {
-      matchUtilities(
-        {
-          'animation-delay': (value) => {
-            return {
-              'animation-delay': value
-            };
-          }
-        },
-        {
-          values: theme('transitionDelay')
-        }
-      );
-    })
-  ]
+  }
 };
+export const future = {
+  hoverOnlyWhenSupported: true
+};
+export const plugins = [
+  require('@tailwindcss/typography'),
+  plugin(({ matchUtilities, theme }) => {
+    matchUtilities(
+      {
+        'animation-delay': (value) => {
+          return {
+            'animation-delay': value
+          };
+        }
+      },
+      {
+        values: theme('transitionDelay')
+      }
+    );
+  })
+];