4 files changed, 13 insertions, 23 deletions
diff --git a/packages/ui/style/index.js b/packages/ui/style/index.ts
index 423b033..423b033 100644
--- a/packages/ui/style/index.js
+++ b/packages/ui/style/index.ts
diff --git a/packages/ui/style/postcss.config.js b/packages/ui/style/postcss.config.js
deleted file mode 100644
index 0b6eba2..0000000
--- a/packages/ui/style/postcss.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('../postcss.config');
diff --git a/packages/ui/style/postcss.ts b/packages/ui/style/postcss.ts
new file mode 100644
index 0000000..60d0ac7
--- /dev/null
+++ b/packages/ui/style/postcss.ts
@@ -0,0 +1 @@
+export { default } from '../postcss.config';
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.ts
index 8ebf041..73c8fc7 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.ts
@@ -1,20 +1,16 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
+import type { Config } from 'tailwindcss';
 
-/** @type {(varName: string) => string} */
-// eslint-disable-next-line unused-imports/no-unused-vars
-const alpha = varName => `hsla(var(${varName}), <alpha-value>)`;
-const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
+import forms from '@tailwindcss/forms';
+import typography from '@tailwindcss/typography';
+import headlessui from '@headlessui/tailwindcss';
+import animate from 'tailwindcss-animate';
+import radix from 'tailwindcss-radix';
 
-// TODO: make this not CJS
+export const alpha = (varName: string) => `hsla(var(${varName}), <alpha-value>)`;
+export const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
 
-/**
- * @param {string} app
- * @param {import('tailwindcss').Config} options
- * @returns {import('tailwindcss').Config} the tailwind config
- */
-module.exports = (app, options) => {
-	/** @type {import('tailwindcss').Config} */
-	const config = {
+export default async (app: string, options?: Config): Promise<Config> => {
+	const config: Config = {
 		content: [
 			`../../apps/${app}/src/**/*.${contentExts}`,
 			`../../packages/*/src/**/*.${contentExts}`,
@@ -28,7 +24,6 @@ module.exports = (app, options) => {
 				md: '868px',
 				lg: '1024px',
 				xl: '1280px',
-				...defaultTheme.screens,
 			},
 			fontSize: {
 				'xs': '12px',
@@ -108,18 +103,13 @@ module.exports = (app, options) => {
 				},
 			},
 		},
-		plugins: [
-			require('@tailwindcss/forms'),
-			require('tailwindcss-animate'),
-			require('@headlessui/tailwindcss'),
-			require('tailwindcss-radix')(),
-		],
+		plugins: [forms, animate, headlessui, radix],
 
 		...options,
 	};
 
 	if (app === 'website')
-		config.plugins.push(require('@tailwindcss/typography'));
+		config.plugins!.push(typography);
 
 	return config;
 };