docker frontend build fixes (#61)

Author: Jibola

{{cookiecutter.project_slug}}/frontend/app/components/settings/Profile.tsx

@@ -18,7 +18,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.

{{cookiecutter.project_slug}}/frontend/app/components/settings/Security.tsx

@@ -39,7 +39,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.

{{cookiecutter.project_slug}}/frontend/app/login/page.tsx

@@ -26,7 +26,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.

{{cookiecutter.project_slug}}/frontend/app/reset-password/page.tsx

@@ -21,7 +21,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.

{{cookiecutter.project_slug}}/frontend/package.json

@@ -18,6 +18,7 @@
     "@reduxjs/toolkit": "^1.9.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/typography": "^0.5.10",
     "gray-matter": "^4.0.3",
     "next": "^14.0.4",

{{cookiecutter.project_slug}}/frontend/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

{{cookiecutter.project_slug}}/frontend/tailwind.config.ts

@@ -1,6 +1,6 @@
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
-const colors: import("tailwindcss").Config = require("tailwindcss/colors");
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",