Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

It uses the new Just-in-Time Mode for Tailwind CSS.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

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

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).

Dependecies

Add Typescript

https://ryder.dev/add-typescript-to-nextjs/

touch tsconfig.json

npm install typescript @types/react @types/node

tsconfig.json file:

"include": [ "next-env.d.ts", "/*.ts", "/.tsx", "**/.css", 👈 "**.*.js" 👈 ],

Add next lint as a script to package.json:

"scripts": { "lint": "next lint" }

Then run npm run lint or yarn lint:

Installing devDependencies:

eslint
eslint-config-next
typescript
@types/react
prettier : npm install -D prettier eslint-config-prettier create .prettierrc.json add to file:

{ "printWidth": 80, "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" }

npm install -D @typescript-eslint/eslint-plugin

.eslintrc.json add

{ "env": { "browser": true, "es2021": true, "node": true }, "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"], "settings": { "react": { "version": "detect" } } }