From a3c5a7f92ddb1f2a25d46c8e585e869e4573aae8 Mon Sep 17 00:00:00 2001 From: tknickman Date: Wed, 13 Jul 2022 14:33:27 -0400 Subject: [PATCH 1/4] chore(examples): update tailwind ui build --- .../with-tailwind/apps/docs/{ => src}/pages/_app.tsx | 0 .../apps/docs/{ => src}/pages/_document.tsx | 0 .../with-tailwind/apps/docs/{ => src}/pages/index.tsx | 0 .../apps/docs/{ => src}/styles/globals.css | 0 .../with-tailwind/apps/web/{ => src}/pages/_app.tsx | 0 .../apps/web/{ => src}/pages/_document.tsx | 0 .../with-tailwind/apps/web/{ => src}/pages/index.tsx | 0 .../apps/web/{ => src}/styles/globals.css | 0 .../packages/tailwind-config/tailwind.config.js | 2 +- examples/with-tailwind/packages/ui/package.json | 11 +++-------- 10 files changed, 4 insertions(+), 9 deletions(-) rename examples/with-tailwind/apps/docs/{ => src}/pages/_app.tsx (100%) rename examples/with-tailwind/apps/docs/{ => src}/pages/_document.tsx (100%) rename examples/with-tailwind/apps/docs/{ => src}/pages/index.tsx (100%) rename examples/with-tailwind/apps/docs/{ => src}/styles/globals.css (100%) rename examples/with-tailwind/apps/web/{ => src}/pages/_app.tsx (100%) rename examples/with-tailwind/apps/web/{ => src}/pages/_document.tsx (100%) rename examples/with-tailwind/apps/web/{ => src}/pages/index.tsx (100%) rename examples/with-tailwind/apps/web/{ => src}/styles/globals.css (100%) diff --git a/examples/with-tailwind/apps/docs/pages/_app.tsx b/examples/with-tailwind/apps/docs/src/pages/_app.tsx similarity index 100% rename from examples/with-tailwind/apps/docs/pages/_app.tsx rename to examples/with-tailwind/apps/docs/src/pages/_app.tsx diff --git a/examples/with-tailwind/apps/docs/pages/_document.tsx b/examples/with-tailwind/apps/docs/src/pages/_document.tsx similarity index 100% rename from examples/with-tailwind/apps/docs/pages/_document.tsx rename to examples/with-tailwind/apps/docs/src/pages/_document.tsx diff --git a/examples/with-tailwind/apps/docs/pages/index.tsx b/examples/with-tailwind/apps/docs/src/pages/index.tsx similarity index 100% rename from examples/with-tailwind/apps/docs/pages/index.tsx rename to examples/with-tailwind/apps/docs/src/pages/index.tsx diff --git a/examples/with-tailwind/apps/docs/styles/globals.css b/examples/with-tailwind/apps/docs/src/styles/globals.css similarity index 100% rename from examples/with-tailwind/apps/docs/styles/globals.css rename to examples/with-tailwind/apps/docs/src/styles/globals.css diff --git a/examples/with-tailwind/apps/web/pages/_app.tsx b/examples/with-tailwind/apps/web/src/pages/_app.tsx similarity index 100% rename from examples/with-tailwind/apps/web/pages/_app.tsx rename to examples/with-tailwind/apps/web/src/pages/_app.tsx diff --git a/examples/with-tailwind/apps/web/pages/_document.tsx b/examples/with-tailwind/apps/web/src/pages/_document.tsx similarity index 100% rename from examples/with-tailwind/apps/web/pages/_document.tsx rename to examples/with-tailwind/apps/web/src/pages/_document.tsx diff --git a/examples/with-tailwind/apps/web/pages/index.tsx b/examples/with-tailwind/apps/web/src/pages/index.tsx similarity index 100% rename from examples/with-tailwind/apps/web/pages/index.tsx rename to examples/with-tailwind/apps/web/src/pages/index.tsx diff --git a/examples/with-tailwind/apps/web/styles/globals.css b/examples/with-tailwind/apps/web/src/styles/globals.css similarity index 100% rename from examples/with-tailwind/apps/web/styles/globals.css rename to examples/with-tailwind/apps/web/src/styles/globals.css diff --git a/examples/with-tailwind/packages/tailwind-config/tailwind.config.js b/examples/with-tailwind/packages/tailwind-config/tailwind.config.js index 16dedaa9eebb3..357a57b4d9c04 100644 --- a/examples/with-tailwind/packages/tailwind-config/tailwind.config.js +++ b/examples/with-tailwind/packages/tailwind-config/tailwind.config.js @@ -3,7 +3,7 @@ const colors = require("tailwindcss/colors"); module.exports = { content: [ // app content - `./**/*.{js,ts,jsx,tsx}`, + `src/**/*.{js,ts,jsx,tsx}`, ], theme: { extend: { diff --git a/examples/with-tailwind/packages/ui/package.json b/examples/with-tailwind/packages/ui/package.json index 88670565db2fc..557c014850dac 100644 --- a/examples/with-tailwind/packages/ui/package.json +++ b/examples/with-tailwind/packages/ui/package.json @@ -9,12 +9,8 @@ }, "license": "MIT", "scripts": { - "build": "run-p \"build:*\"", - "dev": "run-p \"dev:*\"", - "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css", - "dev:styles": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch", - "build:source": "tsup src/index.tsx --format esm,cjs --dts --external react", - "dev:source": "tsup src/index.tsx --format esm,cjs --dts --external react --watch", + "build": "tsup src/index.tsx --format esm,cjs --dts --external react && tailwindcss -i ./src/styles.css -o ./dist/styles.css", + "dev": "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" }, "devDependencies": { @@ -23,10 +19,9 @@ "concurrently": "^7.2.2", "eslint": "^7.32.0", "eslint-config-custom": "*", - "npm-run-all": "^4.1.5", "react": "^17.0.2", - "tailwindcss": "^3.1.5", "tailwind-config": "*", + "tailwindcss": "^3.1.5", "tsconfig": "*", "tsup": "^6.1.3", "typescript": "^4.5.2" From 95ba4a4c4c3a46e42da94863519393e425e3d9d6 Mon Sep 17 00:00:00 2001 From: tknickman Date: Wed, 13 Jul 2022 14:33:55 -0400 Subject: [PATCH 2/4] chore(examples): update prisma readme --- examples/with-prisma/README.md | 2 +- examples/with-prisma/package.json | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/examples/with-prisma/README.md b/examples/with-prisma/README.md index 31037c9094bdd..0681aa58b490f 100644 --- a/examples/with-prisma/README.md +++ b/examples/with-prisma/README.md @@ -8,7 +8,7 @@ This turborepo includes the following packages/apps: ### Apps and Packages -- `web`: another [Next.js](https://nextjs.org) app +- `web`: a [Next.js](https://nextjs.org) app - `config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`) - `database`: [Prisma](https://prisma.io/) ORM wrapper to manage & access your database - `tsconfig`: `tsconfig.json`s used throughout the monorepo diff --git a/examples/with-prisma/package.json b/examples/with-prisma/package.json index ccc619d41ca78..f90b31e25c92e 100644 --- a/examples/with-prisma/package.json +++ b/examples/with-prisma/package.json @@ -1,6 +1,5 @@ { "private": true, - "packageManager": "pnpm@7", "workspaces": [ "apps/*", "packages/*" From 2f6e46f89578e829ec2b47162fd0e8e8c9ee14cf Mon Sep 17 00:00:00 2001 From: tknickman Date: Wed, 13 Jul 2022 15:23:49 -0400 Subject: [PATCH 3/4] update tailwind ui docs --- examples/with-tailwind/README.md | 17 +++++++++++++++++ .../packages/tailwind-config/tailwind.config.js | 2 ++ 2 files changed, 19 insertions(+) diff --git a/examples/with-tailwind/README.md b/examples/with-tailwind/README.md index 578ae77c3ff7e..a48159e1afd18 100644 --- a/examples/with-tailwind/README.md +++ b/examples/with-tailwind/README.md @@ -16,6 +16,23 @@ This Turborepo includes the following packages/apps: Each package/app is 100% [TypeScript](https://www.typescriptlang.org/). +### Building packages/ui + +This example is setup to build `packages/ui` and output the transpiled source and compiled styles to `dist/`. This was chosen to make sharing one `tailwind.config.js` as easy as possible, and to ensure only the css that is used by the current application and its dependencies is generated. + +Another option is to consume `packages/ui` directly from source without building. If using this option, you will need to update your `tailwind.config.js` to be aware of your package locations, so it can find all usages of the `tailwindcss` class names. + +For example, in [tailwind.config.js](packages/tailwind-config/tailwind.config.js): + +```js + content: [ + // app content + `src/**/*.{js,ts,jsx,tsx}`, + // include packages if not transpiling + "../../packages/**/*.{js,ts,jsx,tsx}", + ], +``` + ### Utilities This Turborepo has some additional tools already setup for you: diff --git a/examples/with-tailwind/packages/tailwind-config/tailwind.config.js b/examples/with-tailwind/packages/tailwind-config/tailwind.config.js index 357a57b4d9c04..c0f237b5c67ea 100644 --- a/examples/with-tailwind/packages/tailwind-config/tailwind.config.js +++ b/examples/with-tailwind/packages/tailwind-config/tailwind.config.js @@ -4,6 +4,8 @@ module.exports = { content: [ // app content `src/**/*.{js,ts,jsx,tsx}`, + // include packages if not transpiling + // "../../packages/**/*.{js,ts,jsx,tsx}", ], theme: { extend: { From e7947999356fbc2bd7e3fa1dded519f367e1086e Mon Sep 17 00:00:00 2001 From: tknickman Date: Wed, 13 Jul 2022 15:28:56 -0400 Subject: [PATCH 4/4] fix css capitalization --- examples/with-tailwind/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-tailwind/README.md b/examples/with-tailwind/README.md index a48159e1afd18..fbf7f8f93079d 100644 --- a/examples/with-tailwind/README.md +++ b/examples/with-tailwind/README.md @@ -18,7 +18,7 @@ Each package/app is 100% [TypeScript](https://www.typescriptlang.org/). ### Building packages/ui -This example is setup to build `packages/ui` and output the transpiled source and compiled styles to `dist/`. This was chosen to make sharing one `tailwind.config.js` as easy as possible, and to ensure only the css that is used by the current application and its dependencies is generated. +This example is setup to build `packages/ui` and output the transpiled source and compiled styles to `dist/`. This was chosen to make sharing one `tailwind.config.js` as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated. Another option is to consume `packages/ui` directly from source without building. If using this option, you will need to update your `tailwind.config.js` to be aware of your package locations, so it can find all usages of the `tailwindcss` class names.