这是indexloc提供的服务，不要输入任何密码
Skip to content

Examples fast follows #1526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 13, 2022
Merged

Examples fast follows #1526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a3c5a7f
chore(examples): update tailwind ui build
tknickman Jul 13, 2022
95ba4a4
chore(examples): update prisma readme
tknickman Jul 13, 2022
2f6e46f
update tailwind ui docs
tknickman Jul 13, 2022
e794799
fix css capitalization
tknickman Jul 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/with-prisma/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion examples/with-prisma/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"private": true,
"packageManager": "pnpm@7",
"workspaces": [
"apps/*",
"packages/*"
Expand Down
17 changes: 17 additions & 0 deletions examples/with-tailwind/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
0 ...es/with-tailwind/apps/docs/pages/_app.tsx → ...ith-tailwind/apps/docs/src/pages/_app.tsx
View file
Open in desktop
File renamed without changes.
0 ...th-tailwind/apps/docs/pages/_document.tsx → ...ailwind/apps/docs/src/pages/_document.tsx
View file
Open in desktop
File renamed without changes.
0 ...s/with-tailwind/apps/docs/pages/index.tsx → ...th-tailwind/apps/docs/src/pages/index.tsx
View file
Open in desktop
File renamed without changes.
0 ...ith-tailwind/apps/docs/styles/globals.css → ...tailwind/apps/docs/src/styles/globals.css
View file
Open in desktop
File renamed without changes.
0 ...les/with-tailwind/apps/web/pages/_app.tsx → ...with-tailwind/apps/web/src/pages/_app.tsx
View file
Open in desktop
File renamed without changes.
0 ...ith-tailwind/apps/web/pages/_document.tsx → ...tailwind/apps/web/src/pages/_document.tsx
View file
Open in desktop
File renamed without changes.
0 ...es/with-tailwind/apps/web/pages/index.tsx → ...ith-tailwind/apps/web/src/pages/index.tsx
View file
Open in desktop
File renamed without changes.
0 ...with-tailwind/apps/web/styles/globals.css → ...-tailwind/apps/web/src/styles/globals.css
View file
Open in desktop
File renamed without changes.
4 changes: 3 additions & 1 deletion examples/with-tailwind/packages/tailwind-config/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ const colors = require("tailwindcss/colors");
module.exports = {
content: [
// app content
`./**/*.{js,ts,jsx,tsx}`,
`src/**/*.{js,ts,jsx,tsx}`,
// include packages if not transpiling
// "../../packages/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
Expand Down
11 changes: 3 additions & 8 deletions examples/with-tailwind/packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is incorrect imho. The tailwind styles compilation should be moved into the next.js apps and compiled at the end at the last mile in JIT. Should not need this interim step

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead, make the next.js app's tailwind config aware that ui package needs to be included in scanning content array

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Offline conversation conclusion:

  • We enforce isolation so that we don't encourage people to build a yolorepo based upon the example.
  • We document how to bend the rules in order to get the last few bits of available performance.

Copy link
Member Author

@tknickman tknickman Jul 13, 2022 •
edited by nathanhammond
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this was a debate when I wrote it. I originally did it how you (@jaredpalmer) suggested.

The main problem here is that you end up with tailwind configs everywhere that are repetitive / verbose. You could share one, but then you're hardcoding your package paths and you get their styles at build time whether you're actually using them or not.

This way lets you share one tailwind config (great if you're using a lot of custom styles) and always get only the styles you're using.

That being said. If you know all your apps are always going to be consuming the ui package, I would skip the ui build step and update the tailwind config to be aware of your ui package.

Will update the docs to detail this case.

"clean": "rm -rf dist"
},
"devDependencies": {
Expand All @@ -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"
Expand Down