How to create a Typescript NextJS project that uses Tailwind CSS

A step by step guide on creating a NextJS project that uses Typescript and Tailwind CSS.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 04/16/2024 at 10:53
Last Updated on 04/16/2024 at 12:51
<p>A flower that represents NextJS with the text "Create a NextJS project" beneath it.</p>

A step by step guide on creating a NextJS project that uses Typescript and Tailwind CSS.

SubscribeDownload Open Source ProjectNextJS: Create NextJS App

Step One: Install the Dependencies

<p>A screenshot of the NodeJS webpage.</p>

If you don’t have Node.js installed, install it from here. You’ll need Node.js version 18 or higher.

We also recommend that you install Yarn.

Step Two: Create the Project

<p>A screenshot of Terminal window showing the process for creating a project.</p>

In Terminal, set the current directory to the location where you would like to create the project.

cd path/to/directory

Then run the following line, replacing PROJECT_NAME with the name of your project.

npx create-next-app@latest PROJECT_NAME

To create a project that uses NextJS's blog example, run the following line replacing PROJECT_NAME with the name of your project.

npx create-next-app@latest PROJECT_NAME --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Subsequently, answer the questions that the terminal asks to complete the creation of the project.

Step Three: Run Locally

<p>A screenshot of Chrome showing the NextJS project running locally on localhost:3000.</p>

In Terminal, set the current directory to that of the newly created project by running the line below replacing PROJECT_NAME with the name of your project.

cd PROJECT_NAME

Then run the following line:

yarn dev

Please note that yarn dev is the equivalent of yarn start in a react project. These commands do the following:

  • yarn dev runs the app in development mode.
  • yarn start runs the app in production.

In order for you to run yarn start you must run yarn build first.

The project will now be available in localhost:3000. Open a new browser window and navigate to localhost:3000 to access the app in development mode.

Looking to learn more about NextJS, ReactJS or web development?

Search our blog to find educational content on NextJS, ReactJS and web development.

Search our Blog

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe