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'),
-  ],
-};

apps/storybook/.gitignore

@@ -0,0 +1 @@
+storybook-static

apps/storybook/.storybook/preview.js

@@ -0,0 +1 @@
+import '@tih/ui/dist/styles.css';

apps/storybook/package.json

@@ -20,6 +20,7 @@
     "@storybook/addon-links": "^6.4.18",
     "@storybook/builder-vite": "^0.1.33",
     "@storybook/react": "^6.4.18",
+    "@tih/tailwind-config": "*",
     "@tih/tsconfig": "*",
     "@vitejs/plugin-react": "^1.3.2",
     "eslint-config-tih": "*",

apps/storybook/postcss.config.js

@@ -0,0 +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: {
+    // 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/storybook/stories/button.stories.tsx

@@ -0,0 +1,33 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from '@tih/ui';
+import React from 'react';
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const PrimaryButton = Template.bind({});
+
+PrimaryButton.args = {
+  label: 'Button text',
+  size: 'md',
+  variant: 'primary',
+};
+
+export const SecondaryButton = Template.bind({});
+
+SecondaryButton.args = {
+  label: 'Button text',
+  size: 'md',
+  variant: 'secondary',
+};