upgrade next tailwind

chore

Author: dinhanhthi

.gitignore

@@ -33,3 +33,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.yarn/
+
+.pnp.loader.mjs
+
+.pnp.cjs

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true
+    "source.organizeImports": "explicit"
   },
   "prettier.requireConfig": true,
   "prettier.configPath": ".prettierrc",

README.md

@@ -1,9 +1,10 @@
 # 🐕 nextjs-tailwind-starter
 
-A starter for Next.js 14+ with preconfigured Tailwind CSS, ESLint, VSCode Settings and Prettier.
+A starter for [Next.js 14+](https://nextjs.org/) with preconfigured [Tailwind CSS](https://tailwindcss.com/), [ESLint](https://eslint.org/), [VSCode](https://code.visualstudio.com/) Settings and [Prettier](https://prettier.io/).
 
-To get started, install [nvm](https://github.com/nvm-sh/nvm) and use it to install the desired version of Node.js and Yarn.
+## Getting Started
 
+To get started, install [nvm](https://github.com/nvm-sh/nvm) and use it to install the desired version of Node.js and [Yarn](https://yarnpkg.com/).
 
 ```bash
 nvm install 20 # node v20
@@ -44,3 +45,13 @@ yarn test
 ```
 
 For an example of an api request, let's make a `GET` to `http://localhost:3001/api/hello`.
+
+## Upgrade guide
+
+```bash
+# Next.js
+yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
+
+# Tailwind
+yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/typography@latest eslint-plugin-tailwindcss@latest prettier-plugin-tailwindcss@latest
+```

package.json

@@ -1,8 +1,14 @@
 {
   "name": "nextjs-tailwind-starter",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "author": "Anh-Thi Dinh",
   "private": true,
+  "engines": {
+    "npm": "^10.0.8",
+    "node": "^20.10.0"
+  },
+  "packageManager": "yarn@4.1.1",
+  "license": "MIT",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -19,38 +25,37 @@
     "@types/node": "20.9.0",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.15",
-    "autoprefixer": "10.4.16",
-    "classnames": "^2.3.2",
-    "eslint": "8.53.0",
-    "eslint-config-next": "14.0.2",
-    "next": "^14.0.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "eslint": "8.56.0",
+    "eslint-config-next": "^14.2.3",
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sass": "^1.69.5",
-    "typescript": "5.2.2"
+    "typescript": "5.3.3"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.10",
+    "@tailwindcss/typography": "^0.5.13",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/jest": "^29.5.8",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
+    "autoprefixer": "^10.4.19",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-tailwindcss": "^3.13.0",
+    "eslint-plugin-tailwindcss": "^3.17.0",
     "eslint-plugin-unicorn": "^49.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "8.4.31",
+    "postcss": "^8.4.38",
     "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.5.7",
+    "prettier-plugin-tailwindcss": "^0.6.1",
     "rimraf": "^5.0.5",
-    "tailwindcss": "3.3.5"
+    "tailwindcss": "^3.4.3"
   }
 }

tailwind.config.js renamed to tailwind.config.ts

@@ -1,18 +1,16 @@
-/** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
   ],
   theme: {
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-      },
-    },
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+      }
+    }
   },
-  plugins: [],
+  plugins: []
 }