diff --git a/.vscode/settings.json b/.vscode/settings.json
index cd547ec00..1120468a6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -30,5 +30,6 @@
   "i18n-ally.disabled": false, // make sure to disable i18n-ally in your global setting and only enable it for such projects
   "tailwindCSS.experimental.classRegex": [
     ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
-  ]
+  ],
+  "tailwindCSS.rootFontSize": 16
 }
diff --git a/metro.config.js b/metro.config.js
index 6c305fb2a..4d34f817a 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -5,4 +5,4 @@ const { withNativeWind } = require('nativewind/metro');
 
 const config = getDefaultConfig(__dirname);
 
-module.exports = withNativeWind(config, { input: './global.css' });
+module.exports = withNativeWind(config, { input: './global.css', inlineRem: 16 });
diff --git a/src/components/ui/colors.js b/src/components/ui/colors.ts
similarity index 98%
rename from src/components/ui/colors.js
rename to src/components/ui/colors.ts
index ed3352a04..e3a0e876e 100644
--- a/src/components/ui/colors.js
+++ b/src/components/ui/colors.ts
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   white: '#ffffff',
   black: '#000000',
   charcoal: {
diff --git a/src/components/ui/font-family.ts b/src/components/ui/font-family.ts
new file mode 100644
index 000000000..c53e915a4
--- /dev/null
+++ b/src/components/ui/font-family.ts
@@ -0,0 +1,3 @@
+export default {
+  inter: ['Inter'],
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index 7f55b7af1..c63cee9a9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 const colors = require('./src/components/ui/colors');
+const fontFamily = require('./src/components/ui/font-family');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -8,9 +9,7 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
-      fontFamily: {
-        inter: ['Inter'],
-      },
+      fontFamily,
       colors,
     },
   },