If you’re starting a new React project, you might want to consider  Next.js and  Tailwind CSS. In this article, we will explain why this would be a great choice and walk you through the process of setting up a new project using these technologies.

Why Next.js?

There are many important details you need to consider when you start a new project with React. Your code has to be bundled using a bundler like webpack and transformed using a compiler like Babel.  Create React App can be a nice tool to handle this for you and give you a massive head start, but what about code-splitting, pre-rendering for performance, and SEO or server-side rendering?

To build a complete React application, you need more than CRA provides you. You can save yourself some time by using Next.js, a React framework that provides a solution to all of these problems above. If you want to read more about CRA vs. Next.js, check out  Stack choices: Create React App vs Next.js.

Why Tailwind CSS?

Tailwind CSS is a CSS framework, but it’s different than most other frameworks like Bootstrap, Material, or Ant Design. It’s a utility-first framework, which means it doesn’t focus on predesigned components like buttons, cards, and alerts. It provides low-level utility classes that let you build completely custom designs without leaving your HTML.

Although it requires some time to learn all the utility classes, you barely need to write any CSS anymore once you start using it. It can give you a huge boost in productivity, and not needing to switch files while styling your HTML elements can feel like a blessing.

#nextjs #css #react #javascript #tailwind css