Create a Web Project using Next.js + TypeScript + Tailwind CSS

Before creating the project, I will explain a little bit about Next.js, TypeScript, and Tailwind CSS.

React documentation mentions among "Recommended Toolchains":

Next.js is a React framework that give you building blocks to create a web application, which means Next.js handles the tooling and configuration needed for React and provides additional structure, features, and optimizations for your application. You can use React to build the UI, then incrementally adopt Next.js features to solve standard application requirements such as routing, data fetching, and integrations -  all while improving the developer and end-user experience.

TypeScript is a superset of JavaScript which primarily provides optional static typing, classes, and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code.

For a large JavaScript project, adopting TypeScript might result in more robust software, while still being deployable where a regular JavaScript application would run.

Tailwind CSS is different from other common framework CSS, which consists of many pre-designed components. Tailwind CSS is not a UI kit, you won't find a pre-designed component like a button, card, carousel, etc.

Simply put, in Tailwind CSS many little classes represent CSS declaration. So, when you want to create a component, then you need to use some of these little classes to create the component you mean.

Okay, let's get started!

The quickest way to create a new project Next.js + Tailwind CSS with execute create-next-app followed by option example with-tailwindcss. This will automatically configure your Tailwind setup based on the official Next.js example. Run the command below:

If you'd like to configure Tailwind CSS manually, continue with the rest of this guide:

You can skip this step if you want to install Tailwind CSS to your existing project, but if you don't have run the command below:

Wait until the process is done, then go to your project directory

to add Tailwind dependencies run the command below:

Wait until the process is done, then run the init command to generate both tailwind.conf.js and postcss.config.js

Add the paths to all of your template files in your tailwind.conf.js file

Add the @tailwind directive for each Tailwind layer to your ./styles/global.css file

Edit your ./pages/index.tsx file

Run your build process with the command bellow

Open your browser, and enter the URL: http://localhost:3000/