Part 1: How to Build a NextJS App using Typescript and TailwindCSS: The Complete Guide

Part 1: How to Build a NextJS App using Typescript and TailwindCSS: The Complete Guide

Setting up NextJS with Typescript and TailwindCSS

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

What is Next.js?

Next.js is a production-ready framework built on top of React and Node.js. It ships with all the features you need to get your React app up and running in no time.

You can use Next.js to build static or dynamic apps since it supports both client-side and server-side rendering. Next.js v9 introduced API routes, which allow you to extend your Next.js app with serverless functions built with Node.js, Express.js, GraphQL, and so on.

Next.js uses automatic code-splitting (lazy loading) to render only the JavaScript needed for your website. As an added bonus, this makes Next.js great for SEO.

What is TypeScript?

TypeScript is a popular language created and maintained by Microsoft. It’s a superset of JavaScript, which makes all its features optional.

You can convert your existing JavaScript app to TypeScript and it should work as expected as long as your code is valid JavaScript. TypeScript allows you to set types on your variables and functions so you can type-check your code statically and catch errors at compile time.

You can also use modern features that are not yet supported in JavaScript. And don’t worry about browser support — TypeScript compiles to plain JavaScript, which means your TypeScript code will never ship in the browser.

What is TailwindCSS?

TailwindCSS is a utility-first CSS framework for rapidly building custom user interfaces. You can say it is a cool way of writing inline styling and achieve an awesome interface without writing a single line of your own CSS! Tailwind isn’t the first utility CSS library, but it is the most popular at the moment and the best in my opinion.

Setup

I have created a GitHub repository with starter files you can either clone the repository(Can be used as starter files for other amazing projects! Maybe give it a ⭐ while you are at it 😃) or follow the steps below

  1. Setting up a new NextJS app with Typescript
    Setting up a NextJS project with Typescript is actually really easy. Running the following command would create a basic NextJS app with Typescript support.
    npx create-next-app nextjs-crashcourse --ts
    # or
    yarn create next-app nextjs-crashcourse --typescript
    
  2. Adding TailwindCSS to the project
    Go inside the project folder and install the required dependencies

    cd nextjs-crashcourse
    // using npm
    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
    // using yarn
    yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
    

    Creating the tailwind configuration file

    npx tailwindcss init -p
    

    This command would create a tailwind configuration file(tailwind.config.js) and a postcss configuration file(postcss.config.js)

  3. Editing the tailwind.config.js file
    Change the file to the following code snippet

    // tailwind.config.js
    module.exports = {
     purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
     darkMode: false, // or 'media' or 'class'
     theme: {
       extend: {},
     },
     variants: {
       extend: {},
     },
     plugins: [],
    }
    
  4. Adding tailwind to your CSS file
    Add the following lines of code to the top of the styles/global.css file

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    

And that's it! 🥳 You have successfully set up the files required for the series. Also, note that you could use this as boilerplate code for your "next" application! Meet you in the second part of the series.

🙌 Support

If you're enjoying my articles, consider supporting me with a coffee ☕️. It really helps me a lot.

Buy Me A Coffee

🌎 Lets connect

Github
Twitter
LinkedIn

🎸 Feedback

Feedback helps to improve my articles. I'd love to hear feedback and thoughts on the article. Looking forward to your views.

 
Share this