Create a Web Project using Next.js + TypeScript + Tailwind CSS
Work with Next.js: Learn how to create new project, configuration and build the project
10 June, 2022
10
10
0
Contributors
Before creating the project, I will explain a little bit about Next.js, TypeScript, and Tailwind CSS.
What is Next.js?
React documentation mentions among "Recommended Toolchains":
Next.js is a popular and lightweight framework for static and server-rendered applications built with React. It includes a styling and routing solution out of the box and assumes that you use Node.js as the server environment.
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.
Whether you’re an individual developer or part of a larger team, you can leverage React and Next.js to build fully interactive, highly dynamic, and performant web applications.
What is TypeScript?
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.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
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.
How to install it?
Okay, let's get started!
I assume you already have Node.js on your computer, when I created this article I was using version v16.14.0 and I prefer using Yarn to manage the package.
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:
1. Create New Project
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
2. Install Tailwind CSS
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
3. Configure your template paths
Add the paths to all of your template files in your tailwind.conf.js file
4. Add the Tailwind directives to your CSS
Add the @tailwind directive for each Tailwind layer to your ./styles/global.css file
How to use it?
Edit your ./pages/index.tsx file
How to run?
Run your build process with the command bellow
Open your browser, and enter the URL: http://localhost:3000/
I put this project in the GitHub repository, here you go:
References
typescript
tailwindcss
next.js
react.js
#4weeksofshows