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

Set up your Next.js project with TypeScript, Tailwind, 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


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

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

cd name-of-your-project
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
// 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: [],
mkdir styles #create styles directory
touch styles/globals.css #create globals.css file
/* ./styles/globals.css */@tailwind base;
@tailwind components;
@tailwind utilities;
touch pages/_app.tsx #create _app.tsx file
// pages/_app.tsximport '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
export default MyApp

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