bin/rails tailwindcss:upgrade

app/assets/stylesheets/application.tailwind.css

@@ -1,19 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-.msg-notice {
-  @apply bg-green-300 text-green-900;
-}
-.msg-alert {
-  @apply bg-red-300 text-red-900;
-}
-/*
-
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
-  }
-}
-
-*/

app/assets/tailwind/application.css

@@ -0,0 +1,39 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/aspect-ratio';
+@plugin '@tailwindcss/typography';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+.msg-notice {
+  @apply bg-green-300 text-green-900;
+}
+.msg-alert {
+  @apply bg-red-300 text-red-900;
+}
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/