Tailwind v4

Author: driesvints

config/blade-ui-kit.php

@@ -17,7 +17,7 @@
 
     'components' => [
         // 'alert' => Components\Alerts\Alert::class,
-        'avatar' => Components\Support\Avatar::class,
+        // 'avatar' => Components\Support\Avatar::class,
         // 'carbon' => Components\DateTime\Carbon::class,
         // 'checkbox' => Components\Forms\Inputs\Checkbox::class,
         // 'color-picker' => Components\Forms\Inputs\ColorPicker::class,

package-lock.json

@@ -9,16 +9,14 @@
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.7",
         "@tailwindcss/typography": "^0.5.0",
+        "@tailwindcss/vite": "^4.1.4",
         "algoliasearch": "^4.8.4",
-        "autoprefixer": "^10.4.0",
         "axios": "^1.6",
         "choices.js": "^11.0.6",
         "highlight.js": "^11.9.0",
         "laravel-vite-plugin": "^1.0.1",
         "pixelmatch": "^5.0.0",
-        "postcss": "^8.4.31",
-        "postcss-import": "^16.0.0",
-        "tailwindcss": "^3.0.2",
+        "tailwindcss": "^4.1.4",
         "textarea-caret": "^3.1.0",
         "vite": "^6.2.0"
     }

package.json

@@ -1,20 +1,34 @@
-@import 'tailwindcss/base';
-
-@import 'highlight.js/styles/hybrid.css';
-
-@import 'tailwindcss/components';
-
-@import 'tailwindcss/utilities';
-
-@import 'articles.css';
-@import 'buttons.css';
-@import 'labels.css';
-@import 'modal.css';
-@import 'replies.css';
-@import 'tables.css';
-@import 'tags.css';
-
-@import url('https://rsms.me/inter/inter.css');
+@import 'tailwindcss';
+
+@import 'highlight.js/styles/hybrid.css' layer(base);
+
+@import './articles.css' layer(utilities);
+@import './buttons.css' layer(utilities);
+@import './labels.css' layer(utilities);
+@import './modal.css' layer(utilities);
+@import './replies.css' layer(utilities);
+@import './tables.css' layer(utilities);
+@import './tags.css' layer(utilities);
+
+@config '../../tailwind.config.js';
+
+/*
+  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);
+  }
+}
 
 .number-block {
     box-shadow: 20px 0 40px 5px #e6f6f3 inset, -20px 0 10px 5px #e6f6f3 inset;
@@ -28,7 +42,7 @@ a > span > em {
     @apply w-full;
 }
 
-@screen lg {
+@media (width >= theme(--breakpoint-lg)) {
     .search {
         width: 720px;
     }
@@ -80,7 +94,7 @@ svg .secondary {
 }
 
 .nav .dropdown a:focus {
-    @apply outline-none bg-gray-100;
+    @apply outline-hidden bg-gray-100;
 }
 
 .member:after {
@@ -100,51 +114,51 @@ svg .secondary {
 }
 
 .choices__inner {
-    @apply rounded-md border border-gray-300 w-full bg-white p-2 items-center !important;
+    @apply rounded-md! border! border-gray-300! w-full! bg-white! p-2! items-center!;
 }
 
 .choices__list--dropdown {
-    @apply border border-gray-300 !important;
+    @apply border! border-gray-300!;
 }
 
 .choices__list--single {
-    @apply p-0 !important;
+    @apply p-0!;
 }
 
 .choices__item {
-    @apply text-sm bg-gray-200 text-gray-700 cursor-pointer rounded-md px-2 py-1 my-0 border-0 !important;
+    @apply text-sm! bg-gray-200! text-gray-700! cursor-pointer! rounded-md! px-2! py-1! my-0! border-0!;
 }
 
 .choices__item.choices__item--choice {
-    @apply rounded-none py-2 !important;
+    @apply rounded-none! py-2!;
 }
 
 .choices__item.choices__item--choice.choices__item--selectable {
-    @apply bg-white rounded-none text-gray-700 p-2 !important;
+    @apply bg-white! rounded-none! text-gray-700! p-2!;
 }
 
 .choices__item.choices__item--choice.choices__item--selectable:hover {
-    @apply bg-gray-200 !important;
+    @apply bg-gray-200!;
 }
 
 .choices__item.choices__item--selectable {
-    @apply bg-lio-500 border-lio-500 text-white !important;
+    @apply bg-lio-500! border-lio-500! text-white!;
 }
 
 .choices__list--single > .choices__item.choices__item--selectable {
-    @apply bg-white text-gray-700 !important;
+    @apply bg-white! text-gray-700!;
 }
 
 .choices__item.is-highlighted {
-    @apply bg-lio-600 border-lio-600 text-white !important;
+    @apply bg-lio-600! border-lio-600! text-white!;
 }
 
 .choices[data-type*='select-one']:after {
-    border-color: theme('colors.gray.500') transparent transparent transparent !important;
+    border-color: var(--color-gray-500) transparent transparent transparent !important;
 }
 
 .choices[data-type*='select-one'] .choices__input {
-    @apply rounded-none border-b-2 border-gray-300 !important;
+    @apply rounded-none! border-b-2! border-gray-300!;
 }
 
 .editor li[aria-selected='true'] {

postcss.config.js

@@ -1,21 +1,21 @@
 .button {
-    @apply bg-gray-300 text-gray-700 rounded px-4 py-2 block text-center cursor-pointer font-sans;
+    @apply bg-gray-300 text-gray-700 rounded-sm px-4 py-2 block text-center cursor-pointer font-sans;
 }
 
 .button:hover {
     @apply bg-gray-400;
 }
 
 .button-primary {
-    @apply text-white bg-lio-500 !important;
+    @apply text-white! bg-lio-500!;
 }
 
 .button-primary:hover {
     @apply bg-lio-600;
 }
 
 .button-danger {
-    @apply text-white bg-red-600 !important;
+    @apply text-white! bg-red-600!;
 }
 
 .button-danger:hover {

public/vendor/horizon/app-dark.css

@@ -1,5 +1,5 @@
 .label {
-    @apply px-2 py-1 rounded text-xs uppercase bg-gray-300 text-gray-700 px-2 py-1 cursor-pointer;
+    @apply px-2 py-1 rounded-sm text-xs uppercase bg-gray-300 text-gray-700 px-2 py-1 cursor-pointer;
 }
 
 a.label:hover,