[portal] fix Tailwind style ordering issue

apps/portal/postcss.config.cjs

@@ -1,13 +1,6 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-const config = require('@tih/tailwind-config/tailwind.config.js');
-
 module.exports = {
   plugins: {
-    // Specifying the config is not necessary in most cases, but it is included
+    tailwindcss: {},
-    // here to share the same config across the entire monorepo
-    tailwindcss: { config },
     autoprefixer: {},
   },
 };

apps/portal/src/pages/_app.tsx

@@ -11,7 +11,6 @@ import AppShell from '~/components/global/AppShell';
 
 import type { AppRouter } from '~/server/router';
 
-import '@tih/ui/styles.css';
 import '~/styles/globals.css';
 
 const MyApp: AppType<{ session: Session | null }> = ({

apps/portal/src/pages/index.tsx

@@ -5,7 +5,7 @@ export default function HomePage() {
     <main className="flex-1 overflow-y-auto">
       <div className="flex h-full items-center justify-center">
         <div>
-          <h1 className="text-center text-4xl font-bold text-red-600">
+          <h1 className="text-primary-600 text-center text-4xl font-bold">
             Homepage
           </h1>
           <Button label="Button text" size="md" variant="primary" />

apps/portal/tailwind.config.cjs

@@ -0,0 +1,9 @@
+const config = require('@tih/tailwind-config/tailwind.config.js');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  ...config,
+  // Extract styles from ui package instead of importing the ui package's generated CSS
+  // file as the importing approach runs into style ordering issues.
+  content: [...config.content, './../../packages/ui/src/**/*.{ts,tsx}'],
+};