Skip to content
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

Jump to bottom

Clean up styles in with-tailwindcss example #12458

Merged
merged 1 commit into from
May 3, 2020
Merged

Clean up styles in with-tailwindcss example #12458

merged 1 commit into from
May 3, 2020

Conversation

taylorbryant
Copy link
Contributor

As many PRs as I've done against the with-tailwindcss example, I've never actually looked at the styles. I took a look and noticed a few small things.

This PR:

  • Updates the Nav component to use Tailwind's new space-* utilities
  • Cleans up the .title and .hero classes by removing unnecessary styles and replacing CSS properties with Tailwind utilities where possible
  • Removes unused .description class
  • Inlines .btn-blue class instead of breaking it out into button.css
  • As recommended in the Tailwind CSS docs, moves the custom styles before @tailwind utilities

@taylorbryant taylorbryant requested review from lfades and Timer as code owners May 3, 2020 22:59
taylorbryant
taylorbryant commented May 3, 2020
View reviewed changes
examples/with-tailwindcss/styles/index.css
Comment on lines -13 to -14
margin: 0;
width: 100%;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@tailwind base resets the margin on heading elements, so margin: 0 isn't necessary. Removing width: 100% had no effect, so I kept it out.

@ijjk
Copy link
Member

ijjk commented May 3, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
buildDuration 11.4s 11.4s ⚠️ +40ms
nodeModulesSize 57.5 MB 57.5 MB ✓
Page Load Tests Overall increase ✓
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.885 1.892 ⚠️ +0.01
/ avg req/sec 1326.11 1321.45 -4.66
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.128 1.057 -0.07
/error-in-render avg req/sec 2216.43 2364.37 ⚠️ +147.94
Client Bundles (main, webpack, commons)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.js gzip 6.28 kB 6.28 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.HASH.js gzip 39.2 kB 39.2 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.module.js gzip 4.82 kB 4.82 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB ✓
framework.HA..dule.js gzip 39.2 kB 39.2 kB ✓
Overall change 51.7 kB 51.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.js gzip 1.23 kB 1.23 kB ✓
_error.js gzip 3.13 kB 3.13 kB ✓
hooks.js gzip 663 B 663 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.06 kB 2.06 kB ✓
routerDirect.js gzip 280 B 280 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.86 kB 7.86 kB ✓
Client Pages Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.module.js gzip 598 B 598 B ✓
_error.module.js gzip 2.09 kB 2.09 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 279 B 279 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
index.html gzip 927 B 927 B ✓
link.html gzip 936 B 936 B ✓
withRouter.html gzip 925 B 925 B ✓
Overall change 2.79 kB 2.79 kB ✓
Serverless Mode
General
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
buildDuration 12.1s 12.2s ⚠️ +63ms
nodeModulesSize 57.5 MB 57.5 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.js gzip 6.28 kB 6.28 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.HASH.js gzip 39.2 kB 39.2 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.module.js gzip 4.82 kB 4.82 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB ✓
framework.HA..dule.js gzip 39.2 kB 39.2 kB ✓
Overall change 51.7 kB 51.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.js gzip 1.23 kB 1.23 kB ✓
_error.js gzip 3.13 kB 3.13 kB ✓
hooks.js gzip 663 B 663 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.06 kB 2.06 kB ✓
routerDirect.js gzip 280 B 280 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.86 kB 7.86 kB ✓
Client Pages Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.module.js gzip 598 B 598 B ✓
_error.module.js gzip 2.09 kB 2.09 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 279 B 279 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_error.js 853 kB 853 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.81 kB 3.81 kB ✓
index.js 853 kB 853 kB ✓
link.js 891 kB 891 kB ✓
routerDirect.js 883 kB 883 kB ✓
withRouter.js 883 kB 883 kB ✓
Overall change 4.37 MB 4.37 MB ✓

taylorbryant
taylorbryant commented May 3, 2020
View reviewed changes
examples/with-tailwindcss/styles/index.css
}

