Add Tailwind and Shadcn

.eslintignore

@@ -5,6 +5,8 @@ config/**
 coverage/**
 scripts/**
 
+tailwind.config.js
+*.css
 Dockerfile
 LICENSE
 *.lock

.eslintrc.js

@@ -46,7 +46,7 @@ module.exports = {
           // Packages, `react` related packages come first.
           ['^react', '^@?\\w'],
           // Internal packages
-          ['^(@|constants|components|data|graphql|hooks|img|pages|search|types|utils)(/.*|$)'],
+          ['^(@|constants|components|data|graphql|hooks|img|lib|pages|search|types|utils)(/.*|$)'],
           // Side effect imports
           ['^\\u0000'],
           // Parent imports, put `..` last

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "components",
+    "utils": "lib/utils",
+    "ui": "components/ui",
+    "lib": "lib",
+    "hooks": "hooks"
+  }
+}

config/webpack.config.js

@@ -94,6 +94,10 @@ module.exports = function(webpackEnv) {
             // https://github.com/facebook/create-react-app/issues/2677
             ident: 'postcss',
             plugins: [
+              // Tailwind must run first so `@tailwind` directives are expanded
+              // before postcss-preset-env applies autoprefixing. Reads
+              // tailwind.config.js from the project root.
+              require('tailwindcss'),
               require('postcss-preset-env')({
                 autoprefixer: {
                   flexbox: 'no-2009',
@@ -329,6 +333,16 @@ module.exports = function(webpackEnv) {
       rules: [
         // Disable require.ensure as it's not a standard language feature.
         { parser: { requireEnsure: false } },
+        // Webpack 4 parses `.mjs` as strict ESM (`javascript/esm`), which
+        // forbids named imports from CommonJS modules. Some deps (e.g.
+        // @radix-ui/react-slot used by shadcn/ui) ship `.mjs` that does
+        // `import { Children } from 'react'` — and React is CJS. Treating
+        // node_modules `.mjs` as `javascript/auto` enables loose interop.
+        {
+          test: /\.mjs$/,
+          include: /node_modules/,
+          type: 'javascript/auto',
+        },
 
         // First, run the linter.
         // It's important to do this before Babel processes the JS.

package.json

@@ -10,6 +10,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.12.0",
     "@fortawesome/react-fontawesome": "^0.1.8",
     "@loadable/component": "^5.12.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@sentry/cli": "^2.42.2",
     "@sentry/react": "8.2.0",
     "@svgr/webpack": "4.3.3",
@@ -28,6 +29,8 @@
     "babel-preset-react-app": "^9.1.2",
     "camelcase": "^5.3.1",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "css-loader": "3.4.2",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
@@ -92,6 +95,7 @@
     "style-loader": "0.23.1",
     "styled-components": "^5.1.1",
     "styled-components-breakpoint": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
     "terser-webpack-plugin": "2.3.5",
     "tippy.js": "^6.2.5",
     "ts-pnp": "1.1.6",
@@ -147,6 +151,7 @@
     "@types/styled-components": "^5.1.0",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "autoprefixer": "^10.4.19",
     "babel-plugin-styled-components": "^1.10.6",
     "browserslist": "4.25.4",
     "eslint": "^7.1.0",
@@ -163,6 +168,8 @@
     "lint-staged": "^10.2.2",
     "prettier": "^2.0.5",
     "source-map-loader": "^0.2.4",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
     "ts-loader": "^7.0.2",
     "typescript": "4.9.5",
     "worker-loader": "^2.0.0"

src/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, VariantProps } from 'class-variance-authority';
+
+import { cn } from 'lib/utils';
+
+// Variants use the GlobalTheme-derived Tailwind tokens (see tailwind.config.js)
+// rather than shadcn's semantic CSS variables, matching this project's palette.
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-white hover:bg-primaryDark',
+        destructive: 'bg-red text-white hover:bg-darkRed',
+        outline: 'border border-light3 bg-white text-dark1 hover:bg-light1',
+        secondary: 'bg-light2 text-dark1 hover:bg-light3',
+        ghost: 'text-dark1 hover:bg-light1',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded px-3',
+        lg: 'h-11 rounded px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

src/index.css

@@ -0,0 +1,11 @@
+/*
+ * Tailwind CSS entrypoint.
+ *
+ * Utilities are layered on top of the app's existing reset (public/index.css)
+ * and styled-components styles. Tailwind's preflight is disabled in
+ * tailwind.config.js, so `@tailwind base` is effectively a no-op here but is
+ * kept so future `@layer base { ... }` additions work as expected.
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.tsx

@@ -17,6 +17,8 @@ import SearchProvider from 'search/SearchProvider';
 
 import './sentry';
 
+import './index.css';
+
 const StartApp = () => {
   const store = configureStore();
   const container = document.getElementById('root');

src/lib/utils.ts

@@ -0,0 +1,10 @@
+import { ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge class names with Tailwind-aware conflict resolution.
+ * Used by shadcn/ui components and any Tailwind-styled component.
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

tailwind.config.js

@@ -0,0 +1,57 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  // The app ships its own CSS reset in public/index.css
+  // (`* { box-sizing: border-box; margin: 0; padding: 0 }`, button/anchor
+  // resets, etc.), so Tailwind's preflight is disabled to avoid double-
+  // resetting and altering the existing styled-components UI.
+  corePlugins: {
+    preflight: false,
+  },
+  theme: {
+    extend: {
+      // Mirrors src/constants/GlobalTheme.tsx so styled-components and Tailwind
+      // share a single palette. Keep these two files in sync.
+      colors: {
+        primary: '#0052cc',
+        primaryDark: '#0747a6',
+        primaryExtraDark: '#042049',
+        courses: '#ff8b00',
+        professors: '#36b37e',
+        accent: '#ffc400',
+        accentDark: '#e8b300',
+
+        dark1: '#172b4d',
+        dark2: '#505f79',
+        dark3: '#97a0af',
+
+        light1: '#f4f5f7',
+        light2: '#ebecf0',
+        light3: '#dfe1e5',
+        light4: '#c6c9c9',
+
+        lecture: '#b3d4ff',
+        lab: '#b3f3ff',
+        tutorial: '#c0b6f2',
+
+        white: '#ffffff',
+        red: '#ff5630',
+        darkRed: '#de350b',
+
+        google: '#4285f4',
+        facebook: '#3c5a99',
+
+        transparent: 'rgba(0, 0, 0, 0)',
+      },
+      // Mirrors GlobalTheme.breakpoints (min-width). `zero` (0) is the base, so
+      // it is intentionally omitted as a Tailwind screen.
+      screens: {
+        mobileLarge: '600px',
+        tablet: '800px',
+        desktop: '1200px',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};