--- title: An easy React 17 + TypeScript + Tailwind CSS + NextJS setup description: NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project. We'll... canonical: https://daily.dev/posts/an-easy-react-17-typescript-tailwind-css-nextjs-setup-spqao99pr twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: An easy React 17 + TypeScript + Tailwind CSS + NextJS setup | daily.dev og:description: NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project. We'll... og:url: https://daily.dev/posts/an-easy-react-17-typescript-tailwind-css-nextjs-setup-spqao99pr og:image: https://api.daily.dev/og/posts/SPqAo99Pr.png og:image:alt: An easy React 17 + TypeScript + Tailwind CSS + NextJS setup og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # An easy React 17 + TypeScript + Tailwind CSS + NextJS setup **[Hashnode](https://daily.dev/sources/hashnode)** · [@nikolovlazar](https://daily.dev/nikolovlazar) · 4 min read · 38 upvotes · 5 comments ## Summary NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project. We'll add the TypeScript packages first, so later we can immediately add the typings. First, we'll need to install the tailwindcss package. Then we'll create a new file for the types file. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@nikolovlazar** · 7 upvotes > Hey y'all! I hope you enjoy reading my article! **@deeddyy** · 1 upvotes > this is awesome dude ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#react](https://daily.dev/tags/react), [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#typescript](https://daily.dev/tags/typescript), [#nextjs](https://daily.dev/tags/nextjs), [#tailwind-css](https://daily.dev/tags/tailwind-css) [View this post on daily.dev](https://daily.dev/posts/an-easy-react-17-typescript-tailwind-css-nextjs-setup-spqao99pr) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"An easy React 17 + TypeScript + Tailwind CSS + NextJS setup","url":"https://daily.dev/posts/an-easy-react-17-typescript-tailwind-css-nextjs-setup-spqao99pr","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/an-easy-react-17-typescript-tailwind-css-nextjs-setup-spqao99pr"},"datePublished":"2020-10-25T13:37:53.611Z","dateModified":"2021-10-07T14:17:10.317Z","description":"NextJS is becoming a de facto framework for modern web development. In this article we will build a starter repo that you can use for every new project. We'll...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/91ec9674d9a317d9c9d06279bcf33373","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/91ec9674d9a317d9c9d06279bcf33373","isAccessibleForFree":true,"articleSection":"Hashnode","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Lazar Nikolov","url":"https://daily.dev/nikolovlazar","image":"https://media.daily.dev/image/upload/s--2WLjIcE6--/f_auto/v1749412209/avatars/avatar_9bd2dd6097214fdc895a54ee41d712a3?_a=BAMClqUq0","description":"Software Engineer & Educator. Works @ Sentry.io\nRunning https://creatures.sh","worksFor":{"@type":"Organization","name":"Sentry","logo":"https://res.cloudinary.com/daily-now/image/upload/s--VDko8DAj--/f_auto/v1726036028/companies/sentry"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":1340}},"commentCount":5,"discussionUrl":"https://daily.dev/posts/an-easy-react-17-typescript-tailwind-css-nextjs-setup-spqao99pr","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":38},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"webdev,react,javascript,css,typescript,nextjs,tailwind-css","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hashnode","item":"https://daily.dev/sources/hashnode"},{"@type":"ListItem","position":3,"name":"An easy React 17 + TypeScript + Tailwind CSS + NextJS setup"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/an-easy-react-17-typescript-tailwind-css-nextjs-setup-spqao99pr","comment":[{"@type":"Comment","text":"Hey y’all! I hope you enjoy reading my article!","datePublished":"2020-10-25T13:39:11.609Z","url":"https://daily.dev/posts/SPqAo99Pr#c-2Q83KfumK","author":{"@type":"Person","name":"Lazar Nikolov","url":"https://daily.dev/nikolovlazar","image":"https://media.daily.dev/image/upload/s--2WLjIcE6--/f_auto/v1749412209/avatars/avatar_9bd2dd6097214fdc895a54ee41d712a3?_a=BAMClqUq0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"this is awesome dude","datePublished":"2021-08-08T11:47:10.553Z","url":"https://daily.dev/posts/SPqAo99Pr#c-vzwVRTS-g","author":{"@type":"Person","name":"dedyprianto","url":"https://daily.dev/deeddyy","image":"https://media.daily.dev/image/upload/f_auto/v1627617019/avatars/cUijfyZp2O"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```