diff --git a/apps/app-frontend/tailwind.config.ts b/apps/app-frontend/tailwind.config.ts
index d3323e11e..e81246e21 100644
--- a/apps/app-frontend/tailwind.config.ts
+++ b/apps/app-frontend/tailwind.config.ts
@@ -1,3 +1,4 @@
+import preset from '@modrinth/tooling-config/tailwind/tailwind-preset.ts'
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
@@ -12,245 +13,7 @@ const config: Config = {
 		'../../packages/**/*.{js,vue,ts}',
 		'!../../packages/**/node_modules/**',
 	],
-	theme: {
-		extend: {
-			colors: {
-				surface: {
-					1: 'var(--surface-1)',
-					2: 'var(--surface-2)',
-					3: 'var(--surface-3)',
-					4: 'var(--surface-4)',
-					5: 'var(--surface-5)',
-				},
-
-				/// TODO: Clean up these aliases within codebase to use default, primary, tertiary.
-				// text-default
-				primary: 'var(--color-text-default)',
-
-				// text-primary
-				contrast: 'var(--color-text-primary)',
-
-				// text-tertiary
-				secondary: 'var(--color-text-tertiary)',
-
-				red: {
-					DEFAULT: 'var(--color-red)',
-					50: 'var(--color-red-50)',
-					100: 'var(--color-red-100)',
-					200: 'var(--color-red-200)',
-					300: 'var(--color-red-300)',
-					400: 'var(--color-red-400)',
-					500: 'var(--color-red-500)',
-					600: 'var(--color-red-600)',
-					700: 'var(--color-red-700)',
-					800: 'var(--color-red-800)',
-					900: 'var(--color-red-900)',
-					950: 'var(--color-red-950)',
-				},
-				orange: {
-					DEFAULT: 'var(--color-orange)',
-					50: 'var(--color-orange-50)',
-					100: 'var(--color-orange-100)',
-					200: 'var(--color-orange-200)',
-					300: 'var(--color-orange-300)',
-					400: 'var(--color-orange-400)',
-					500: 'var(--color-orange-500)',
-					600: 'var(--color-orange-600)',
-					700: 'var(--color-orange-700)',
-					800: 'var(--color-orange-800)',
-					900: 'var(--color-orange-900)',
-					950: 'var(--color-orange-950)',
-				},
-				green: {
-					DEFAULT: 'var(--color-green)',
-					50: 'var(--color-green-50)',
-					100: 'var(--color-green-100)',
-					200: 'var(--color-green-200)',
-					300: 'var(--color-green-300)',
-					400: 'var(--color-green-400)',
-					500: 'var(--color-green-500)',
-					600: 'var(--color-green-600)',
-					700: 'var(--color-green-700)',
-					800: 'var(--color-green-800)',
-					900: 'var(--color-green-900)',
-					950: 'var(--color-green-950)',
-				},
-				blue: {
-					DEFAULT: 'var(--color-blue)',
-					50: 'var(--color-blue-50)',
-					100: 'var(--color-blue-100)',
-					200: 'var(--color-blue-200)',
-					300: 'var(--color-blue-300)',
-					400: 'var(--color-blue-400)',
-					500: 'var(--color-blue-500)',
-					600: 'var(--color-blue-600)',
-					700: 'var(--color-blue-700)',
-					800: 'var(--color-blue-800)',
-					900: 'var(--color-blue-900)',
-					950: 'var(--color-blue-950)',
-				},
-				purple: {
-					DEFAULT: 'var(--color-purple)',
-					50: 'var(--color-purple-50)',
-					100: 'var(--color-purple-100)',
-					200: 'var(--color-purple-200)',
-					300: 'var(--color-purple-300)',
-					400: 'var(--color-purple-400)',
-					500: 'var(--color-purple-500)',
-					600: 'var(--color-purple-600)',
-					700: 'var(--color-purple-700)',
-					800: 'var(--color-purple-800)',
-					900: 'var(--color-purple-900)',
-					950: 'var(--color-purple-950)',
-				},
-				gray: {
-					DEFAULT: 'var(--color-gray)',
-					50: 'var(--color-gray-50)',
-					100: 'var(--color-gray-100)',
-					200: 'var(--color-gray-200)',
-					300: 'var(--color-gray-300)',
-					400: 'var(--color-gray-400)',
-					500: 'var(--color-gray-500)',
-					600: 'var(--color-gray-600)',
-					700: 'var(--color-gray-700)',
-					800: 'var(--color-gray-800)',
-					900: 'var(--color-gray-900)',
-					950: 'var(--color-gray-950)',
-				},
-
-				/// === LEGACY ===
-				icon: 'var(--color-base)',
-				// Text
-				inactive: 'var(--color-text-inactive)',
-				dark: 'var(--color-text-dark)',
-				inverted: 'var(--color-text-inverted)',
-				heading: 'var(--color-heading)',
-				bg: {
-					DEFAULT: 'var(--color-bg)',
-					red: 'var(--color-red-bg)',
-					orange: 'var(--color-orange-bg)',
-					green: 'var(--color-green-bg)',
-					blue: 'var(--color-blue-bg)',
-					purple: 'var(--color-purple-bg)',
-					raised: 'var(--color-raised-bg)',
-				},
-				highlight: {
-					DEFAULT: 'var(--color-brand-highlight)',
-					red: 'var(--color-red-highlight)',
-					orange: 'var(--color-orange-highlight)',
-					green: 'var(--color-green-highlight)',
-					blue: 'var(--color-blue-highlight)',
-					purple: 'var(--color-purple-highlight)',
-					gray: 'var(--color-gray-highlight)',
-				},
-				divider: {
-					DEFAULT: 'var(--color-divider)',
-					dark: 'var(--color-divider-dark)',
-				},
-				brand: {
-					DEFAULT: 'var(--color-brand)',
-					red: 'var(--color-red)',
-					orange: 'var(--color-orange)',
-					green: 'var(--color-green)',
-					blue: 'var(--color-blue)',
-					purple: 'var(--color-purple)',
-					highlight: 'var(--color-brand-highlight)',
-					shadow: 'var(--color-brand-shadow)',
-					inverted: 'var(--color-accent-contrast)',
-				},
-				tabUnderlineHovered: 'var(--tab-underline-hovered)',
-				button: {
-					bg: 'var(--color-button-bg)',
-					text: 'var(--color-button-text)',
-					bgHover: 'var(--color-button-bg-hover)',
-					textHover: 'var(--color-button-text-hover)',
-					bgActive: 'var(--color-button-bg-active)',
-					textActive: 'var(--color-button-text-active)',
-					border: 'var(--color-button-border)',
-					bgSelected: 'var(--color-button-bg-selected)',
-					textSelected: 'var(--color-button-text-selected)',
-				},
-				toggleHandle: 'var(--color-toggle-handle)',
-				dropdown: {
-					bg: 'var(--color-dropdown-bg)',
-					text: 'var(--color-dropdown-text)',
-				},
-				tooltip: {
-					bg: 'var(--color-tooltip-bg)',
-					text: 'var(--color-tooltip-text)',
-				},
-				code: {
-					bg: 'var(--color-code-bg)',
-					text: 'var(--color-code-text)',
-				},
-				kbdShadow: 'var(--color-kbd-shadow)',
-				ad: {
-					DEFAULT: 'var(--color-ad)',
-					raised: 'var(--color-ad-raised)',
-					contrast: 'var(--color-ad-contrast)',
-					highlight: 'var(--color-ad-highlight)',
-				},
-				greyLink: {
-					DEFAULT: 'var(--color-grey-link)',
-					hover: 'var(--color-grey-link-hover)',
-					active: 'var(--color-grey-link-active)',
-				},
-				link: {
-					DEFAULT: 'var(--color-link)',
-					hover: 'var(--color-link-hover)',
-					active: 'var(--color-link-active)',
-				},
-				warning: {
-					bg: 'var(--color-warning-bg)',
-					text: 'var(--color-warning-text)',
-					banner: {
-						text: 'var(--color-warning-banner-text)',
-						bg: 'var(--color-warning-banner-bg)',
-						side: 'var(--color-warning-banner-side)',
-					},
-				},
-				infoBanner: {
-					text: 'var(--color-info-banner-text)',
-					bg: 'var(--color-info-banner-bg)',
-					side: 'var(--color-info-banner-side)',
-				},
-				blockQuote: 'var(--color-block-quote)',
-				headerUnderline: 'var(--color-header-underline)',
-				hr: 'var(--color-hr)',
-				table: {
-					border: 'var(--color-table-border)',
-					alternateRow: ' var(--color-table-alternate-row)',
-				},
-			},
-			backgroundImage: {
-				mazeBg: 'var(--landing-maze-bg)',
-				mazeGradientBg: 'var(--landing-maze-gradient-bg)',
-				// @ts-ignore
-				landing: {
-					mazeOuterBg: 'var(--landing-maze-outer-bg)',
-					colorHeading: 'var(--landing-color-heading)',
-					colorSubheading: 'var(--landing-color-subheading)',
-					transitionGradientStart: 'var(--landing-transition-gradient-start)',
-					transitionGradientEnd: 'var(--landing-transition-gradient-end)',
-					hoverCardGradient: 'var(--landing-hover-card-gradient)',
-					borderGradient: 'var(--landing-border-gradient)',
-					borderColor: 'var(--landing-border-color)',
-					creatorGradient: 'var(--landing-creator-gradient)',
-					blobGradient: 'var(--landing-blob-gradient)',
-					cardBg: 'var(--landing-card-bg)',
-					blueLabel: 'var(--landing-blue-label)',
-					blueLabelBg: 'var(--landing-blue-label-bg)',
-					greenLabel: 'var(--landing-green-label)',
-					greenLabelBg: 'var(--landing-green-label-bg)',
-					rawBg: 'var(--landing-raw-bg)',
-				},
-			},
-		},
-	},
-	plugins: [],
-	corePlugins: {
-		preflight: false,
-	},
+	presets: [preset],
 }
 
 export default config
