chore: update tailwindcss

Author: vincentchalamon

pwa/components/book/Filters.tsx

@@ -51,7 +51,7 @@ export const Filters: FunctionComponent<Props> = ({ filters, mutation }) => (
     }) => (
       <form onSubmit={handleSubmit}>
         <FormGroup className="mb-4">
-          <FormControlLabel name="author" labelPlacement="top" className="!m-0" label={
+          <FormControlLabel name="author" labelPlacement="top" className="m-0!" label={
             <Typography className="font-semibold w-full">Author</Typography>
           } control={
             <TextField value={values?.author ?? ""} placeholder="Search by author..." type="search"
@@ -63,7 +63,7 @@ export const Filters: FunctionComponent<Props> = ({ filters, mutation }) => (
           }/>
         </FormGroup>
         <FormGroup className="mb-4">
-          <FormControlLabel name="title" labelPlacement="top" className="!m-0" label={
+          <FormControlLabel name="title" labelPlacement="top" className="m-0!" label={
             <Typography className="font-semibold w-full">Title</Typography>
           } control={
             <TextField value={values?.title ?? ""} placeholder="Search by title..." type="search"

pwa/components/book/Show.tsx

@@ -137,7 +137,7 @@ export const Show: NextPage<Props> = ({ data, hubURL }) => {
               <p className="text-justify leading-7 my-8" data-testid="book-description">
                 {book["description"] ?? "This book has no description."}
               </p>
-              <button className="mt-4 px-10 py-4 font-semibold text-sm bg-cyan-500 text-white rounded-full shadow-sm"
+              <button className="mt-4 px-10 py-4 font-semibold text-sm bg-cyan-500 text-white rounded-full shadow-xs"
                       onClick={() => bookmarkMutation.mutate({ book: book["@id"] })} data-testid="bookmark">
                 {!!bookmark && (
                   <>

pwa/components/common/Error.tsx

@@ -5,7 +5,7 @@ interface Props {
 export const Error = ({ message }: Props) => (
   <div id="alert-border-2" role="alert"
        className="flex items-center p-4 mb-4 text-red-800 border-t-4 border-red-300 bg-red-50 dark:text-red-400 dark:bg-gray-800 dark:border-red-800">
-    <svg className="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+    <svg className="shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
          fill="currentColor" viewBox="0 0 20 20">
       <path
         d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
@@ -14,7 +14,7 @@ export const Error = ({ message }: Props) => (
       {message}
     </div>
     <button type="button" data-dismiss-target="#alert-border-2" aria-label="Close"
-            className="ml-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700">
+            className="ml-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-sm focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700">
       <span className="sr-only">Dismiss</span>
       <svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 14 14">

pwa/components/common/Loading.tsx

@@ -2,13 +2,13 @@ export const Loading = () => (
   <div className="animate-pulse flex space-x-4 h-64 p-4 w-[180px]" data-testid="loading">
     <div className="rounded-full bg-slate-700 h-10 w-[40px]"></div>
     <div className="flex-1 space-y-6 py-1">
-      <div className="h-2 bg-slate-700 rounded"></div>
+      <div className="h-2 bg-slate-700 rounded-sm"></div>
       <div className="space-y-3">
         <div className="grid grid-cols-3 gap-4">
-          <div className="h-2 bg-slate-700 rounded col-span-2"></div>
-          <div className="h-2 bg-slate-700 rounded col-span-1"></div>
+          <div className="h-2 bg-slate-700 rounded-sm col-span-2"></div>
+          <div className="h-2 bg-slate-700 rounded-sm col-span-1"></div>
         </div>
-        <div className="h-2 bg-slate-700 rounded"></div>
+        <div className="h-2 bg-slate-700 rounded-sm"></div>
       </div>
     </div>
   </div>

pwa/components/review/Form.tsx

@@ -100,7 +100,7 @@ export const Form: FunctionComponent<Props> = ({ book, onSuccess, review, userna
           </FormGroup>
           <FormGroup>
             <TextareaAutosize
-              className="mt-2 mb-2 text-justify text-sm font-normal font-sans leading-5 p-3 rounded rounded-br-none shadow-md shadow-slate-100 focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 focus:border-purple-500 bg-white text-slate-900 focus-visible:outline-0"
+              className="mt-2 mb-2 text-justify text-sm font-normal font-sans leading-5 p-3 rounded-sm rounded-br-none shadow-md shadow-slate-100 focus:shadow-outline-purple focus:shadow-lg border border-solid border-slate-300 hover:border-purple-500 focus:border-purple-500 bg-white text-slate-900 focus-visible:outline-0"
               // @ts-expect-error Ignore Eslint error
               aria-label="Review body" name="body" value={values?.body ?? ""} placeholder="Add a review..."
               onChange={handleChange} onBlur={handleBlur} data-testid="review-body"
@@ -120,7 +120,7 @@ export const Form: FunctionComponent<Props> = ({ book, onSuccess, review, userna
               {status.msg}
             </div>
           )}
-          <button className="mt-4 px-10 py-3 font-semibold text-sm bg-cyan-500 text-white rounded shadow-sm"
+          <button className="mt-4 px-10 py-3 font-semibold text-sm bg-cyan-500 text-white rounded-sm shadow-xs"
                   type="submit" disabled={isSubmitting}>
             Submit
           </button>

pwa/components/review/List.tsx

@@ -73,7 +73,7 @@ export const List: FunctionComponent<Props> = ({ book }) => {
         </div>
       ) || (
         <div className="flex mb-10">
-          <button className="px-10 py-4 font-semibold text-sm bg-cyan-500 text-white rounded shadow-sm mx-auto"
+          <button className="px-10 py-4 font-semibold text-sm bg-cyan-500 text-white rounded-sm shadow-xs mx-auto"
                   onClick={() => signIn("keycloak")}>
             Log in to add a review!
           </button>

pwa/package.json

@@ -17,10 +17,10 @@
     "@mui/icons-material": "latest-v5",
     "@mui/material": "latest-v5",
     "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/postcss": "^4.1.18",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-query-next-experimental": "^5.91.0",
-    "autoprefixer": "^10.4.24",
     "formik": "^2.4.9",
     "next": "^16.1.6",
     "next-auth": "5.0.0-beta.30",
@@ -37,7 +37,7 @@
     "react-spinners": "^0.15.0",
     "sharp": "^0.34.5",
     "slugify": "^1.6.6",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.1.18",
     "yup": "^1.7.1"
   },
   "devDependencies": {