converted the old tailwind css example to typescript #32808

kumard3 · 2021-12-25T03:40:24Z

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

examples/with-tailwindcss/package.json

examples/with-tailwindcss/tailwind.config.js

balazsorban44

Thanks.

I left some comments.

Could you also please run npx prettier --write ./examples/with-tailwindcss to fix the lint errors and commit the changes?

kumard3 · 2021-12-26T03:08:13Z

Thanks.

I left some comments.

Could you also please run npx prettier --write ./examples/with-tailwindcss to fix the lint errors and commit the changes?

Yes sure will be doing that

balazsorban44 · 2021-12-26T23:51:10Z

Please let's focus this PR on the tailwind example. If you would like to convert other examples to TypeScript, you are welcome to do so, but open a separate PR instead. It makes it easier to track down changes in the future. Thank you.

kumard3 · 2021-12-27T02:53:35Z

Please let's focus this PR on the tailwind example. If you would like to convert other examples to TypeScript, you are welcome to do so, but open a separate PR instead. It makes it easier to track down changes in the future. Thank you.

Sure will we doing that, and from on I will be doing this in a systemic way.

examples/progressive-web-app/pages/api/hello.js

kumard3 · 2022-01-04T17:33:34Z

@leerob I have reverted all the unrelated files

balazsorban44

Please remove all the changes, except in the folder: examples/with-tailwindcss as requested here #32808 (comment) (I could have been more explicit)

There are still changes within examples/progressive-web-app

kumard3 · 2022-01-04T18:53:54Z

Please remove all the changes, except in the folder: examples/with-tailwindcss as requested here #32808 (comment) (I could have been more explicit)

There are still changes within examples/progressive-web-app

I have reverted the commit , but it is still showing the same changes in file, can you please guide me , to performer this task.

kumard3 · 2022-01-04T22:38:04Z

@balazsorban44 I have reverted all the unrelated files .

