ui: share tailwind config across packages

apps/portal/package.json

@@ -30,10 +30,7 @@
     "zod": "^3.18.0"
   },
   "devDependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/line-clamp": "^0.4.2",
-    "@tailwindcss/typography": "^0.5.7",
+    "@tih/tailwind-config": "*",
     "@tih/tsconfig": "*",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.21",
@@ -42,7 +39,6 @@
     "postcss": "^8.4.16",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "prisma": "^4.4.0",
-    "tailwindcss": "^3.1.8",
     "typescript": "4.8.3"
   },
   "ct3aMetadata": {

apps/portal/postcss.config.cjs

@@ -1,6 +1,13 @@
+// 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: {
-    tailwindcss: {},
+    // 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 },
     autoprefixer: {},
   },
 };

apps/portal/src/pages/_app.tsx

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

apps/portal/src/pages/index.tsx

@@ -1,8 +1,16 @@
+import { Button, CounterButton } from '@tih/ui';
+
 export default function HomePage() {
   return (
     <main className="flex-1 overflow-y-auto">
       <div className="flex h-full items-center justify-center">
-        <h1 className="text-center font-bold text-4xl">Homepage</h1>
+        <div>
+          <h1 className="text-center text-4xl font-bold text-red-600">
+            Homepage
+          </h1>
+          <CounterButton />
+          <Button label="Button text" size="md" variant="primary" />
+        </div>
       </div>
     </main>
   );

apps/portal/tailwind.config.cjs

@@ -1,23 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-const colors = require('tailwindcss/colors');
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx,md,mdx}'],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
-      },
-      colors: {
-        primary: colors.purple,
-      },
-    },
-  },
-  plugins: [
-    require('@tailwindcss/aspect-ratio'),
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/line-clamp'),
-    require('@tailwindcss/typography'),
-  ],
-};