Add the example of Tailwind CSS with emotion #8931

heyfirst · 2019-10-02T15:05:37Z

Hello people, I have refactored my own project yesterday. Also, I moved to use Tailwind CSS with Emotion.js. Based on this example, I use tailwindcss.macro for using macros function to inject tailwind CSS attribute into the styled component. So that you can have the full benefits of Emotion.js.

Regarding next.config.js that I have set fs: "empty" because of tailwindcss.macro need to access fs. but it'll be fine and you can see this old issue about fs in #2734

Please review this PR and add some comments.
Cheers!

ijjk · 2019-10-14T03:41:54Z

Stats from current PR

Default Server Mode

General

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
buildDuration	15.3s	15.4s	⚠️ +119ms
nodeModulesSize	48.5 MB	48.5 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
main-HASH.js	18.9 kB	18.9 kB	✓
main-HASH.js gzip	6.79 kB	6.79 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..9dda6167a.js	21.9 kB	21.9 kB	✓
4952ddcd88e7..167a.js gzip	7.81 kB	7.81 kB	✓
de003c3a9d30..3a0560775.js	43.2 kB	43.2 kB	✓
de003c3a9d30..0775.js gzip	15.5 kB	15.5 kB	✓
framework.5b..dbaff70d3.js	125 kB	125 kB	✓
framework.5b..70d3.js gzip	39.4 kB	39.4 kB	✓
Overall change	211 kB	211 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
main-HASH.module.js	17.2 kB	17.2 kB	✓
main-HASH.module.js gzip	6.52 kB	6.52 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..72.module.js	45.6 kB	45.6 kB	✓
de003c3a9d30..dule.js gzip	16.5 kB	16.5 kB	✓
framework.5b..d3.module.js	125 kB	125 kB	✓
framework.5b..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	190 kB	190 kB	✓

Client Pages

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
_app.js	1.81 kB	1.81 kB	✓
_app.js gzip	873 B	873 B	✓
_error.js	12 kB	12 kB	✓
_error.js gzip	4.73 kB	4.73 kB	✓
hooks.js	12.7 kB	12.7 kB	✓
hooks.js gzip	4.79 kB	4.79 kB	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	8.14 kB	8.14 kB	✓
link.js gzip	3.5 kB	3.5 kB	✓
routerDirect.js	408 B	408 B	✓
routerDirect.js gzip	281 B	281 B	✓
withRouter.js	419 B	419 B	✓
withRouter.js gzip	280 B	280 B	✓
Overall change	35.8 kB	35.8 kB	✓

Client Pages Modern

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
_app.module.js	1.7 kB	1.7 kB	✓
_app.module.js gzip	832 B	832 B	✓
_error.module.js	23.3 kB	23.3 kB	✓
_error.module.js gzip	8.59 kB	8.59 kB	✓
hooks.module.js	1.52 kB	1.52 kB	✓
hooks.module.js gzip	793 B	793 B	✓
index.module.js	294 B	294 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	8.53 kB	8.53 kB	✓
link.module.js gzip	3.68 kB	3.68 kB	✓
routerDirect.module.js	394 B	394 B	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.module.js	404 B	404 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	36.1 kB	36.1 kB	✓

Client Build Manifests

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
_buildManifest.js	81 B	81 B	✓
_buildManifest.js gzip	61 B	61 B	✓
_buildManifest.module.js	81 B	81 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	162 B	162 B	✓

Rendered Page Sizes

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
index.html	3.62 kB	3.62 kB	✓
index.html gzip	946 B	946 B	✓
link.html	3.66 kB	3.66 kB	✓
link.html gzip	954 B	954 B	✓
withRouter.html	3.67 kB	3.67 kB	✓
withRouter.html gzip	941 B	941 B	✓
Overall change	10.9 kB	10.9 kB	✓

Serverless Mode