diff --git a/apps/frontend/tailwind.config.ts b/apps/frontend/tailwind.config.ts
index 69bf2f163..dd57bbcd2 100644
--- a/apps/frontend/tailwind.config.ts
+++ b/apps/frontend/tailwind.config.ts
@@ -1,3 +1,4 @@
+import preset from '@modrinth/tooling-config/tailwind/tailwind-preset.ts'
 import type { Config } from 'tailwindcss'
 
 const config: Config = {
@@ -12,261 +13,7 @@ const config: Config = {
 		'../../packages/**/*.{js,vue,ts}',
 		'!../../packages/**/node_modules/**',
 	],
-	theme: {
-		extend: {
-			colors: {
-				surface: {
-					1: 'var(--surface-1)',
-					2: 'var(--surface-2)',
-					3: 'var(--surface-3)',
-					4: 'var(--surface-4)',
-					5: 'var(--surface-5)',
-				},
-
-				/// TODO: Clean up these aliases within codebase to use default, primary, tertiary.
-				// text-default
-				primary: 'var(--color-text-default)',
-
-				// text-primary
-				contrast: 'var(--color-text-primary)',
-
-				// text-tertiary
-				secondary: 'var(--color-text-tertiary)',
-
-				red: {
-					DEFAULT: 'var(--color-red)',
-					50: 'var(--color-red-50)',
-					100: 'var(--color-red-100)',
-					200: 'var(--color-red-200)',
-					300: 'var(--color-red-300)',
-					400: 'var(--color-red-400)',
-					500: 'var(--color-red-500)',
-					600: 'var(--color-red-600)',
-					700: 'var(--color-red-700)',
-					800: 'var(--color-red-800)',
-					900: 'var(--color-red-900)',
-					950: 'var(--color-red-950)',
-				},
-				orange: {
-					DEFAULT: 'var(--color-orange)',
-					50: 'var(--color-orange-50)',
-					100: 'var(--color-orange-100)',
-					200: 'var(--color-orange-200)',
-					300: 'var(--color-orange-300)',
-					400: 'var(--color-orange-400)',
-					500: 'var(--color-orange-500)',
-					600: 'var(--color-orange-600)',
-					700: 'var(--color-orange-700)',
-					800: 'var(--color-orange-800)',
-					900: 'var(--color-orange-900)',
-					950: 'var(--color-orange-950)',
-				},
-				green: {
-					DEFAULT: 'var(--color-green)',
-					50: 'var(--color-green-50)',
-					100: 'var(--color-green-100)',
-					200: 'var(--color-green-200)',
-					300: 'var(--color-green-300)',
-					400: 'var(--color-green-400)',
-					500: 'var(--color-green-500)',
-					600: 'var(--color-green-600)',
-					700: 'var(--color-green-700)',
-					800: 'var(--color-green-800)',
-					900: 'var(--color-green-900)',
-					950: 'var(--color-green-950)',
-				},
-				blue: {
-					DEFAULT: 'var(--color-blue)',
-					50: 'var(--color-blue-50)',
-					100: 'var(--color-blue-100)',
-					200: 'var(--color-blue-200)',
-					300: 'var(--color-blue-300)',
-					400: 'var(--color-blue-400)',
-					500: 'var(--color-blue-500)',
-					600: 'var(--color-blue-600)',
-					700: 'var(--color-blue-700)',
-					800: 'var(--color-blue-800)',
-					900: 'var(--color-blue-900)',
-					950: 'var(--color-blue-950)',
-				},
-				purple: {
-					DEFAULT: 'var(--color-purple)',
-					50: 'var(--color-purple-50)',
-					100: 'var(--color-purple-100)',
-					200: 'var(--color-purple-200)',
-					300: 'var(--color-purple-300)',
-					400: 'var(--color-purple-400)',
-					500: 'var(--color-purple-500)',
-					600: 'var(--color-purple-600)',
-					700: 'var(--color-purple-700)',
-					800: 'var(--color-purple-800)',
-					900: 'var(--color-purple-900)',
-					950: 'var(--color-purple-950)',
-				},
-				gray: {
-					DEFAULT: 'var(--color-gray)',
-					50: 'var(--color-gray-50)',
-					100: 'var(--color-gray-100)',
-					200: 'var(--color-gray-200)',
-					300: 'var(--color-gray-300)',
-					400: 'var(--color-gray-400)',
-					500: 'var(--color-gray-500)',
-					600: 'var(--color-gray-600)',
-					700: 'var(--color-gray-700)',
-					800: 'var(--color-gray-800)',
-					900: 'var(--color-gray-900)',
-					950: 'var(--color-gray-950)',
-				},
-
-				/// === LEGACY ===
-				icon: 'var(--color-base)',
-				// Text
-				inactive: 'var(--color-text-inactive)',
-				dark: 'var(--color-text-dark)',
-				inverted: 'var(--color-text-inverted)',
-				heading: 'var(--color-heading)',
-				bg: {
-					DEFAULT: 'var(--surface-1)', // var(--color-bg)
-					red: 'var(--color-red-bg)',
-					orange: 'var(--color-orange-bg)',
-					green: 'var(--color-green-bg)',
-					blue: 'var(--color-blue-bg)',
-					purple: 'var(--color-purple-bg)',
-					raised: 'var(--surface-3)', // var(--color-raised-bg)
-				},
-				banners: {
-					error: {
-						bg: 'var(--banner-error-bg)',
-						text: 'var(--banner-error-text)',
-						border: 'var(--banner-error-border)',
-					},
-					warning: {
-						bg: 'var(--banner-warning-bg)',
-						text: 'var(--banner-warning-text)',
-						border: 'var(--banner-warning-border)',
-					},
-					info: {
-						bg: 'var(--banner-info-bg)',
-						text: 'var(--banner-info-text)',
-						border: 'var(--banner-info-border)',
-					},
-				},
-				highlight: {
-					DEFAULT: 'var(--color-brand-highlight)',
-					red: 'var(--color-red-highlight)',
-					orange: 'var(--color-orange-highlight)',
-					green: 'var(--color-green-highlight)',
-					blue: 'var(--color-blue-highlight)',
-					purple: 'var(--color-purple-highlight)',
-				},
-				divider: {
-					DEFAULT: 'var(--color-divider)',
-					dark: 'var(--color-divider-dark)',
-				},
-				brand: {
-					DEFAULT: 'var(--color-brand)',
-					red: 'var(--color-red)',
-					orange: 'var(--color-orange)',
-					green: 'var(--color-green)',
-					blue: 'var(--color-blue)',
-					purple: 'var(--color-purple)',
-					highlight: 'var(--color-brand-highlight)',
-					shadow: 'var(--color-brand-shadow)',
-					inverted: 'var(--color-accent-contrast)',
-				},
-				tabUnderlineHovered: 'var(--tab-underline-hovered)',
-				button: {
-					bg: 'var(--color-button-bg)',
-					text: 'var(--color-button-text)',
-					bgHover: 'var(--color-button-bg-hover)',
-					textHover: 'var(--color-button-text-hover)',
-					bgActive: 'var(--color-button-bg-active)',
-					textActive: 'var(--color-button-text-active)',
-					border: 'var(--color-button-border)',
-					bgSelected: 'var(--color-button-bg-selected)',
-					textSelected: 'var(--color-button-text-selected)',
-				},
-				toggleHandle: 'var(--color-toggle-handle)',
-				dropdown: {
-					bg: 'var(--color-dropdown-bg)',
-					text: 'var(--color-dropdown-text)',
-				},
-				tooltip: {
-					bg: 'var(--color-tooltip-bg)',
-					text: 'var(--color-tooltip-text)',
-				},
-				code: {
-					bg: 'var(--color-code-bg)',
-					text: 'var(--color-code-text)',
-				},
-				kbdShadow: 'var(--color-kbd-shadow)',
-				ad: {
-					DEFAULT: 'var(--color-ad)',
-					raised: 'var(--color-ad-raised)',
-					contrast: 'var(--color-ad-contrast)',
-					highlight: 'var(--color-ad-highlight)',
-				},
-				greyLink: {
-					DEFAULT: 'var(--color-grey-link)',
-					hover: 'var(--color-grey-link-hover)',
-					active: 'var(--color-grey-link-active)',
-				},
-				link: {
-					DEFAULT: 'var(--color-link)',
-					hover: 'var(--color-link-hover)',
-					active: 'var(--color-link-active)',
-				},
-				warning: {
-					bg: 'var(--color-warning-bg)',
-					text: 'var(--color-warning-text)',
-					banner: {
-						text: 'var(--color-warning-banner-text)',
-						bg: 'var(--color-warning-banner-bg)',
-						side: 'var(--color-warning-banner-side)',
-					},
-				},
-				infoBanner: {
-					text: 'var(--color-info-banner-text)',
-					bg: 'var(--color-info-banner-bg)',
-					side: 'var(--color-info-banner-side)',
-				},
-				blockQuote: 'var(--color-block-quote)',
-				headerUnderline: 'var(--color-header-underline)',
-				hr: 'var(--color-hr)',
-				table: {
-					border: 'var(--color-table-border)',
-					alternateRow: ' var(--color-table-alternate-row)',
-				},
-			},
-			backgroundImage: {
-				mazeBg: 'var(--landing-maze-bg)',
-				mazeGradientBg: 'var(--landing-maze-gradient-bg)',
-				// @ts-ignore
-				landing: {
-					mazeOuterBg: 'var(--landing-maze-outer-bg)',
-					colorHeading: 'var(--landing-color-heading)',
-					colorSubheading: 'var(--landing-color-subheading)',
-					transitionGradientStart: 'var(--landing-transition-gradient-start)',
-					transitionGradientEnd: 'var(--landing-transition-gradient-end)',
-					hoverCardGradient: 'var(--landing-hover-card-gradient)',
-					borderGradient: 'var(--landing-border-gradient)',
-					borderColor: 'var(--landing-border-color)',
-					creatorGradient: 'var(--landing-creator-gradient)',
-					blobGradient: 'var(--landing-blob-gradient)',
-					cardBg: 'var(--landing-card-bg)',
-					blueLabel: 'var(--landing-blue-label)',
-					blueLabelBg: 'var(--landing-blue-label-bg)',
-					greenLabel: 'var(--landing-green-label)',
-					greenLabelBg: 'var(--landing-green-label-bg)',
-					rawBg: 'var(--landing-raw-bg)',
-				},
-			},
-		},
-	},
-	plugins: [],
-	corePlugins: {
-		preflight: false,
-	},
+	presets: [preset],
 }
 
 export default config
