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

Examples:

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 ; 🇰🇪; www.muguku.co.ke

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