DEV Community

loading...
Cover image for Next.js + Typescript + tailwindcss Boilerplate

Next.js + Typescript + tailwindcss Boilerplate

Demaspira Aulia
A frontend developer that want to exchange knowledge with everyone in the world.
Originally published at rakuma.xyz ・3 min read

React.js is a very popular library for building user interfaces (some might call it frontend framework). React create single-page-applications app by default, and for those people who wanted a server-side rendered website might need to do some extra steps which I personally don't think is beginner friendly.

Here comes Next.js 🎉

When React is a single-page-applications app by default, Next.js provide hybrid static & server side rendering from the get go! It will save you a lot of time and hassle to setup a server side rendering on React.

Typescipt

The next thing to ease your development flow is to use Typescript. It's a superset of the Javascript language and provides optional typing which will make your code easier to read and debug.

tailwindcss

Tailwindcss is a utility-first CSS framework that can also be composed to build any design. In my opinion it really provide an easier way to style your component.

TL;DR

You can check for the finished boilerplate on my Github bellow.

GitHub logo rakumairu / next-ts-tailwindcss

A Next.js + Typescript + tailwindcss boilerplate

Next JS Boilerplate

This is a boilerplate for Next JS with Tailwindcss using Typescript.

Prequisites

You will need Node.js and NPM to use this project.

You windows user, you can check for the installation file here.

And for linux user, you can check for the installation file here or search for your spesific distro in the web.

Getting Started

First, install all required dependecies:

npm install

and then, run the development server:

npm run dev

Open http://localhost:3000 with your browser.

Developing

You can start developing by editing the index.tsx in pages folder (pages/index.tsx).

Build and Serve

You can build and serve the project for production by using:

npm run build
npm run start

Learn More

You can learn more about Next.js, and Tailwindcss here:




If you want to do it from scratch, then let's do it!

Create new project

You need to have Node.js installed, if you already installed Node.js then let's create a new Next.js project with their provided typescript example.

npx create-next-app --example with-typescript my-app
Enter fullscreen mode Exit fullscreen mode

By using above command, it will automatically setup typescript for us. You can see other examples here

After that you need to open the project folder with you IDE of choice, I'm using VS Code.

Create _app.tsx file

_app.tsx file is the root of Next.js app, it doesn't come by default if we are using typescript example from Next.js. Therefore we'll need to add it ourself. Create file called _app.tsx inside pages folder

/pages/_app.tsx

// eslint-disable-next-line
function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp
Enter fullscreen mode Exit fullscreen mode

This code is grabbed from the default Next.js app template.

Integrate tailwindcss

To integrate tailwindcss to our project, we need to install tailwindcss, postcss and autoprefixer.

Install required packages

npm i tailwindcss@latest
Enter fullscreen mode Exit fullscreen mode

Create configuration file

After that we'll create tailwindcss' configuration file by running this command. It will create two files in your root project directory called postcss.config.js and tailwind.config.js.

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

I'll talk about the configuration files more later.

Include tailwind in your CSS

There are two ways that you can do this. Either by importing tailwindcss/tailwind.css directly to your _app.tsx or you can create a styles folder and create a css file inside that folder and import the tailwindcss inside the CSS then import the CSS file to _app.tsx.

I personally prefer the second option because it will give more flexibility for the future when you want to include more CSS files.

/styles/styles.css

/* @tailwind is a syntax from tailwindcss */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

/pages/_app.tsx

import '../styles/styles.css'
// or
import 'tailwindcss/tailwind.css' // if you want to use the first option insted
// ...
Enter fullscreen mode Exit fullscreen mode

After that, you'll be able to use tailwind classes in your project! But before that, let's setup 1 more thing that will improve your production build.

Remove unused CSS

By default all of tailwind's CSS will be included on your build, of course you don't want that, it will only add more to your build size. Tailwind comes with an option to purge all unused CSS classes in your projects, tailwind will check for your file and determine which class is used and which not.

To configure the options let's open tailwnd.config.js and look for purge property, it's usually at the top, if there is none, you can add the property yourself.
On the purge property, add your files path that uses tailwindcss' classes.

tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.tsx',
        // add more paths
    ],
    // ...
}
Enter fullscreen mode Exit fullscreen mode

And we are done!

You can use this boilerplate to start a new Next.js project or implement it on your current project by following the step by step guide.

There are more property in tailwind.config.js and I will cover it on my future articles!

Discussion (0)