diff --git a/packages/tooling-config/package.json b/packages/tooling-config/package.json
index e4e7c66f8..0839c1578 100644
--- a/packages/tooling-config/package.json
+++ b/packages/tooling-config/package.json
@@ -14,12 +14,14 @@
 		"./prettier.config.cjs": "./prettier.config.cjs",
 		"./frontend.prettier.config.cjs": "./frontend.prettier.config.cjs",
 		"./app-lib.prettier.config.cjs": "./app-lib.prettier.config.cjs",
-		"./labrinth.prettier.config.cjs": "./labrinth.prettier.config.cjs"
+		"./labrinth.prettier.config.cjs": "./labrinth.prettier.config.cjs",
+		"./tailwind/*": "./tailwind/*"
 	},
 	"files": [
 		"eslint/",
 		"typescript/",
 		"prettier/",
+		"tailwind/",
 		"index.js"
 	],
 	"peerDependencies": {
diff --git a/packages/ui/tailwind-preset.js b/packages/tooling-config/tailwind/tailwind-preset.ts
similarity index 96%
rename from packages/ui/tailwind-preset.js
rename to packages/tooling-config/tailwind/tailwind-preset.ts
index f73ed47d3..3c6ca2a69 100644
--- a/packages/ui/tailwind-preset.js
+++ b/packages/tooling-config/tailwind/tailwind-preset.ts
@@ -1,14 +1,6 @@
-module.exports = {
-	content: [
-		'./src/components/**/*.{js,vue,ts}',
-		'./src/layouts/**/*.vue',
-		'./src/pages/**/*.vue',
-		'./src/plugins/**/*.{js,ts}',
-		'./src/app.vue',
-		'./src/error.vue',
-		// monorepo - TODO: migrate this to its own package
-		'../../packages/**/*.{js,vue,ts}',
-	],
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
 	theme: {
 		extend: {
 			colors: {
@@ -265,3 +257,5 @@ module.exports = {
 		preflight: false,
 	},
 }
+
+export default config
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
deleted file mode 100644
index 1160b1825..000000000
--- a/packages/ui/tailwind.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	content: ['./tailwind-preset.js'],
-	presets: [require('./tailwind-preset.js')],
-}
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
new file mode 100644
index 000000000..5ee87de44
--- /dev/null
+++ b/packages/ui/tailwind.config.ts
@@ -0,0 +1,9 @@
+import preset from '@modrinth/tooling-config/tailwind/tailwind-preset.ts'
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+	content: ['./src/components/**/*.{js,vue,ts}', './src/pages/**/*.{js,vue,ts}'],
+	presets: [preset],
+}
+
+export default config