.title,
.description {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

.description wasn't used anywhere

@ijjk
Copy link
Member

ijjk commented May 3, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
buildDuration 11.2s 11.2s ⚠️ +11ms
nodeModulesSize 57.5 MB 57.5 MB ✓
Page Load Tests Overall decrease ⚠️
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
/ failed reqs 0 0 ✓
/ total time (seconds) 1.901 1.904 0
/ avg req/sec 1314.96 1312.94 -2.02
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.083 1.087 0
/error-in-render avg req/sec 2308.71 2299.54 -9.17
Client Bundles (main, webpack, commons)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.js gzip 6.28 kB 6.28 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.HASH.js gzip 39.2 kB 39.2 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.module.js gzip 4.82 kB 4.82 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB ✓
framework.HA..dule.js gzip 39.2 kB 39.2 kB ✓
Overall change 51.7 kB 51.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.js gzip 1.23 kB 1.23 kB ✓
_error.js gzip 3.13 kB 3.13 kB ✓
hooks.js gzip 663 B 663 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.06 kB 2.06 kB ✓
routerDirect.js gzip 280 B 280 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.86 kB 7.86 kB ✓
Client Pages Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.module.js gzip 598 B 598 B ✓
_error.module.js gzip 2.09 kB 2.09 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 279 B 279 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Rendered Page Sizes
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
index.html gzip 927 B 927 B ✓
link.html gzip 936 B 936 B ✓
withRouter.html gzip 925 B 925 B ✓
Overall change 2.79 kB 2.79 kB ✓
Serverless Mode
General
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
buildDuration 12s 12s ⚠️ +77ms
nodeModulesSize 57.5 MB 57.5 MB ✓
Client Bundles (main, webpack, commons)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.js gzip 6.28 kB 6.28 kB ✓
webpack-HASH.js gzip 746 B 746 B ✓
de003c3a9d30..5232.js gzip 10.3 kB 10.3 kB ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.a1..NSE.txt gzip 220 B 220 B ✓
framework.HASH.js gzip 39.2 kB 39.2 kB ✓
Overall change 57 kB 57 kB ✓
Client Bundles (main, webpack, commons) Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
main-HASH.module.js gzip 4.82 kB 4.82 kB ✓
webpack-HASH..dule.js gzip 746 B 746 B ✓
de003c3a9d30..dule.js gzip 6.88 kB 6.88 kB ✓
framework.HA..dule.js gzip 39.2 kB 39.2 kB ✓
Overall change 51.7 kB 51.7 kB ✓
Legacy Client Bundles (polyfills)
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
polyfills-HASH.js gzip 26.3 kB 26.3 kB ✓
Overall change 26.3 kB 26.3 kB ✓
Client Pages
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.js gzip 1.23 kB 1.23 kB ✓
_error.js gzip 3.13 kB 3.13 kB ✓
hooks.js gzip 663 B 663 B ✓
index.js gzip 222 B 222 B ✓
link.js gzip 2.06 kB 2.06 kB ✓
routerDirect.js gzip 280 B 280 B ✓
withRouter.js gzip 278 B 278 B ✓
Overall change 7.86 kB 7.86 kB ✓
Client Pages Modern
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_app.module.js gzip 598 B 598 B ✓
_error.module.js gzip 2.09 kB 2.09 kB ✓
hooks.module.js gzip 383 B 383 B ✓
index.module.js gzip 223 B 223 B ✓
link.module.js gzip 1.52 kB 1.52 kB ✓
routerDirect..dule.js gzip 279 B 279 B ✓
withRouter.m..dule.js gzip 278 B 278 B ✓
Overall change 5.37 kB 5.37 kB ✓
Client Build Manifests
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_buildManifest.js gzip 61 B 61 B ✓
_buildManife..dule.js gzip 61 B 61 B ✓
Overall change 122 B 122 B ✓
Serverless bundles
zeit/next.js canary taylorbryant/next.js fix-style-ordering-in-with-tailwindcss-example Change
_error.js 853 kB 853 kB ✓
404.html 4.18 kB 4.18 kB ✓
hooks.html 3.81 kB 3.81 kB ✓
index.js 853 kB 853 kB ✓
link.js 891 kB 891 kB ✓
routerDirect.js 883 kB 883 kB ✓
withRouter.js 883 kB 883 kB ✓
Overall change 4.37 MB 4.37 MB ✓

Timer
Timer approved these changes May 3, 2020
View reviewed changes
Copy link
Member

@Timer Timer left a comment

Choose a reason for hiding this comment

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

Thanks!

@Timer Timer added the examples Issue was opened via the examples template. label May 3, 2020
@Timer Timer added this to the 9.3.7 milestone May 3, 2020
@Timer Timer merged commit 5e80999 into vercel:canary May 3, 2020
@Timer Timer modified the milestones: 9.3.7, 9.4 May 11, 2020
rokinsky pushed a commit to rokinsky/next.js that referenced this pull request Jul 11, 2020
@taylorbryant @rokinsky
Clean up styles in with-tailwindcss example (vercel#12458)
389c020
@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@Timer Timer Timer approved these changes

@lfades lfades Awaiting requested review from lfades

Assignees
No one assigned
Labels
examples Issue was opened via the examples template.
Projects
None yet
Milestone
9.4
Development

Successfully merging this pull request may close these issues.
3 participants
@taylorbryant @ijjk @Timer