…o-example * 'canary' of github.com:vercel/next.js: [chore] Update `deta` version in examples (vercel#30204) fix: typescript example supporting strict w/ version >= 4.4 (vercel#33042) Avoid page double render with emotion vanilla (vercel#30541) converted the old tailwind css example to typescript (vercel#32808) fix(examples/cms-contentful): add correct Content-Type + missing closing tag for html (vercel#30321) Ensure NODE_ENV is not inlined for next/jest (vercel#33032) Rename api in with-redis example (vercel#33016) Remove unused turbo remote cache env vars (vercel#33030) v12.0.8-canary.17 Re-enable turbo caching for swc build jobs (vercel#32617) feat(cli): introduce `next info` CLI command (vercel#32972) fix(examples): add missing dependencies wo (vercel#32977) Updated wrong link to example of gtag init in measuring-performance.md (vercel#32974) v12.0.8-canary.16 Revert "Reduce install size for linux glibc/musl (vercel#32850)" (vercel#32973) Ensure middleware is output in standalone mode (vercel#32967) v12.0.8-canary.15 Reduce install size for linux glibc/musl (vercel#32850) Fixes issue with makeStylesheetInert (vercel#32027) Ensure setImmediate and punycode are polyfilled (vercel#32768)

leerob · 2022-01-06T03:49:31Z

examples/with-tailwindcss/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"


I don't think we should include ESLint - while it is helpful, I think this example should be as simple as possible - just Next.js and Tailwind.

leerob · 2022-01-06T03:49:42Z

examples/with-tailwindcss/README.md

@@ -1,3 +1,11 @@
+<p  align="center">
+
+<img  src="https://res.cloudinary.com/ddcg0rzlo/image/upload/v1640340715/nextjs-tailwind-typescript-banner_vslgq4.png"  alt="Next.js TypeScript Starter">


Could we remove this image please?

balazsorban44 · 2022-01-06T14:31:51Z

~~@kumard3 could you please follow up in a separate PR with @leerob's suggestion?~~

#33062 addressed this.

LazirusDon · 2022-01-07T14:42:21Z

example is typescript now? how do i start a nextjs tailwind without typescript ?
how to initialize next/tailwind with just js?

npx create-next-app --example with-tailwindcss with-tailwindcss-app
converted the old tailwind css example to typescript (#32808),

leerob · 2022-01-07T22:44:48Z

Yes, the example is now using TypeScript. If you would prefer not to use it, you can remove the TS configuration (it's a few files/lines).

LazirusDon · 2022-01-07T22:47:30Z

Thanks for the reply dude, I’m new at programming I figured it out just a few changes a little clean up Thanks again dude Sent from Mail<https://go.microsoft.com/fwlink/?LinkId=550986> for Windows From: Lee ***@***.***> Sent: 07 January 2022 22:44 To: ***@***.***> Cc: ***@***.***>; ***@***.***> Subject: Re: [vercel/next.js] converted the old tailwind css example to typescript (PR #32808) Yes, the example is now using TypeScript. If you would prefer not to use it, you can remove the TS configuration (it's a few files/lines). — Reply to this email directly, view it on GitHub<#32808 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AUTKX5DJEOTAG7TNYNVVHVLUU5UGXANCNFSM5KXMH6DQ>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

ahmadbilaldev · 2022-01-08T15:32:41Z

Why was the JavaScript example changed to TypeScript? I think the default example should be using JavaScript. I refer this in my next app guides and it can be complicated for the readers to manually convert TS to JS.

We can do something like -with-ts-tailwindcss for the TypeScript instead.

msaaddev · 2022-01-27T17:28:48Z

@ahmadbilaldev totally agrees with you here. There should also be a JavaScript-based template available for the Next.js TailwindCSS example.

@balazsorban44 can we do something about it?

balazsorban44 · 2022-01-28T10:24:05Z

The way forward is that we are going to focus on TypeScript and prefer it over JS in examples, as it provides more safety even for beginner developers, and is being more and more widely adopted.

We are discussing alternatives like a --js flag that could potentially harness SWC to automatically convert examples to plain JavaScript, but nothing is set yet. It is easier to go from TypeScript to JavaScript, not the other way around.

## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`

Created tailwind and typescript starter

5585bf2

kumard3 requested review from ijjk, leerob, shuding, steven-tey and timneutkens as code owners December 25, 2021 03:40

ijjk added the examples Issue/PR related to examples label Dec 25, 2021

balazsorban44 reviewed Dec 25, 2021

View reviewed changes

examples/with-tailwindcss/package.json Outdated Show resolved Hide resolved

balazsorban44 reviewed Dec 25, 2021

View reviewed changes

examples/with-tailwindcss/tailwind.config.js Outdated Show resolved Hide resolved

balazsorban44 requested changes Dec 25, 2021

View reviewed changes

balazsorban44 mentioned this pull request Dec 26, 2021

Add example with typescript and tailwind css #25959

Closed

kumard3 requested a review from balazsorban44 December 26, 2021 07:05

leerob reviewed Jan 4, 2022

View reviewed changes

examples/progressive-web-app/pages/api/hello.js Outdated Show resolved Hide resolved

balazsorban44 requested changes Jan 4, 2022

View reviewed changes

kumard3 force-pushed the canary branch from 9fb5006 to c014639 Compare January 4, 2022 18:38

kumard3 requested review from huozhi, padmaia and styfle as code owners January 4, 2022 18:40

ijjk added create-next-app Related to our CLI tool for quickly starting a new Next.js application. area: documentation type: next labels Jan 4, 2022

kumard3 force-pushed the canary branch 2 times, most recently from bc41514 to ddd1678 Compare January 4, 2022 18:46

kumard3 force-pushed the canary branch 2 times, most recently from 8902b2d to 5585bf2 Compare January 4, 2022 22:16

Merge branch 'canary' into canary

251e505

kumard3 requested a review from balazsorban44 January 4, 2022 22:41

balazsorban44 approved these changes Jan 4, 2022

View reviewed changes

kumard3 requested a review from leerob January 5, 2022 02:45

Merge branch 'canary' into canary

4d70476

ijjk approved these changes Jan 5, 2022

View reviewed changes

kodiakhq bot merged commit 066984e into vercel:canary Jan 5, 2022

leerob reviewed Jan 6, 2022

View reviewed changes

snyk-bot mentioned this pull request Jan 21, 2022

[Snyk] Security upgrade antd from 4.3.0 to 4.17.0 MaxMood96/next.js#230

Open

balazsorban44 mentioned this pull request Feb 20, 2022

Enable eslint as per default yarn create next-app #34604

Closed

github-actions bot locked as resolved and limited conversation to collaborators Feb 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

converted the old tailwind css example to typescript #32808

converted the old tailwind css example to typescript #32808

kumard3 commented Dec 25, 2021

balazsorban44 left a comment

kumard3 commented Dec 26, 2021

balazsorban44 commented Dec 26, 2021

kumard3 commented Dec 27, 2021

kumard3 commented Jan 4, 2022

balazsorban44 left a comment •

edited

Loading

kumard3 commented Jan 4, 2022

kumard3 commented Jan 4, 2022

leerob Jan 6, 2022

leerob Jan 6, 2022

balazsorban44 commented Jan 6, 2022 •

edited

Loading

LazirusDon commented Jan 7, 2022

leerob commented Jan 7, 2022

LazirusDon commented Jan 7, 2022 via email

ahmadbilaldev commented Jan 8, 2022 •

edited

Loading

msaaddev commented Jan 27, 2022 •

edited

Loading

balazsorban44 commented Jan 28, 2022 •

edited

Loading

		@@ -1,3 +1,11 @@
		<p align="center">

		<img src="https://res.cloudinary.com/ddcg0rzlo/image/upload/v1640340715/nextjs-tailwind-typescript-banner_vslgq4.png" alt="Next.js TypeScript Starter">

converted the old tailwind css example to typescript #32808

converted the old tailwind css example to typescript #32808

Conversation

kumard3 commented Dec 25, 2021

Bug

Feature

Documentation / Examples

balazsorban44 left a comment

Choose a reason for hiding this comment

kumard3 commented Dec 26, 2021

balazsorban44 commented Dec 26, 2021

kumard3 commented Dec 27, 2021

kumard3 commented Jan 4, 2022

balazsorban44 left a comment • edited Loading

Choose a reason for hiding this comment

kumard3 commented Jan 4, 2022

kumard3 commented Jan 4, 2022

leerob Jan 6, 2022

Choose a reason for hiding this comment

leerob Jan 6, 2022

Choose a reason for hiding this comment

balazsorban44 commented Jan 6, 2022 • edited Loading

LazirusDon commented Jan 7, 2022

leerob commented Jan 7, 2022

LazirusDon commented Jan 7, 2022 via email

ahmadbilaldev commented Jan 8, 2022 • edited Loading

msaaddev commented Jan 27, 2022 • edited Loading

balazsorban44 commented Jan 28, 2022 • edited Loading

balazsorban44 left a comment •

edited

Loading

balazsorban44 commented Jan 6, 2022 •

edited

Loading

ahmadbilaldev commented Jan 8, 2022 •

edited

Loading

msaaddev commented Jan 27, 2022 •

edited

Loading

balazsorban44 commented Jan 28, 2022 •

edited

Loading