update tailwindcss@4

components/book/index.tsx

@@ -39,7 +39,7 @@ function BookForm() {
         <Contact />
         <div className="mb-3">
           <label className="form-check-label inline-block text-gray-800 cursor-pointer" htmlFor="termsAgreed">
-            <input className="form-check-input h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="termsAgreed" name="termsAgreed" required onChange={onChangeEvent} />
+            <input className="form-check-input h-4 w-4 border border-gray-300 rounded-xs bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-hidden transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer" type="checkbox" value="" id="termsAgreed" name="termsAgreed" required onChange={onChangeEvent} />
             Ich stimme den <Link href="./terms" target="_blank" className="underline hover:text-blue-700">Mietbedingungen</Link> zu <Required />
           </label>
         </div>
@@ -48,7 +48,7 @@ function BookForm() {
             {postData ? 'Speichern...' : 'Absenden'}
           </Button>
           {postDataError && (
-            <div className="error-message flex-grow">{postDataError}</div>
+            <div className="error-message grow">{postDataError}</div>
           )}
         </div>
       </form>

components/bookingTable.tsx

@@ -37,7 +37,7 @@ export default function BookingTable({ booking }: { booking: IBooking }) {
   return (
     <div
       key={booking.uuid}
-      className="mt-6 mb-6 bg-white border border-slate-100 shadow overflow-hidden sm:rounded-lg"
+      className="mt-6 mb-6 bg-white border border-slate-100 shadow-sm overflow-hidden sm:rounded-lg"
     >
       <div className="px-4 py-5 sm:px-6">
         <h3 className="text-lg leading-6 font-medium text-gray-900">

components/calendar.tsx

@@ -145,11 +145,11 @@ export default function MyCalendar({
       </Loading>
       <div className="mt-3 flex justify-center">
         <div>
-          <div className="inline-block w-5 h-5 bg-green-200 rounded align-text-bottom"></div>
+          <div className="inline-block w-5 h-5 bg-green-200 rounded-sm align-text-bottom"></div>
           <span className="ml-2">Frei</span>
         </div>
         <div>
-          <div className="ml-6 inline-block w-5 h-5 bg-red-200 rounded align-text-bottom"></div>
+          <div className="ml-6 inline-block w-5 h-5 bg-red-200 rounded-sm align-text-bottom"></div>
           <span className="ml-2">Belegt</span>
         </div>
       </div>

components/footer.tsx

@@ -6,7 +6,7 @@ export default function Footer() {
   return (
     <footer>
       <div className="flex flex-col sm:flex-row max-w-7xl mx-auto px-4 sm:px-6 my-5">
-        <div className="flex-grow">
+        <div className="grow">
           <Link href="/" className="underline">
               <Logo className="h-12 w-auto sm:h-14" />
           </Link>

components/input.tsx

@@ -17,7 +17,7 @@ export default function Input(props: InputProps) {
   } = props
 
   const defaultClasses =
-    'appearance-none bg-gray-50 text-gray-500 border rounded py-2 px-3 mb-3 leading-tight disabled:bg-gray-200 disabled:cursor-not-allowed focus: outline-none focus:bg-white w-full'
+    'appearance-none bg-gray-50 text-gray-500 border rounded-sm py-2 px-3 mb-3 leading-tight disabled:bg-gray-200 disabled:cursor-not-allowed focus: outline-hidden focus:bg-white w-full'
   const classes = `${defaultClasses} ${className}`
 
   return (

components/select.tsx

@@ -21,7 +21,7 @@ export default function Select({
         </label>
         <div className="relative">
           <select
-            className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+            className="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-hidden focus:bg-white focus:border-gray-500"
             id={name}
             name={name}
             value={value}

components/user.tsx

@@ -16,7 +16,7 @@ export default function User() {
       >
         Admin
       </Link>
-      <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
+      <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-xs">
         {data.user.email}
       </div>
       <button onClick={() => signOut()} className="btn btn-blue">

package.json

@@ -33,6 +33,7 @@
     "react-dom": "19.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.17",
     "@types/nodemailer": "^6.4.17",
     "@types/uuid": "10.0.0",
     "eslint": "8.57.0",
@@ -40,11 +41,9 @@
     "eslint-config-prettier": "9.1.0",
     "jest": "29.7.0",
     "postcss": "^8.5.3",
-    "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-preset-env": "^10.1.5",
     "prettier": "3.5.3",
     "swr": "2.3.3",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "^4.0.17",
     "ts-jest": "29.3.0"
   },
   "jest": {

pages/admin/bookings/[uuid]/index.tsx

@@ -38,7 +38,7 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: IBooking }) {
       <Calendar start={booking.startDate} end={booking.endDate} />
       <BookingTable booking={booking} />
       {storingBookingError && (
-        <div className="error-message flex-grow">{storingBookingError}</div>
+        <div className="error-message grow">{storingBookingError}</div>
       )}
       <div className="my-6">
         <button

pages/bookings/[uuid]/index.tsx

@@ -49,7 +49,7 @@ export default function ShowBooking({
         <strong>Buchungszeitraum:</strong> {daysFormatFrontend(booking.days)}
       </div>
       {storingBookingError && (
-        <div className="error-message flex-grow">{storingBookingError}</div>
+        <div className="error-message grow">{storingBookingError}</div>
       )}
       {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
         booking.status

pages/index.tsx

@@ -33,7 +33,7 @@ export default function Home() {
           </Link>
         </p>
         <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
-          <div className="rounded-md shadow">
+          <div className="rounded-md shadow-sm">
             <Link
               href="/book"
               className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5"

postcss.config.js

@@ -1,18 +0,0 @@
-module.exports = {
-  plugins: [
-    'tailwindcss',
-    'postcss-flexbugs-fixes',
-    [
-      'postcss-preset-env',
-      {
-        autoprefixer: {
-          flexbox: 'no-2009',
-        },
-        stage: 3,
-        features: {
-          'custom-properties': false,
-        },
-      },
-    ],
-  ],
-}

postcss.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

styles/index.css

@@ -1,10 +1,4 @@
-@tailwind base;
+@import 'tailwindcss';
-
-/* Write your own custom base styles here */
-
-/* Start purging... */
-@tailwind components;
-/* Stop purging. */
 
 /* Your own custom utilities */
 
@@ -102,9 +96,11 @@
 .react-calendar__navigation button[disabled] {
   @apply text-gray-700 cursor-not-allowed;
 }
+
 .react-calendar__month-view__weekdays {
   @apply text-sm text-center uppercase font-bold;
 }
+
 .react-calendar__month-view__weekdays__weekday {
   @apply p-1;
 }
@@ -116,19 +112,22 @@
 .react-calendar__month-view__weekNumbers {
   @apply font-bold;
 }
+
 .react-calendar__month-view__weekNumbers .react-calendar__tile {
   @apply flex items-center content-center;
 }
+
 .react-calendar__month-view__days__day--weekend {
   @apply text-red-600;
 }
+
 .react-calendar__month-view__days__day--neighboringMonth {
   @apply text-gray-600;
 }
+
 .react-calendar__year-view .react-calendar__tile,
 .react-calendar__decade-view .react-calendar__tile,
-.react-calendar__century-view .react-calendar__tile {
+.react-calendar__century-view .react-calendar__tile {}
-}
 
 .react-calendar__tile {
   @apply py-1;