chore(tailwind): upgrade to tailwind v4

package.json

@@ -118,6 +118,7 @@
     "@commitlint/config-conventional": "17.4.4",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.2.1",
     "@tailwindcss/typography": "^0.5.16",
     "@types/bcrypt": "6.0.0",
     "@types/cookie-parser": "1.4.10",
@@ -144,7 +145,6 @@
     "@types/yup": "0.29.14",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
-    "autoprefixer": "^10.4.23",
     "baseline-browser-mapping": "^2.8.32",
     "commitizen": "4.3.1",
     "copyfiles": "2.4.1",
@@ -166,8 +166,8 @@
     "postcss": "^8.5.6",
     "prettier": "3.8.1",
     "prettier-plugin-organize-imports": "4.3.0",
-    "prettier-plugin-tailwindcss": "0.6.14",
-    "tailwindcss": "3.4.19",
+    "prettier-plugin-tailwindcss": "0.7.2",
+    "tailwindcss": "4.2.1",
     "ts-node": "10.9.2",
     "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",

postcss.config.js

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

src/components/Blocklist/index.tsx

@@ -111,8 +111,8 @@ const Blocklist = () => {
       <div className="mb-4 flex flex-col justify-between lg:flex-row lg:items-end">
         <Header>{intl.formatMessage(globalMessages.blocklist)}</Header>
 
-        <div className="mt-2 flex flex-grow flex-col sm:flex-row lg:flex-grow-0">
-          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 lg:flex-grow-0">
+        <div className="mt-2 flex grow flex-col sm:flex-row lg:grow-0">
+          <div className="mb-2 flex grow sm:mr-2 sm:mb-0 lg:grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
               <FunnelIcon className="h-6 w-6" />
             </span>
@@ -143,7 +143,7 @@ const Blocklist = () => {
             </select>
           </div>
 
-          <div className="mb-2 flex flex-grow sm:mb-0 sm:mr-2 md:flex-grow-0">
+          <div className="mb-2 flex grow sm:mr-2 sm:mb-0 md:grow-0">
             <span className="inline-flex cursor-default items-center rounded-l-md border border-r-0 border-gray-500 bg-gray-800 px-3 text-sm text-gray-100">
               <MagnifyingGlassIcon className="h-6 w-6" />
             </span>
@@ -340,14 +340,14 @@ const BlocklistedItem = ({ item, revalidateList }: BlocklistedItemProps) => {
         </div>
       )}
       <div className="relative flex w-full flex-col justify-between overflow-hidden sm:flex-row">
-        <div className="relative z-10 flex w-full items-center overflow-hidden pl-4 pr-4 sm:pr-0 xl:w-7/12 2xl:w-2/3">
+        <div className="relative z-10 flex w-full items-center overflow-hidden pr-4 pl-4 sm:pr-0 xl:w-7/12 2xl:w-2/3">
           <Link
             href={
               item.mediaType === 'movie'
                 ? `/movie/${item.tmdbId}`
                 : `/tv/${item.tmdbId}`
             }
-            className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
+            className="relative h-auto w-12 shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105"
           >
             <CachedImage
               type="tmdb"
@@ -385,7 +385,7 @@ const BlocklistedItem = ({ item, revalidateList }: BlocklistedItemProps) => {
           </div>
         </div>
 
-        <div className="z-10 ml-4 mt-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:ml-2 sm:mt-0 xl:flex-1 xl:pr-0">
+        <div className="z-10 mt-4 ml-4 flex w-full flex-col justify-center overflow-hidden pr-4 text-sm sm:mt-0 sm:ml-2 xl:flex-1 xl:pr-0">
           <div className="card-field">
             <span className="card-field-name">Status</span>
             <Badge badgeType="danger">
@@ -442,21 +442,21 @@ const BlocklistedItem = ({ item, revalidateList }: BlocklistedItemProps) => {
           <div className="card-field">
             {item.mediaType === 'movie' ? (
               <div className="pointer-events-none z-40 self-start rounded-full border border-blue-500 bg-blue-600/80 shadow-md">
-                <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
+                <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium tracking-wider text-white uppercase sm:h-5">
                   {intl.formatMessage(globalMessages.movie)}
                 </div>
               </div>
             ) : (
               <div className="pointer-events-none z-40 self-start rounded-full border border-purple-600 bg-purple-600/80 shadow-md">
-                <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
+                <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium tracking-wider text-white uppercase sm:h-5">
                   {intl.formatMessage(globalMessages.tvshow)}
                 </div>
               </div>
             )}
           </div>
         </div>
       </div>
-      <div className="z-10 mt-4 flex w-full flex-col justify-center space-y-2 pl-4 pr-4 xl:mt-0 xl:w-96 xl:items-end xl:pl-0">
+      <div className="z-10 mt-4 flex w-full flex-col justify-center space-y-2 pr-4 pl-4 xl:mt-0 xl:w-96 xl:items-end xl:pl-0">
         {hasPermission(Permission.MANAGE_BLOCKLIST) && (
           <ConfirmButton
             onClick={() =>

src/components/BlocklistBlock/index.tsx

@@ -81,7 +81,7 @@ const BlocklistBlock = ({
             {data.user ? (
               <>
                 <Tooltip content={intl.formatMessage(messages.blocklistedby)}>
-                  <UserIcon className="mr-1.5 h-5 w-5 min-w-0 flex-shrink-0" />
+                  <UserIcon className="mr-1.5 h-5 w-5 min-w-0 shrink-0" />
                 </Tooltip>
                 <span className="w-40 truncate md:w-auto">
                   <Link
@@ -107,7 +107,7 @@ const BlocklistBlock = ({
             ) : null}
           </div>
         </div>
-        <div className="ml-2 flex flex-shrink-0 flex-wrap">
+        <div className="ml-2 flex shrink-0 flex-wrap">
           <Tooltip
             content={intl.formatMessage(globalMessages.removefromBlocklist)}
           >
@@ -131,7 +131,7 @@ const BlocklistBlock = ({
         </div>
         <div className="mt-2 flex items-center text-sm leading-5 sm:mt-0">
           <Tooltip content={intl.formatMessage(messages.blocklistdate)}>
-            <CalendarIcon className="mr-1.5 h-5 w-5 flex-shrink-0" />
+            <CalendarIcon className="mr-1.5 h-5 w-5 shrink-0" />
           </Tooltip>
           <span>
             {intl.formatDate(data.createdAt, {

src/components/BlocklistedTagsBadge/index.tsx

@@ -46,7 +46,7 @@ const BlocklistedTagsBadge = ({ data }: BlocklistedTagsBadgeProps) => {
     >
       <Badge
         badgeType="dark"
-        className="items-center border border-red-500 !text-red-400"
+        className="items-center border border-red-500 text-red-400!"
       >
         <TagIcon className="mr-1 h-4" />
         {intl.formatMessage(messages.blocklistedTagsText)}

src/components/Common/Alert/index.tsx

@@ -12,7 +12,7 @@ interface AlertProps {
 
 const Alert = ({ title, children, type }: AlertProps) => {
   let design = {
-    bgColor: 'border border-yellow-500 backdrop-blur bg-yellow-400/20',
+    bgColor: 'border border-yellow-500 backdrop-blur-sm bg-yellow-400/20',
     titleColor: 'text-yellow-100',
     textColor: 'text-yellow-300',
     svg: <ExclamationTriangleIcon className="h-5 w-5" />,
@@ -21,7 +21,7 @@ const Alert = ({ title, children, type }: AlertProps) => {
   switch (type) {
     case 'info':
       design = {
-        bgColor: 'border border-indigo-500 backdrop-blur bg-indigo-400/20',
+        bgColor: 'border border-indigo-500 backdrop-blur-sm bg-indigo-400/20',
         titleColor: 'text-gray-100',
         textColor: 'text-gray-300',
         svg: <InformationCircleIcon className="h-5 w-5" />,
@@ -40,7 +40,7 @@ const Alert = ({ title, children, type }: AlertProps) => {
   return (
     <div className={`mb-4 rounded-md p-4 ${design.bgColor}`}>
       <div className="flex">
-        <div className={`flex-shrink-0 ${design.titleColor}`}>{design.svg}</div>
+        <div className={`shrink-0 ${design.titleColor}`}>{design.svg}</div>
         <div className="ml-3">
           {title && (
             <div className={`text-sm font-medium ${design.titleColor}`}>

src/components/Common/Badge/index.tsx

@@ -24,49 +24,49 @@ const Badge = (
   ];
 
   if (href) {
-    badgeStyle.push('transition cursor-pointer !no-underline');
+    badgeStyle.push('transition cursor-pointer no-underline!');
   } else {
     badgeStyle.push('cursor-default');
   }
 
   switch (badgeType) {
     case 'danger':
-      badgeStyle.push('bg-red-600/80 border-red-500 border !text-red-100');
+      badgeStyle.push('bg-red-600/80 border-red-500 border text-red-100!');
       if (href) {
         badgeStyle.push('hover:bg-red-500');
       }
       break;
     case 'warning':
       badgeStyle.push(
-        'bg-yellow-500/80 border-yellow-500 border !text-yellow-100'
+        'bg-yellow-500/80 border-yellow-500 border text-yellow-100!'
       );
       if (href) {
         badgeStyle.push('hover:bg-yellow-500');
       }
       break;
     case 'success':
       badgeStyle.push(
-        'bg-green-500/80 border border-green-500 !text-green-100'
+        'bg-green-500/80 border border-green-500 text-green-100!'
       );
       if (href) {
         badgeStyle.push('hover:bg-green-500');
       }
       break;
     case 'dark':
-      badgeStyle.push('bg-gray-900 !text-gray-400');
+      badgeStyle.push('bg-gray-900 text-gray-400!');
       if (href) {
         badgeStyle.push('hover:bg-gray-800');
       }
       break;
     case 'light':
-      badgeStyle.push('bg-gray-700 !text-gray-300');
+      badgeStyle.push('bg-gray-700 text-gray-300!');
       if (href) {
         badgeStyle.push('hover:bg-gray-600');
       }
       break;
     default:
       badgeStyle.push(
-        'bg-indigo-500/80 border border-indigo-500 !text-indigo-100'
+        'bg-indigo-500/80 border border-indigo-500 text-indigo-100!'
       );
       if (href) {
         badgeStyle.push('hover:bg-indigo-500');

src/components/Common/Button/index.tsx

@@ -47,12 +47,12 @@ function Button<P extends ElementTypes = 'button'>(
   ref?: React.Ref<Element<P>>
 ): JSX.Element {
   const buttonStyle = [
-    'inline-flex items-center justify-center border leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 cursor-pointer disabled:opacity-50 whitespace-nowrap',
+    'inline-flex items-center justify-center border leading-5 font-medium rounded-md focus:outline-hidden transition ease-in-out duration-150 cursor-pointer disabled:opacity-50 whitespace-nowrap',
   ];
   switch (buttonType) {
     case 'primary':
       buttonStyle.push(
-        'text-white border border-indigo-500 bg-indigo-600/80 hover:bg-indigo-600 hover:border-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-600 active:border-indigo-700'
+        'text-white border-indigo-500 bg-indigo-600/80 hover:bg-indigo-600 hover:border-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-600 active:border-indigo-700'
       );
       break;
     case 'danger':
@@ -62,7 +62,7 @@ function Button<P extends ElementTypes = 'button'>(
       break;
     case 'warning':
       buttonStyle.push(
-        'text-white border border-yellow-500 bg-yellow-500/80 hover:bg-yellow-500 hover:border-yellow-400 focus:border-yellow-700 focus:ring-yellow active:bg-yellow-500 active:border-yellow-700'
+        'text-white border-yellow-500 bg-yellow-500/80 hover:bg-yellow-500 hover:border-yellow-400 focus:border-yellow-700 focus:ring-yellow active:bg-yellow-500 active:border-yellow-700'
       );
       break;
     case 'success':

src/components/Common/ButtonWithDropdown/index.tsx

@@ -45,7 +45,7 @@ const ButtonWithDropdown = ({
     <Menu as="div" className="relative z-10 inline-flex">
       <TriggerElement
         type="button"
-        className={`relative z-10 inline-flex h-full items-center px-4 py-2 text-sm font-medium leading-5 transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-none ${
+        className={`relative z-10 inline-flex h-full items-center px-4 py-2 text-sm leading-5 font-medium transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-hidden ${
           styleClasses.mainButtonClasses
         } ${children ? 'rounded-l-md' : 'rounded-md'} ${className}`}
         {...(props as Record<string, string>)}
@@ -56,7 +56,7 @@ const ButtonWithDropdown = ({
         <span className="relative -ml-px block">
           <Menu.Button
             type="button"
-            className={`relative z-10 inline-flex h-full items-center rounded-r-md px-2 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 ${styleClasses.dropdownSideButtonClasses}`}
+            className={`relative z-10 inline-flex h-full items-center rounded-r-md px-2 py-2 text-sm leading-5 font-medium text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 ${styleClasses.dropdownSideButtonClasses}`}
             aria-label="Expand"
           >
             {dropdownIcon ? dropdownIcon : <ChevronDownIcon />}

src/components/Common/Dropdown/index.tsx

@@ -22,9 +22,9 @@ const DropdownItem = ({
     <Menu.Item>
       <a
         className={[
-          'button-md flex cursor-pointer items-center rounded px-4 py-2 text-sm leading-5 text-white focus:text-white focus:outline-none',
+          'button-md flex cursor-pointer items-center rounded-sm px-4 py-2 text-sm leading-5 text-white focus:text-white focus:outline-hidden',
           buttonType === 'ghost'
-            ? 'bg-transparent from-indigo-600 to-purple-600 hover:bg-gradient-to-br focus:border-gray-500'
+            ? 'bg-transparent from-indigo-600 to-purple-600 hover:bg-linear-to-br focus:border-gray-500'
             : 'bg-indigo-600 hover:bg-indigo-500 focus:border-indigo-700',
         ].join(' ')}
         {...props}
@@ -57,9 +57,9 @@ const DropdownItems = ({
     >
       <Menu.Items
         className={[
-          'absolute right-0 z-40 -mr-1 mt-2 w-56 origin-top-right rounded-md p-1 shadow-lg',
+          'absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md p-1 shadow-lg',
           dropdownType === 'ghost'
-            ? 'border border-gray-700 bg-gray-800/80 backdrop-blur'
+            ? 'border border-gray-700 bg-gray-800/80 backdrop-blur-sm'
             : 'bg-indigo-600',
           className,
         ].join(' ')}
@@ -92,7 +92,7 @@ const Dropdown = ({
       <Menu.Button
         type="button"
         className={[
-          'button-md inline-flex h-full items-center space-x-2 rounded-md border px-4 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-none',
+          'button-md inline-flex h-full items-center space-x-2 rounded-md border px-4 py-2 text-sm leading-5 font-medium text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-hidden',
           buttonType === 'ghost'
             ? 'border-gray-600 bg-transparent hover:border-gray-200 focus:border-gray-100 active:border-gray-100'
             : `focus:ring-blue border-indigo-500 bg-indigo-600/80 hover:border-indigo-500 hover:bg-indigo-600 active:border-indigo-700 active:bg-indigo-700`,

src/components/Common/Header/index.tsx

@@ -9,7 +9,7 @@ const Header = ({ children, extraMargin = 0, subtext }: HeaderProps) => {
     <div className="mt-8 md:flex md:items-center md:justify-between">
       <div className={`min-w-0 flex-1 mx-${extraMargin}`}>
         <h2
-          className="mb-4 truncate text-2xl font-bold leading-7 text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0"
+          className="mb-4 truncate text-2xl leading-7 font-bold text-gray-100 sm:overflow-visible sm:text-4xl sm:leading-9 md:mb-0"
           data-testid="page-header"
         >
           <span className="text-overseerr">{children}</span>

src/components/Common/List/index.tsx

@@ -12,7 +12,7 @@ const ListItem = ({ title, className, children }: ListItemProps) => {
       <div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
         <dt className="block text-sm font-bold text-gray-400">{title}</dt>
         <dd className="flex text-sm text-white sm:col-span-2 sm:mt-0">
-          <span className={`flex-grow ${className}`}>{children}</span>
+          <span className={`grow ${className}`}>{children}</span>
         </dd>
       </div>
     </div>

src/components/Common/Modal/index.tsx

@@ -91,7 +91,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       <Transition.Child
         appear
         as="div"
-        className="fixed bottom-0 left-0 right-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-800/70"
+        className="fixed top-0 right-0 bottom-0 left-0 z-50 flex h-full w-full items-center justify-center bg-gray-800/70"
         enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
@@ -116,7 +116,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           </div>
         </Transition>
         <Transition
-          className={`hide-scrollbar relative inline-block w-full overflow-auto bg-gray-800 px-4 pb-4 pt-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle ${dialogClass}`}
+          className={`hide-scrollbar relative inline-block w-full overflow-auto bg-gray-800 px-4 pt-4 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle ${dialogClass}`}
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
@@ -135,7 +135,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           ref={modalRef}
         >
           {backdrop && (
-            <div className="absolute left-0 right-0 top-0 z-0 h-64 max-h-full w-full">
+            <div className="absolute top-0 right-0 left-0 z-0 h-64 max-h-full w-full">
               <CachedImage
                 type="tmdb"
                 alt=""
@@ -161,7 +161,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
                 <div className="flex flex-col space-y-1">
                   {title && (
                     <span
-                      className="text-overseerr truncate pb-0.5 text-2xl font-bold leading-6"
+                      className="text-overseerr truncate pb-0.5 text-2xl leading-6 font-bold"
                       id="modal-headline"
                       data-testid="modal-title"
                     >
@@ -170,7 +170,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
                   )}
                   {subTitle && (
                     <span
-                      className="truncate text-lg font-semibold leading-6 text-gray-200"
+                      className="truncate text-lg leading-6 font-semibold text-gray-200"
                       id="modal-headline"
                       data-testid="modal-title"
                     >

src/components/Common/MultiRangeSlider/index.tsx

@@ -83,7 +83,7 @@ const MultiRangeSlider = ({
           max={max}
           value={valueMax}
           step="1"
-          className={`pointer-events-none absolute left-0 right-0 top-0 z-20 h-2 w-full cursor-pointer appearance-none rounded-lg bg-transparent`}
+          className={`pointer-events-none absolute top-0 right-0 left-0 z-20 h-2 w-full cursor-pointer appearance-none rounded-lg bg-transparent`}
           onChange={(e) => {
             const value = Number(e.target.value);
 
@@ -95,7 +95,7 @@ const MultiRangeSlider = ({
         />
       </Tooltip>
       <div
-        className="pointer-events-none absolute top-0 z-30 ml-1 mr-1 h-2 bg-indigo-500"
+        className="pointer-events-none absolute top-0 z-30 mr-1 ml-1 h-2 bg-indigo-500"
         style={{
           left: `${minThumb}%`,
           right: `${100 - maxThumb}%`,

src/components/Common/SettingsTabs/index.tsx

@@ -42,7 +42,7 @@ const SettingsLink = ({
   }
 
   let linkClasses =
-    'px-1 py-4 ml-8 text-sm font-medium leading-5 transition duration-300 border-b-2 border-transparent whitespace-nowrap first:ml-0';
+    'px-1 py-4 ml-8 text-sm font-medium leading-5 transition duration-300 border-b-2 whitespace-nowrap first:ml-0';
   let activeLinkColor = 'text-indigo-500 border-indigo-600';
   let inactiveLinkColor =
     'text-gray-500 border-transparent hover:text-gray-300 hover:border-gray-400 focus:text-gray-300 focus:border-gray-400';