feat(example): tailwind improvement and treeshaking (vercel#3557)

Tailwind example improvements: * Enable treeshaking by bundling to esm instead of cjs * Prefix UI classes to avoid app conflicts * Use tsup to bundle css instead of tailwindcss * Write new `Card` component to demo bundle size difference between web / docs
caxon · Feb 1, 2023 · 8fffaf9 · 8fffaf9
1 parent 8632812
commit 8fffaf9
Show file tree

Hide file tree

Showing 11 changed files with 181 additions and 196 deletions.
diff --git a/examples/with-tailwind/apps/docs/src/pages/index.tsx b/examples/with-tailwind/apps/docs/src/pages/index.tsx
@@ -6,15 +6,14 @@ export default function Home() {
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
       <Head>
         <title>Docs - Turborepo Example</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <main className="mx-auto w-auto px-4 pt-16 pb-8 sm:pt-24 lg:px-8">
-        <h1 className="mx-auto max-w-5xl text-center text-6xl font-extrabold leading-[1.1] tracking-tighter text-white sm:text-7xl lg:text-8xl xl:text-8xl">
-          Docs <br className="hidden lg:block" />
-          <span className="inline-block bg-gradient-to-r from-red-500 to-blue-500 bg-clip-text text-transparent ">
+        <h1 className="mx-auto text-center text-6xl font-extrabold tracking-tight text-white sm:text-7xl lg:text-8xl xl:text-8xl">
+          Docs
+          <span className="block bg-gradient-to-r from-brandred to-brandblue bg-clip-text text-transparent px-2">
             Turborepo Example
-          </span>{" "}
+          </span>
         </h1>
         <div className="mx-auto mt-5 max-w-xl sm:flex sm:justify-center md:mt-8">
           <Button />

diff --git a/examples/with-tailwind/apps/web/src/pages/index.tsx b/examples/with-tailwind/apps/web/src/pages/index.tsx
@@ -1,24 +1,47 @@
 import Head from "next/head";
-import { Button } from "ui";
+import { Button, Card } from "ui";
+
+const CARD_CONTENT = [
+  {
+    title: "Caching Tasks",
+    href: "https://turbo.build/repo/docs/core-concepts/caching",
+    cta: "Read More",
+  },
+  {
+    title: "Running Tasks",
+    href: "https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks",
+    cta: "Read More",
+  },
+  {
+    title: "Configuration Options",
+    href: "https://turbo.build/repo/docs/reference/configuration",
+    cta: "Read More",
+  },
+];
 
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
       <Head>
         <title>Web - Turborepo Example</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <main className="mx-auto w-auto px-4 pt-16 pb-8 sm:pt-24 lg:px-8">
-        <h1 className="mx-auto max-w-5xl text-center text-6xl font-extrabold leading-[1.1] tracking-tighter text-white sm:text-7xl lg:text-8xl xl:text-8xl">
-          Web <br className="hidden lg:block" />
-          <span className="inline-block bg-gradient-to-r from-brandred to-brandblue bg-clip-text text-transparent">
+        <h1 className="mx-auto text-center text-6xl font-extrabold tracking-tight text-white sm:text-7xl lg:text-8xl xl:text-8xl">
+          Web
+          <span className="block bg-gradient-to-r from-brandred to-brandblue bg-clip-text text-transparent px-2">
             Turborepo Example
-          </span>{" "}
+          </span>
         </h1>
         <div className="mx-auto mt-5 max-w-xl sm:flex sm:justify-center md:mt-8">
           <Button />
         </div>
+
+        <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-4 place-content-evenly">
+          {CARD_CONTENT.map((card) => (
+            <Card key={card.title} {...card} />
+          ))}
+        </div>
       </main>
     </div>
   );

diff --git a/examples/with-tailwind/packages/ui/package.json b/examples/with-tailwind/packages/ui/package.json
@@ -1,27 +1,28 @@
 {
   "name": "ui",
   "version": "0.0.0",
-  "main": "./dist/index.js",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist",
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/index.css"
   },
   "license": "MIT",
   "scripts": {
-    "build": "tsup src/index.tsx --format esm,cjs --dts --external react && tailwindcss -i ./src/styles.css -o ./dist/styles.css",
-    "dev": "concurrently \"tsup src/index.tsx --format esm,cjs --dts --external react --watch\" \"tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch\"",
-    "clean": "rm -rf dist"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
   },
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "concurrently": "^7.2.2",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
+    "postcss": "^8.4.20",
     "react": "^18.2.0",
     "tailwind-config": "workspace:*",
-    "tailwindcss": "^3.2.4",
     "tsconfig": "workspace:*",
     "tsup": "^6.1.3",
     "typescript": "^4.9.4"

diff --git a/examples/with-tailwind/packages/ui/postcss.config.js b/examples/with-tailwind/packages/ui/postcss.config.js
@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/examples/with-tailwind/packages/ui/src/Button.tsx b/examples/with-tailwind/packages/ui/src/Button.tsx
@@ -4,9 +4,9 @@ export const Button = () => {
   return (
     <div className="rounded-md ">
       <a href="https://turbo.build/repo/docs">
-        <div className="flex w-full items-center justify-center rounded-md border border-transparent bg-black px-8 py-3 text-base font-medium text-white no-underline hover:bg-gray-700 dark:bg-white dark:text-black dark:hover:bg-gray-300 md:py-3 md:px-10 md:text-lg md:leading-6">
+        <div className="ui-flex ui-w-full ui-items-center ui-justify-center ui-rounded-md ui-border ui-border-transparent ui-px-8 ui-py-3 ui-text-base ui-font-medium ui-no-underline ui-bg-white ui-text-black hover:ui-bg-gray-300 md:ui-py-3 md:ui-px-10 md:ui-text-lg md:ui-leading-6">
           Read the docs
-          <span className="ml-2 bg-gradient-to-r from-brandred to-brandblue bg-clip-text text-transparent">
+          <span className="ui-ml-2 ui-bg-gradient-to-r ui-from-brandred ui-to-brandblue ui-bg-clip-text ui-text-transparent">
             →
           </span>
         </div>

diff --git a/examples/with-tailwind/packages/ui/src/Card.tsx b/examples/with-tailwind/packages/ui/src/Card.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export const Card = ({
+  title,
+  cta,
+  href,
+}: {
+  title: string;
+  cta: string;
+  href: string;
+}) => {
+  return (
+    <a
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+      className="ui-group ui-mt-4 ui-rounded-lg ui-border ui-border-transparent ui-overflow-hidden ui-bg-origin-border ui-bg-gradient-to-r ui-from-brandred ui-to-brandblue ui-text-[#6b7280]"
+    >
+      <div className="ui-p-4 ui-bg-zinc-900 ui-h-full">
+        <p className="ui-inline-block ui-text-xl ui-text-white">{title}</p>
+        <div className="ui-text-xs ui-mt-4 group-hover:ui-underline">
+          {cta} →
+        </div>
+      </div>
+    </a>
+  );
+};
diff --git a/examples/with-tailwind/packages/ui/src/index.tsx b/examples/with-tailwind/packages/ui/src/index.tsx
@@ -1,2 +1,8 @@
 import * as React from "react";
+
+// styles
+import "./styles.css";
+
+// components
 export * from "./Button";
+export * from "./Card";
diff --git a/examples/with-tailwind/packages/ui/tailwind.config.js b/examples/with-tailwind/packages/ui/tailwind.config.js
@@ -1,3 +1,7 @@
-// tailwind config is required for editor support
+const sharedConfig = require("tailwind-config/tailwind.config.js");
 
-module.exports = require("tailwind-config/tailwind.config.js");
+module.exports = {
+  // prefix ui lib classes to avoid conflicting with the app
+  prefix: "ui-",
+  ...sharedConfig,
+};
diff --git a/examples/with-tailwind/packages/ui/tsup.config.ts b/examples/with-tailwind/packages/ui/tsup.config.ts
@@ -0,0 +1,13 @@
+import { defineConfig, Options } from "tsup";
+
+export default defineConfig((options: Options) => ({
+  treeshake: true,
+  splitting: true,
+  entry: ["src/**/*.tsx"],
+  format: ["esm"],
+  dts: true,
+  minify: true,
+  clean: true,
+  external: ["react", "react-dom"],
+  ...options,
+}));