Setting up NextJs with Typescript, Tailwind CSS, React Testing Library, Jest, Prettier, and ESlint

human hand rising from the ocean
Photo by nikko macaspac on Unsplash

0. Nextjs Starter Templates Example’s Directory

There’s a directory in the nextjs GitHub repo that most people ignore, the example’s directory! It contains numerous nextjs starter templates with various partner technologies. Some of these include nextjs with: typescript, tailwind, apollo, urql, relay, redux, chakra ui, docker, react bootstrap, reactstrap, styled components, jest, testing library, etc. All you need to start a nextjs project with any of these templates is to run the create-next-app cli tool with a — example flag.


  1. NextJs with tailwind css
npx create-next-app --example with-tailwindcss name-of-your-project

2. NextJs with typescript

npx create-next-app --example with-typescript name-of-your-project

You catch the drift. To initialize a nextjs app with a partner technology:

npx create-next-app --example with-technology name-of-your-project

provided the with-technology directory exists in the nextjs repo examples directory. Pretty nifty if you ask me!

1. NextJs with Typescript, React Testing Library, Jest, ESlint, and Prettier (no Tailwind)

npx create-next-app --example with-typescript-eslint-jest name-of-your-project

2. Add tailwind

a) Change working directory to the project directory

cd name-of-your-project

b) Follow tailwind’s official documentation instructions to set up tailwind with nextjs

i. Install Tailwind and its peer-dependencies

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

ii. Create tailwind config files

npx tailwindcss init -p

This will create tailwind.config.js and postcss.config.js files in the root directory. They are tailwindcss and postcss (tailwinds peer dependency) config files.

iii. Tree-shaking

Configure Tailwind to remove unused styles in production. In your tailwind.config.js file, configure the purge option with the paths to all of your pages and components so Tailwind can tree-shake unused styles in production builds. Like so:

// tailwind.config.jsmodule.exports = {
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
variants: {
extend: {},
plugins: [],

iv. Create a styles directory inside the root directory and a globals.css inside it

mkdir styles #create styles directory
touch styles/globals.css #create globals.css file

v. Include Tailwind in your CSS

Open the ./styles/globals.css file and use the @tailwind directive to include Tailwind's base, components, and utilities styles. Like so:

/* ./styles/globals.css */@tailwind base;
@tailwind components;
@tailwind utilities;

vi. Create the _app.tsx component inside pages directory.

touch pages/_app.tsx #create _app.tsx file

vii. import your global css file in your pages/_app.tsx component. Like so:

// pages/_app.tsximport '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
export default MyApp

You’re done! Now when you run yarn dev, Typescript, Tailwind CSS, React Testing Library, Jest, Prettier, and ESlint will be ready to use in your Next.js project.




A student of the world ; My brain has too many tabs open ; 🇰🇪;

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Validating Typescript Business Entities with Firefly Semantics Validator

Easy and Fully Customizable Snow Fall Effect in JS for your website

Create your own RxJS Observable for Dark Mode using Media Queries

How to Build a Forum App with NextJs & Strapi CMS

2018 Goals — May Update

How to become a React developer

How I Bypassed a tough WAF to steal user cookies using XSS!

“Strategy Design Pattern” — Supports the ‘O’ of SOLID Principle

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Macharia Muguku

Macharia Muguku

A student of the world ; My brain has too many tabs open ; 🇰🇪;

More from Medium

中 — In the middle — Next.js middleware

How to install Tailwind CSS with React and Flowbite

Yarr (yet another react router) | Let’s get started | Great react routing library

Yarr is Yet Another React Library which helps to improve User Experience and application performance by giving data preloading and code preloading strategy with react routes.

Document Transition API — Creating a React Hook