From 1f640fda5e8601a2f27c6742f9516e15c569e11c Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 6 Oct 2022 07:42:45 +0800
Subject: [PATCH] [portal] fix Tailwind style ordering issue

---
 apps/portal/postcss.config.cjs  | 9 +--------
 apps/portal/src/pages/_app.tsx  | 1 -
 apps/portal/src/pages/index.tsx | 2 +-
 apps/portal/tailwind.config.cjs | 9 +++++++++
 4 files changed, 11 insertions(+), 10 deletions(-)
 create mode 100644 apps/portal/tailwind.config.cjs

diff --git a/apps/portal/postcss.config.cjs b/apps/portal/postcss.config.cjs
index c099299a..12a703d9 100644
--- a/apps/portal/postcss.config.cjs
+++ b/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
-    // here to share the same config across the entire monorepo
-    tailwindcss: { config },
+    tailwindcss: {},
     autoprefixer: {},
   },
 };
diff --git a/apps/portal/src/pages/_app.tsx b/apps/portal/src/pages/_app.tsx
index bd05dbec..5de4ac99 100644
--- a/apps/portal/src/pages/_app.tsx
+++ b/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 }> = ({
diff --git a/apps/portal/src/pages/index.tsx b/apps/portal/src/pages/index.tsx
index 9d39e2db..2d3ab330 100644
--- a/apps/portal/src/pages/index.tsx
+++ b/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" />
diff --git a/apps/portal/tailwind.config.cjs b/apps/portal/tailwind.config.cjs
new file mode 100644
index 00000000..fab7a40d
--- /dev/null
+++ b/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}'],
+};