General

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
buildDuration	15.5s	15.6s	⚠️ +68ms
nodeModulesSize	48.5 MB	48.5 MB	✓

Client Bundles (main, webpack, commons)

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
main-HASH.js	18.9 kB	18.9 kB	✓
main-HASH.js gzip	6.79 kB	6.79 kB	✓
webpack-HASH.js	1.53 kB	1.53 kB	✓
webpack-HASH.js gzip	746 B	746 B	✓
4952ddcd88e7..9dda6167a.js	21.9 kB	21.9 kB	✓
4952ddcd88e7..167a.js gzip	7.81 kB	7.81 kB	✓
de003c3a9d30..3a0560775.js	43.2 kB	43.2 kB	✓
de003c3a9d30..0775.js gzip	15.5 kB	15.5 kB	✓
framework.5b..dbaff70d3.js	125 kB	125 kB	✓
framework.5b..70d3.js gzip	39.4 kB	39.4 kB	✓
Overall change	211 kB	211 kB	✓

Client Bundles (main, webpack, commons) Modern

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
main-HASH.module.js	17.2 kB	17.2 kB	✓
main-HASH.module.js gzip	6.52 kB	6.52 kB	✓
webpack-HASH.module.js	1.53 kB	1.53 kB	✓
webpack-HASH..dule.js gzip	746 B	746 B	✓
de003c3a9d30..72.module.js	45.6 kB	45.6 kB	✓
de003c3a9d30..dule.js gzip	16.5 kB	16.5 kB	✓
framework.5b..d3.module.js	125 kB	125 kB	✓
framework.5b..dule.js gzip	39.4 kB	39.4 kB	✓
Overall change	190 kB	190 kB	✓

Client Pages

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
_app.js	1.81 kB	1.81 kB	✓
_app.js gzip	873 B	873 B	✓
_error.js	12 kB	12 kB	✓
_error.js gzip	4.73 kB	4.73 kB	✓
hooks.js	12.7 kB	12.7 kB	✓
hooks.js gzip	4.79 kB	4.79 kB	✓
index.js	318 B	318 B	✓
index.js gzip	222 B	222 B	✓
link.js	8.14 kB	8.14 kB	✓
link.js gzip	3.5 kB	3.5 kB	✓
routerDirect.js	408 B	408 B	✓
routerDirect.js gzip	281 B	281 B	✓
withRouter.js	419 B	419 B	✓
withRouter.js gzip	280 B	280 B	✓
Overall change	35.8 kB	35.8 kB	✓

Client Pages Modern

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
_app.module.js	1.7 kB	1.7 kB	✓
_app.module.js gzip	832 B	832 B	✓
_error.module.js	23.3 kB	23.3 kB	✓
_error.module.js gzip	8.59 kB	8.59 kB	✓
hooks.module.js	1.52 kB	1.52 kB	✓
hooks.module.js gzip	793 B	793 B	✓
index.module.js	294 B	294 B	✓
index.module.js gzip	223 B	223 B	✓
link.module.js	8.53 kB	8.53 kB	✓
link.module.js gzip	3.68 kB	3.68 kB	✓
routerDirect.module.js	394 B	394 B	✓
routerDirect..dule.js gzip	281 B	281 B	✓
withRouter.module.js	404 B	404 B	✓
withRouter.m..dule.js gzip	278 B	278 B	✓
Overall change	36.1 kB	36.1 kB	✓

Client Build Manifests

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
_buildManifest.js	81 B	81 B	✓
_buildManifest.js gzip	61 B	61 B	✓
_buildManifest.module.js	81 B	81 B	✓
_buildManife..dule.js gzip	61 B	61 B	✓
Overall change	162 B	162 B	✓

Serverless bundles

	zeit/next.js canary	firstziiz/next.js with-tailwindcss-emotion	Change
