style: add new tailwind prettier plugin (#2465)

src/components/Layout/LanguagePicker/index.tsx

@@ -24,13 +24,13 @@ const LanguagePicker: React.FC = () => {
     <div className="relative">
       <div>
         <button
-          className={`p-1 rounded-full sm:p-2 hover:bg-gray-600 hover:text-white focus:outline-none focus:bg-gray-600 focus:ring-1 focus:ring-gray-500 focus:text-white ${
+          className={`rounded-full p-1 hover:bg-gray-600 hover:text-white focus:bg-gray-600 focus:text-white focus:outline-none focus:ring-1 focus:ring-gray-500 sm:p-2 ${
             isDropdownOpen ? 'bg-gray-600 text-white' : 'text-gray-400'
           }`}
           aria-label="Language Picker"
           onClick={() => setDropdownOpen(true)}
         >
-          <TranslateIcon className="w-6 h-6" />
+          <TranslateIcon className="h-6 w-6" />
         </button>
       </div>
       <Transition
@@ -43,10 +43,10 @@ const LanguagePicker: React.FC = () => {
         leaveTo="transform opacity-0 scale-95"
       >
         <div
-          className="absolute right-0 w-56 mt-2 origin-top-right rounded-md shadow-lg"
+          className="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg"
           ref={dropdownRef}
         >
-          <div className="px-3 py-2 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5">
+          <div className="rounded-md bg-gray-700 px-3 py-2 ring-1 ring-black ring-opacity-5">
             <div>
               <label
                 htmlFor="language"

src/components/Layout/Notifications/index.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 const Notifications: React.FC = () => {
   return (
     <button
-      className="p-1 text-gray-400 rounded-full hover:bg-gray-500 hover:text-white focus:outline-none focus:ring focus:text-white"
+      className="rounded-full p-1 text-gray-400 hover:bg-gray-500 hover:text-white focus:text-white focus:outline-none focus:ring"
       aria-label="Notifications"
     >
-      <BellIcon className="w-6 h-6" />
+      <BellIcon className="h-6 w-6" />
     </button>
   );
 };

src/components/Layout/SearchInput/index.tsx

@@ -17,14 +17,14 @@ const SearchInput: React.FC = () => {
         <label htmlFor="search_field" className="sr-only">
           Search
         </label>
-        <div className="relative flex items-center w-full text-white focus-within:text-gray-200">
-          <div className="absolute inset-y-0 flex items-center pointer-events-none left-4">
-            <SearchIcon className="w-5 h-5" />
+        <div className="relative flex w-full items-center text-white focus-within:text-gray-200">
+          <div className="pointer-events-none absolute inset-y-0 left-4 flex items-center">
+            <SearchIcon className="h-5 w-5" />
           </div>
           <input
             id="search_field"
             style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
-            className="block w-full py-2 pl-10 text-white placeholder-gray-300 bg-gray-900 border border-gray-600 rounded-full bg-opacity-80 focus:bg-opacity-100 focus:border-gray-500 hover:border-gray-500 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
+            className="block w-full rounded-full border border-gray-600 bg-gray-900 bg-opacity-80 py-2 pl-10 text-white placeholder-gray-300 hover:border-gray-500 focus:border-gray-500 focus:bg-opacity-100 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             value={searchValue}
@@ -44,10 +44,10 @@ const SearchInput: React.FC = () => {
           />
           {searchValue.length > 0 && (
             <button
-              className="absolute inset-y-0 p-1 m-auto text-gray-400 transition border-none outline-none right-2 h-7 w-7 focus:outline-none focus:border-none hover:text-white"
+              className="absolute inset-y-0 right-2 m-auto h-7 w-7 border-none p-1 text-gray-400 outline-none transition hover:text-white focus:border-none focus:outline-none"
               onClick={() => clear()}
             >
-              <XCircleIcon className="w-5 h-5" />
+              <XCircleIcon className="h-5 w-5" />
             </button>
           )}
         </div>

src/components/Layout/Sidebar/index.tsx

@@ -42,20 +42,20 @@ const SidebarLinks: SidebarLinkProps[] = [
   {
     href: '/',
     messagesKey: 'dashboard',
-    svgIcon: <SparklesIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <SparklesIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
   },
   {
     href: '/requests',
     messagesKey: 'requests',
-    svgIcon: <ClockIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <ClockIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/requests/,
   },
   {
     href: '/issues',
     messagesKey: 'issues',
     svgIcon: (
-      <ExclamationIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
+      <ExclamationIcon className="mr-3 h-6 w-6 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
     ),
     activeRegExp: /^\/issues/,
     requiredPermission: [
@@ -68,14 +68,14 @@ const SidebarLinks: SidebarLinkProps[] = [
   {
     href: '/users',
     messagesKey: 'users',
-    svgIcon: <UsersIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <UsersIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/users/,
     requiredPermission: Permission.MANAGE_USERS,
   },
   {
     href: '/settings',
     messagesKey: 'settings',
-    svgIcon: <CogIcon className="w-6 h-6 mr-3" />,
+    svgIcon: <CogIcon className="mr-3 h-6 w-6" />,
     activeRegExp: /^\/settings/,
     requiredPermission: Permission.MANAGE_SETTINGS,
   },
@@ -114,28 +114,28 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
               leaveTo="-translate-x-full"
             >
               <>
-                <div className="relative flex flex-col flex-1 w-full max-w-xs bg-gray-800 sidebar">
-                  <div className="absolute top-0 right-0 p-1 sidebar-close-button -mr-14">
+                <div className="sidebar relative flex w-full max-w-xs flex-1 flex-col bg-gray-800">
+                  <div className="sidebar-close-button absolute top-0 right-0 -mr-14 p-1">
                     <button
-                      className="flex items-center justify-center w-12 h-12 rounded-full focus:outline-none focus:bg-gray-600"
+                      className="flex h-12 w-12 items-center justify-center rounded-full focus:bg-gray-600 focus:outline-none"
                       aria-label="Close sidebar"
                       onClick={() => setClosed()}
                     >
-                      <XIcon className="w-6 h-6 text-white" />
+                      <XIcon className="h-6 w-6 text-white" />
                     </button>
                   </div>
                   <div
                     ref={navRef}
-                    className="flex flex-col flex-1 h-0 pt-8 pb-8 overflow-y-auto sm:pb-4"
+                    className="flex h-0 flex-1 flex-col overflow-y-auto pt-8 pb-8 sm:pb-4"
                   >
-                    <div className="flex items-center flex-shrink-0 px-2">
+                    <div className="flex flex-shrink-0 items-center px-2">
                       <span className="px-4 text-xl text-gray-50">
                         <a href="/">
                           <img src="/logo_full.svg" alt="Logo" />
                         </a>
                       </span>
                     </div>
-                    <nav className="flex-1 px-4 mt-16 space-y-4">
+                    <nav className="mt-16 flex-1 space-y-4 px-4">
                       {SidebarLinks.filter((link) =>
                         link.requiredPermission
                           ? hasPermission(link.requiredPermission, {
@@ -158,7 +158,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                               }}
                               role="button"
                               tabIndex={0}
-                              className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
+                              className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp
@@ -184,7 +184,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                     )}
                   </div>
                 </div>
-                <div className="flex-shrink-0 w-14">
+                <div className="w-14 flex-shrink-0">
                   {/* <!-- Force sidebar to shrink to fit close icon --> */}
                 </div>
               </>
@@ -194,17 +194,17 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
       </div>
 
       <div className="fixed top-0 bottom-0 left-0 z-30 hidden lg:flex lg:flex-shrink-0">
-        <div className="flex flex-col w-64 sidebar">
-          <div className="flex flex-col flex-1 h-0">
-            <div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
-              <div className="flex items-center flex-shrink-0">
+        <div className="sidebar flex w-64 flex-col">
+          <div className="flex h-0 flex-1 flex-col">
+            <div className="flex flex-1 flex-col overflow-y-auto pt-8 pb-4">
+              <div className="flex flex-shrink-0 items-center">
                 <span className="px-4 text-2xl text-gray-50">
                   <a href="/">
                     <img src="/logo_full.svg" alt="Logo" />
                   </a>
                 </span>
               </div>
-              <nav className="flex-1 px-4 mt-16 space-y-4">
+              <nav className="mt-16 flex-1 space-y-4 px-4">
                 {SidebarLinks.filter((link) =>
                   link.requiredPermission
                     ? hasPermission(link.requiredPermission, {
@@ -219,7 +219,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                       as={sidebarLink.as}
                     >
                       <a
-                        className={`flex group items-center px-2 py-2 text-lg leading-6 font-medium rounded-md text-white focus:outline-none transition ease-in-out duration-150
+                        className={`group flex items-center rounded-md px-2 py-2 text-lg font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none
                                 ${
                                   router.pathname.match(
                                     sidebarLink.activeRegExp

src/components/Layout/UserDropdown/index.tsx

@@ -33,14 +33,14 @@ const UserDropdown: React.FC = () => {
     <div className="relative ml-3">
       <div>
         <button
-          className="flex items-center max-w-xs text-sm rounded-full ring-1 ring-gray-700 focus:outline-none focus:ring-gray-500 hover:ring-gray-500"
+          className="flex max-w-xs items-center rounded-full text-sm ring-1 ring-gray-700 hover:ring-gray-500 focus:outline-none focus:ring-gray-500"
           id="user-menu"
           aria-label="User menu"
           aria-haspopup="true"
           onClick={() => setDropdownOpen(true)}
         >
           <img
-            className="w-8 h-8 rounded-full sm:w-10 sm:h-10"
+            className="h-8 w-8 rounded-full sm:h-10 sm:w-10"
             src={user?.avatar}
             alt=""
           />
@@ -56,11 +56,11 @@ const UserDropdown: React.FC = () => {
         leaveTo="transform opacity-0 scale-95"
       >
         <div
-          className="absolute right-0 w-48 mt-2 origin-top-right rounded-md shadow-lg"
+          className="absolute right-0 mt-2 w-48 origin-top-right rounded-md shadow-lg"
           ref={dropdownRef}
         >
           <div
-            className="py-1 bg-gray-700 rounded-md ring-1 ring-black ring-opacity-5"
+            className="rounded-md bg-gray-700 py-1 ring-1 ring-black ring-opacity-5"
             role="menu"
             aria-orientation="vertical"
             aria-labelledby="user-menu"
@@ -77,7 +77,7 @@ const UserDropdown: React.FC = () => {
                 }}
                 onClick={() => setDropdownOpen(false)}
               >
-                <UserIcon className="inline w-5 h-5 mr-2" />
+                <UserIcon className="mr-2 inline h-5 w-5" />
                 <span>{intl.formatMessage(messages.myprofile)}</span>
               </a>
             </Link>
@@ -93,7 +93,7 @@ const UserDropdown: React.FC = () => {
                 }}
                 onClick={() => setDropdownOpen(false)}
               >
-                <CogIcon className="inline w-5 h-5 mr-2" />
+                <CogIcon className="mr-2 inline h-5 w-5" />
                 <span>{intl.formatMessage(messages.settings)}</span>
               </a>
             </Link>
@@ -103,7 +103,7 @@ const UserDropdown: React.FC = () => {
               role="menuitem"
               onClick={() => logout()}
             >
-              <LogoutIcon className="inline w-5 h-5 mr-2" />
+              <LogoutIcon className="mr-2 inline h-5 w-5" />
               <span>{intl.formatMessage(messages.signout)}</span>
             </a>
           </div>

src/components/Layout/VersionStatus/index.tsx

@@ -50,20 +50,20 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
         }}
         role="button"
         tabIndex={0}
-        className={`flex items-center p-2 mx-2 text-xs transition duration-300 rounded-lg ring-1 ring-gray-700 ${
+        className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-gray-700 transition duration-300 ${
           data.updateAvailable
             ? 'bg-yellow-500 text-white hover:bg-yellow-400'
             : 'bg-gray-900 text-gray-300 hover:bg-gray-800'
         }`}
       >
         {data.commitTag === 'local' ? (
-          <CodeIcon className="w-6 h-6" />
+          <CodeIcon className="h-6 w-6" />
         ) : data.version.startsWith('develop-') ? (
-          <BeakerIcon className="w-6 h-6" />
+          <BeakerIcon className="h-6 w-6" />
         ) : (
-          <ServerIcon className="w-6 h-6" />
+          <ServerIcon className="h-6 w-6" />
         )}
-        <div className="flex flex-col flex-1 min-w-0 px-2 truncate last:pr-0">
+        <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
           <span className="font-bold">{versionStream}</span>
           <span className="truncate">
             {data.commitTag === 'local' ? (
@@ -75,13 +75,13 @@ const VersionStatus: React.FC<VersionStatusProps> = ({ onClick }) => {
             ) : data.commitsBehind === -1 ? (
               intl.formatMessage(messages.outofdate)
             ) : (
-              <code className="p-0 bg-transparent">
+              <code className="bg-transparent p-0">
                 {data.version.replace('develop-', '')}
               </code>
             )}
           </span>
         </div>
-        {data.updateAvailable && <ArrowCircleUpIcon className="w-6 h-6" />}
+        {data.updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
       </a>
     </Link>
   );

src/components/Layout/index.tsx

@@ -45,14 +45,14 @@ const Layout: React.FC = ({ children }) => {
   }, []);
 
   return (
-    <div className="flex h-full min-w-0 min-h-full bg-gray-900">
-      <div className="fixed inset-0 z-20 w-full h-1 border-gray-700 md:border-t pwa-only" />
-      <div className="absolute top-0 w-full h-64 from-gray-800 to-gray-900 bg-gradient-to-bl">
-        <div className="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" />
+    <div className="flex h-full min-h-full min-w-0 bg-gray-900">
+      <div className="pwa-only fixed inset-0 z-20 h-1 w-full border-gray-700 md:border-t" />
+      <div className="absolute top-0 h-64 w-full bg-gradient-to-bl from-gray-800 to-gray-900">
+        <div className="relative inset-0 h-full w-full bg-gradient-to-t from-gray-900 to-transparent" />
       </div>
       <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />
 
-      <div className="relative flex flex-col flex-1 w-0 min-w-0 mb-16 lg:ml-64">
+      <div className="relative mb-16 flex w-0 min-w-0 flex-1 flex-col lg:ml-64">
         <div
           className={`searchbar fixed left-0 right-0 top-0 z-10 flex flex-shrink-0 bg-opacity-80 transition duration-300 ${
             isScrolled ? 'bg-gray-700' : 'bg-transparent'
@@ -65,17 +65,17 @@ const Layout: React.FC = ({ children }) => {
           <button
             className={`px-4 text-white ${
               isScrolled ? 'opacity-90' : 'opacity-70'
-            } focus:outline-none lg:hidden transition duration-300`}
+            } transition duration-300 focus:outline-none lg:hidden`}
             aria-label="Open sidebar"
             onClick={() => setSidebarOpen(true)}
           >
-            <MenuAlt2Icon className="w-6 h-6" />
+            <MenuAlt2Icon className="h-6 w-6" />
           </button>
-          <div className="flex items-center justify-between flex-1 pr-4 md:pr-4 md:pl-4">
+          <div className="flex flex-1 items-center justify-between pr-4 md:pr-4 md:pl-4">
             <button
               className={`mr-2 text-white ${
                 isScrolled ? 'opacity-90' : 'opacity-70'
-              } transition duration-300 hover:text-white pwa-only focus:outline-none focus:text-white`}
+              } pwa-only transition duration-300 hover:text-white focus:text-white focus:outline-none`}
               onClick={() => router.back()}
             >
               <ArrowLeftIcon className="w-7" />
@@ -87,9 +87,9 @@ const Layout: React.FC = ({ children }) => {
           </div>
         </div>
 
-        <main className="relative z-0 top-16 focus:outline-none" tabIndex={0}>
+        <main className="relative top-16 z-0 focus:outline-none" tabIndex={0}>
           <div className="mb-6">
-            <div className="px-4 mx-auto max-w-8xl">{children}</div>
+            <div className="max-w-8xl mx-auto px-4">{children}</div>
           </div>
         </main>
       </div>