Next.js TypeScript Tailwind CSS project setup

npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"

cd nextjs-ts-tailwind-examplenpm run dev

touch tsconfig.json next-env.d.ts

npm install --save-dev typescript @types/react @types/node

//tsconfig.json {  "compilerOptions": {    "target": "es5",    "lib": [      "dom",      "dom.iterable",      "esnext"    ],    "allowJs": true,    "skipLibCheck": true,    "strict": false,    "forceConsistentCasingInFileNames": true,    "noEmit": true,    "esModuleInterop": true,    "module": "esnext",    "moduleResolution": "node",    "resolveJsonModule": true,    "isolatedModules": true,    "jsx": "preserve"  },  "include": [    "next-env.d.ts",    "**/*.ts",    "**/*.tsx"  ],  "exclude": [    "node_modules"  ]}

/// <reference types="next" />/// <reference types="next/types/global" />

mv components/date.js components/date.tsxmv components/layout.js components/layout.tsxmv lib/posts.js lib/posts.tsmv pages/_app.js pages/_app.tsxmv pages/index.js pages/index.tsxmv 'pages/posts/[id].js' 'pages/posts/[id].tsx'mv pages/api/hello.js pages/api/hello.ts

npm run dev

npm install tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

//tailwind.config.jsmodule.exports = {  purge: [], //remove this line   purge: ['./components/**/*.tsx', './pages/**/*.tsx','./public/**/*.html'], //add this line  darkMode: false, // or 'media' or 'class'  theme: {    extend: {},  },  variants: {    extend: {},  },  plugins: [],}

//postcss.config.jsmodule.exports = {  plugins: {    tailwindcss: {},    autoprefixer: {},  },}

//styles/global.css@tailwind base;@tailwind components;@tailwind utilities;