NextJS Typescript + TailwindCSS Boilerplate

Combines examples/with-tailwindcss-emotion & examples/with-typescript-eslint-jest

Bootstrap a developer-friendly NextJS app configured with:

• Typescript
• Linting with ESLint
• Formatting with Prettier
• Linting, typechecking and formatting on by default using husky for commit hooks
• Testing with Jest and react-testing-library
• Tailwind CSS
• Emotion
• @tailwindcssinjs/macro It injects Tailwind CSS into Emotion styled component, so PurgeCSS is not needed in this setup.
• ts-jest

Deploy your own

Deploy the example using Vercel:

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/narze/nextjs-with-typescript-eslint-jest-tailwindcss-emotion my-app
# or
yarn create next-app --example https://github.com/narze/nextjs-with-typescript-eslint-jest-tailwindcss-emotion my-app

Deploy it to the cloud with Vercel (Documentation).