Upgrade TailwindCSS to v.4.1.12

frontend/__tests__/unit/components/LoginPageContent.test.tsx

@@ -467,7 +467,9 @@ describe('LoginPageContent', () => {
       expect(loginCard).toHaveClass(
         'w-full',
         'max-w-sm',
-        'space-y-6',
+        'flex',
+        'flex-col',
+        'gap-6',
         'rounded-2xl',
         'border',
         'border-gray-200',

frontend/__tests__/unit/components/NavButton.test.tsx

@@ -213,7 +213,7 @@ describe('<NavButton />', () => {
         'hover:ring-1',
         'hover:ring-[#b0c7de]',
         'hover:ring-offset-0',
-        'focus-visible:outline-none',
+        'focus-visible:outline-hidden',
         'focus-visible:ring-1',
         'focus-visible:ring-ring'
       )
@@ -323,7 +323,7 @@ describe('<NavButton />', () => {
     it('should maintain focus visibility with focus-visible classes', () => {
       renderNavButton()
       const link = screen.getByRole('link')
-      expect(link).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-1')
+      expect(link).toHaveClass('focus-visible:outline-hidden', 'focus-visible:ring-1')
     })
   })
 

frontend/__tests__/unit/components/Search.test.tsx

@@ -335,7 +335,7 @@ describe('SearchBar Component', () => {
       render(<SearchBar {...defaultProps} isLoaded={false} />)
       const input = screen.getByPlaceholderText('Search projects...')
       expect(input).toHaveClass(
-        'h-12 w-full rounded-lg border border-gray-300 pl-10 pr-10 text-lg text-black focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-300 dark:focus:ring-blue-300'
+        'h-12 w-full rounded-lg border border-gray-300 pl-10 pr-10 text-lg text-black focus:border-blue-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-300 dark:focus:ring-blue-300'
       )
     })
 
@@ -351,7 +351,7 @@ describe('SearchBar Component', () => {
       fireEvent.change(input, { target: { value: 'test' } })
       const clearButton = container.querySelector('button.absolute.rounded-full[class*="right-2"]')
       expect(clearButton).toHaveClass(
-        'absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-300'
+        'absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-300'
       )
     })
 

frontend/__tests__/unit/components/UserMenu.test.tsx

@@ -691,7 +691,7 @@ describe('UserMenu Component', () => {
       expect(container).toHaveClass('relative', 'flex', 'items-center', 'justify-center')
 
       const avatarButton = screen.getByRole('button')
-      expect(avatarButton).toHaveClass('w-auto', 'focus:outline-none')
+      expect(avatarButton).toHaveClass('w-auto', 'focus:outline-hidden')
     })
 
     it('applies correct CSS classes to dropdown menu', async () => {

frontend/package.json

@@ -85,7 +85,6 @@
     "@types/react-gtm-module": "^2.0.4",
     "@typescript-eslint/eslint-plugin": "^8.41.0",
     "@typescript-eslint/parser": "^8.41.0",
-    "autoprefixer": "^10.4.21",
     "eslint": "^9.34.0",
     "eslint-config-next": "^15.5.2",
     "eslint-config-prettier": "^10.1.8",
@@ -106,7 +105,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "require-in-the-middle": "^7.5.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.12",
     "ts-jest": "^29.4.1",
     "ts-node": "^10.9.2",
     "typescript": "~5.8.3",

frontend/postcss.config.js

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

frontend/src/app/about/page.tsx

@@ -106,7 +106,7 @@ const About = () => {
   return (
     <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="mx-auto max-w-6xl">
-        <h1 className="mb-6 mt-4 text-4xl font-bold">About</h1>
+        <h1 className="mt-4 mb-6 text-4xl font-bold">About</h1>
         <SecondaryCard icon={faScroll} title={<AnchorTitle title="History" />}>
           {aboutText.map((text) => (
             <div key={text} className="mb-4">
@@ -141,7 +141,7 @@ const About = () => {
               {technologies.map((tech) => (
                 <div key={tech.section} className="mb-2">
                   <h3 className="mb-3 font-semibold text-blue-400">{tech.section}</h3>
-                  <ul className="space-y-3">
+                  <ul className="flex flex-col gap-3">
                     {Object.entries(tech.tools).map(([name, details]) => (
                       <li key={name} className="flex flex-row items-center gap-2">
                         <Image

frontend/src/app/global-error.tsx

@@ -40,7 +40,7 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ statusCode, title, m
           <p className="font-inter mt-2 text-lg text-black dark:text-white">{message}</p>
           <Button
             onPress={() => router.push('/')}
-            className="font-inter mt-8 h-12 w-40 rounded-lg bg-owasp-blue text-base font-medium text-white transition-colors hover:bg-blue-400"
+            className="font-inter bg-owasp-blue mt-8 h-12 w-40 rounded-lg text-base font-medium text-white transition-colors hover:bg-blue-400"
           >
             Return To Home
           </Button>