_error.js	254 kB	254 kB	✓
_error.js gzip	68 kB	68 kB	✓
hooks.html	3.75 kB	3.75 kB	✓
hooks.html gzip	979 B	979 B	✓
index.js	254 kB	254 kB	✓
index.js gzip	68.3 kB	68.3 kB	✓
link.js	262 kB	262 kB	✓
link.js gzip	70.4 kB	70.4 kB	✓
routerDirect.js	255 kB	255 kB	✓
routerDirect.js gzip	68.4 kB	68.4 kB	✓
withRouter.js	255 kB	255 kB	✓
withRouter.js gzip	68.5 kB	68.5 kB	✓
Overall change	1.28 MB	1.28 MB	✓

Commit: a8cb017

lfades

@firstziiz Thank you 💯

heyfirst · 2019-10-17T09:09:10Z

@lfades Your Welcome 😎 I hope I can help more in the future.

theairbend3r · 2020-03-22T12:04:30Z

Hi!

Great work on this example. It's super helpful.

I have an issue here. I get the following message in VSCode on line 4 of index.js - import tw from "tailwind.macro".

module "/home/akshaj/projects_js/with-tailwindcss-emotion-app/node_modules/tailwind.macro/macro"
Could not find a declaration file for module 'tailwind.macro'. '/home/akshaj/projects_js/with-tailwindcss-emotion-app/node_modules/tailwind.macro/macro.js' implicitly has an 'any' type.
  Try `npm install @types/tailwind.macro` if it exists or add a new declaration (.d.ts) file containing `declare module 'tailwind.macro';`ts(7016)

Is this a benign thing?

lfades · 2020-03-23T15:49:03Z

It means you have to add types for the mentioned packages, the example is not using TypeScript so if you add TypeScript and there are packages that don't include types, you have to install them.

theairbend3r · 2020-03-23T16:45:02Z

Ah, okay. Thanks @lfades ! :)

heyfirst added 2 commits October 2, 2019 21:38

Add the example of tailwindcss with emotion

760b06c

Add README.md

92e2fcd

heyfirst requested review from lfades and Timer as code owners October 2, 2019 15:05

heyfirst added 4 commits October 2, 2019 22:12

Fix Unexpected trailing comma.

37f8506

Merge branch 'canary' into with-tailwindcss-emotion

739d396

Merge branch 'canary' into with-tailwindcss-emotion

7301fd7

Merge branch 'canary' into with-tailwindcss-emotion

a8cb017

Update the readme, and use latest Next.js version

836b183

lfades approved these changes Oct 17, 2019

View reviewed changes

lfades merged commit ff5dcac into vercel:canary Oct 17, 2019

snyk-bot mentioned this pull request Nov 25, 2019

[Snyk] Upgrade next from 9.0.4 to 9.1.3 ajesse11x/now-examples#17

Open

heyfirst deleted the with-tailwindcss-emotion branch April 28, 2020 07:12

vercel locked as resolved and limited conversation to collaborators Jan 31, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add the example of Tailwind CSS with emotion #8931

Add the example of Tailwind CSS with emotion #8931

heyfirst commented Oct 2, 2019 •

edited

Loading

ijjk commented Oct 14, 2019

lfades left a comment

heyfirst commented Oct 17, 2019

theairbend3r commented Mar 22, 2020

lfades commented Mar 23, 2020

theairbend3r commented Mar 23, 2020 •

edited

Loading

Add the example of Tailwind CSS with emotion #8931

Add the example of Tailwind CSS with emotion #8931

Conversation

heyfirst commented Oct 2, 2019 • edited Loading

ijjk commented Oct 14, 2019

Stats from current PR

lfades left a comment

Choose a reason for hiding this comment

heyfirst commented Oct 17, 2019

theairbend3r commented Mar 22, 2020

lfades commented Mar 23, 2020

theairbend3r commented Mar 23, 2020 • edited Loading

heyfirst commented Oct 2, 2019 •

edited

Loading

theairbend3r commented Mar 23, 2020 •

edited

Loading