How to Start a Next.js Project with Tailwind CSS and TypeScript
A Step-by-Step Guide to Building Modern Web Applications
Introduction
There are many front-end frameworks available in the market today, and React is one of the most popular and widely used. According to the internet, React is the most commonly used framework. However, React is not a full-fledged framework; it's a UI library. There are specific criteria that need to be met for something to be considered a framework.
When building a product or project with React, deciding on the necessary tools can be time-consuming. Questions like which UI library to use, whether to stick with plain old CSS, and others need answers. Instead, imagine setting up a project that handles everything. Of course, this approach can be debatable, but this tech stack works well for major projects.
This blog will set up a project addressing many common frontend issues using NextJS with Typescript and TailwindCSS. What are these technologies? I'll explain more in this blog. Let's start with setting up your project.
Prerequisites
For this blog, you don't need to be a master in React. Some basic concepts will be enough to follow along. You can also use Typescript and TailwindCSS with React. Their installation steps might be different, but you can continue reading.
If you're new to React, I highly recommend learning the basics of React before following this blog to get the most out of it. It's always better to learn something new every day.
Understanding Tailwindcss Typescript and Nextjs in Brief
We understand the capabilities of React. To enhance its power, we're going to use Next.js, TailwindCSS, and TypeScript. You might have some questions, but don't worry, I will briefly explain these technologies. So, let's get started.
NextJS
According to the Next.js official website:
Nextjs is a React Framework for the Web. It is used by some of the world's largest companies, and enables developers to create high-quality web applications with the power of React components.
Next.js is built on top of React and offers extra features and functionalities that simplify the process of building React applications. If you're in search of a React framework that can enhance the performance, SEO, server-side rendering (SSR), automatic routing, and scalability of your applications, then Next.js is an excellent choice.
You can learn more about NextJS on their official website here
Typescript
According to the Typescript Official Website:
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
TypeScript offers static typing, which helps catch errors during compilation and improves code readability and maintainability. It also boosts developer productivity with features like code navigation, auto-completion, and refactoring tools.
Using TypeScript with Next.js adds static typing, which enhances code quality and readability. It also improves IDE support, allows for early error detection, and boosts scalability, making it simpler to manage and scale your Next.js applications.
You can learn more about Typescript on their official website here
TailwindCSS
According to TailwindCSS Official Website:-
Tailwind CSS is a CSS framework that allows users to build modern websites without leaving their HTML
Tailwind CSS is a utility-first CSS framework offering pre-built classes for styling web applications. It emphasizes using utility classes such as bg-red-500 for background color and p-4 for padding, instead of creating custom CSS. This method speeds up development and simplifies maintenance, letting you style elements quickly by adding these utility classes right in your HTML.
Here, the question arises: if Tailwind CSS is just a set of pre-built classes, why not use a CSS framework like Bootstrap? But things change here.
Tailwind CSS takes a unique approach compared to traditional CSS frameworks like Bootstrap. While Bootstrap comes with predefined components and styles, Tailwind CSS emphasizes utility classes, offering you greater flexibility and control over your designs. This utility-first strategy enables you to craft highly customized designs without the need to write extra CSS.
TailwindCSS promotes a more consistent and scalable styling system across your project. It's an excellent option for developers who prioritize simplicity, flexibility, and maintainability in their CSS code.
You can learn more about TailwindCSS on their official website here
Setting up a NextJS Project
We've covered enough theory to start with NextJS. Now, let's set up our project.
npx create-next-app@latest my-best-frontend --typescript --eslint
cd my-best-frontend
This command creates a new Next.js project with TypeScript and ESLint already set up.
my-best-frontend: The name you choose for your project. Replace my-best-frontend with your desired project name.
Integrating Tailwind CSS
So we've installed NextJS and TypeScript. Now it's time to integrate TailwindCSS into the project.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
This set of commands installs Tailwind CSS along with PostCSS and Autoprefixer as development dependencies.
The second command initializes Tailwind CSS by creating a default configuration file (tailwind.config.js) and a PostCSS configuration file (postcss.config.js). This setup allows you to use Tailwind CSS in your project.
//Add this code to tailwind.config.js
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
},
plugins: [],
}
This code snippet is a Tailwind CSS configuration file (tailwind.config.js). It defines the configuration options for Tailwind CSS. Here's a breakdown of the key parts:
content: This specifies the files that Tailwind should scan to find classes used in your project. It includes various directories (app,pages,components,src) and file extensions (js,ts,jsx,tsx,mdx).theme: This allows you to extend the default Tailwind CSS theme by adding customizations or additional styles. In this case, it's empty (extend: {}), but you can add your customizations here.plugins: This array allows you to include any Tailwind CSS plugins that you want to use in your project. For now, it's empty, but you can add plugins as needed.
Add the @tailwind directives for each of Tailwind’s layers to your globals.css file.
/** Add this to globals.css **/
@tailwind base;
@tailwind components;
@tailwind utilities;
Creating a Simple Component
So, we've set up the project, and now we're going to write some TailwindCSS classes.
/** Add this to index.tsx **/
export default function Home() {
return (
<div class="flex justify-center items-center h-screen bg-slate-600">
<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
</div>
</div>
</div>
)
}
Running the NextJS Project
Now let's run our project and check out our Next.js project with Tailwind CSS & TypeScript.
npm run dev
Output
Conclusion
In conclusion, setting up a NextJS project with TailwindCSS and TypeScript offers a modern, efficient, and scalable approach to building web applications. Through this guide, we've laid the foundation for integrating these powerful technologies, providing a streamlined development experience that leverages the strengths of each.
NextJS brings the robustness of server-side rendering, enhanced SEO, and simplified routing. TypeScript introduces strong typing, enhancing code reliability and maintainability. Lastly, TailwindCSS offers a utility-first approach to CSS, allowing for rapid and consistent styling.
By combining these technologies, developers can create high-quality, maintainable, and performant web applications with ease. As you embark on your NextJS journey, remember that the tech stack you choose significantly influences your project's success. Happy coding!
For further learning and exploration, consider diving deeper into each technology's documentation and community resources. Engage with other developers through forums or social media to share insights and learn from collective experiences. The journey of mastering these tools is ongoing, and the community around each provides a wealth of knowledge to help you grow as a developer.
Thank you for reading my article. Please Follow Me, Feel free to comment and share your suggestions/thoughts 😊