Merge pull request #5 from garethredfern/feature/update-tailwind

Update Tailwind to V3 & type-safe equality operators

package.json

@@ -9,25 +9,25 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.2",
-    "@tailwindcss/forms": "^0.2.1",
-    "autoprefixer": "^10.1.0",
     "axios": "^0.21.1",
     "next": "^12.0.4",
-    "postcss": "^8.2.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "swr": "^0.3.11",
+    "swr": "^0.3.11"
-    "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.12.1",
     "@next/eslint-plugin-next": "^10.0.4",
+    "@tailwindcss/forms": "^0.4.0",
+    "autoprefixer": "^10.4.2",
     "babel-eslint": "^10.1.0",
     "eslint": "^7.17.0",
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-next": "^0.0.0",
     "eslint-plugin-prettier": "^3.3.0",
     "eslint-plugin-react": "^7.22.0",
-    "prettier": "2.2.1"
+    "postcss": "^8.4.6",
+    "prettier": "2.2.1",
+    "tailwindcss": "^3.0.22"
   }
 }

src/components/Layouts/Navigation.js

@@ -34,7 +34,7 @@ const Navigation = ({ user }) => {
                         <div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                             <NavLink
                                 href="/dashboard"
-                                active={router.pathname == '/dashboard'}>
+                                active={router.pathname === '/dashboard'}>
                                 Dashboard
                             </NavLink>
                         </div>
@@ -110,7 +110,7 @@ const Navigation = ({ user }) => {
                     <div className="pt-2 pb-3 space-y-1">
                         <ResponsiveNavLink
                             href="/dashboard"
-                            active={router.pathname == '/dashboard'}>
+                            active={router.pathname === '/dashboard'}>
                             Dashboard
                         </ResponsiveNavLink>
                     </div>

src/hooks/auth.js

@@ -11,7 +11,7 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
             .get('/api/user')
             .then(res => res.data)
             .catch(error => {
-                if (error.response.status != 409) throw error
+                if (error.response.status !== 409) throw error
 
                 router.push('/verify-email')
             }),
@@ -28,7 +28,7 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
             .post('/register', props)
             .then(() => revalidate())
             .catch(error => {
-                if (error.response.status != 422) throw error
+                if (error.response.status !== 422) throw error
 
                 setErrors(Object.values(error.response.data.errors).flat())
             })
@@ -44,7 +44,7 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
             .post('/login', props)
             .then(() => revalidate())
             .catch(error => {
-                if (error.response.status != 422) throw error
+                if (error.response.status !== 422) throw error
 
                 setErrors(Object.values(error.response.data.errors).flat())
             })
@@ -60,7 +60,7 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
             .post('/forgot-password', { email })
             .then(response => setStatus(response.data.status))
             .catch(error => {
-                if (error.response.status != 422) throw error
+                if (error.response.status !== 422) throw error
 
                 setErrors(Object.values(error.response.data.errors).flat())
             })
@@ -99,8 +99,8 @@ export const useAuth = ({ middleware, redirectIfAuthenticated } = {}) => {
     }
 
     useEffect(() => {
-        if (middleware == 'guest' && redirectIfAuthenticated && user) router.push(redirectIfAuthenticated)
+        if (middleware === 'guest' && redirectIfAuthenticated && user) router.push(redirectIfAuthenticated)
-        if (middleware == 'auth' && error) logout()
+        if (middleware === 'auth' && error) logout()
     }, [user, error])
 
     return {

src/pages/login.js

@@ -25,7 +25,7 @@ const Login = () => {
     const [status, setStatus] = useState(null)
 
     useEffect(() => {
-        if (router.query.reset?.length > 0 && errors.length == 0) {
+        if (router.query.reset?.length > 0 && errors.length === 0) {
             setStatus(atob(router.query.reset))
         } else {
             setStatus(null)

src/pages/verify-email.js

@@ -31,7 +31,7 @@ const VerifyEmail = () => {
                     gladly send you another.
                 </div>
 
-                {status == 'verification-link-sent' && (
+                {status === 'verification-link-sent' && (
                     <div className="mb-4 font-medium text-sm text-green-600">
                         A new verification link has been sent to the email
                         address you provided during registration.

tailwind.config.js

@@ -1,7 +1,7 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
-    purge: ['./src/**/*.js'],
+    content: ['./src/**/*.js'],
     darkMode: 'media',
     theme: {
         extend: {