Upgrade TailwindCSS to v.4.1.12 (#2153)

* Upgrade TailwindCSS to v.4

* Update classes

* Update classes and apply Code Rabbit suggestions

* Fix tests

* Apply suggestions

* Update code

---------

Co-authored-by: Arkadii Yakovets <[email protected]>

Author: kasya

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

@@ -316,7 +316,7 @@ describe('Footer', () => {
       expect(footer).toHaveClass(
         'mt-auto',
         'w-full',
-        'border-t',
+        'border-t-1',
         'bg-slate-200',
         'dark:bg-slate-800',
         'xl:max-w-full'

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/MultiSearch.test.tsx

@@ -146,7 +146,7 @@ describe('Rendering', () => {
       'h-12',
       'w-full',
       'rounded-lg',
-      'border',
+      'border-1',
       'border-gray-300',
       'pl-10',
       'pr-10',

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-1 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/docker/Dockerfile

@@ -27,7 +27,7 @@ COPY --chmod=444 package.json pnpm-lock.yaml ./
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
     pnpm install --frozen-lockfile --ignore-scripts
 
-COPY --chmod=444 .env .pnpmrc next.config.ts postcss.config.js tailwind.config.js tsconfig.json ./
+COPY --chmod=444 .env .pnpmrc next.config.ts postcss.config.js tailwind.config.mjs tsconfig.json ./
 COPY --chmod=555 public public
 COPY --chmod=555 src src
 

frontend/docker/Dockerfile.e2e.test

@@ -19,6 +19,6 @@ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
 
 COPY __tests__/e2e __tests__/e2e
 COPY __tests__/unit/data __tests__/unit/data
-COPY .pnpmrc next.config.ts postcss.config.js playwright.config.ts tailwind.config.js tsconfig.json ./
+COPY .pnpmrc next.config.ts postcss.config.js playwright.config.ts tailwind.config.mjs tsconfig.json ./
 COPY public public
 COPY src src

frontend/package.json

@@ -43,7 +43,7 @@
     "clsx": "^2.1.1",
     "core-js": "^3.45.1",
     "date-fns": "^4.1.0",
-    "dayjs": "^1.11.15",
+    "dayjs": "^1.11.17",
     "dompurify": "^3.2.6",
     "eslint-plugin-import": "^2.32.0",
     "framer-motion": "^12.23.12",
@@ -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",