Update to Tailwind CSS v4

Author: daniel-cintra

package.json

@@ -8,10 +8,10 @@
     "devDependencies": {
         "eslint": "^9.5.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-vue": "^9.26.0",
-        "prettier": "^3.3.2",
+        "eslint-plugin-vue": "^9.32.0",
+        "prettier": "^3.4.2",
         "vue-eslint-parser": "^9.4.3",
-        "prettier-plugin-tailwindcss": "^0.6.8",
-        "tailwindcss": "^3.4.1"
+        "prettier-plugin-tailwindcss": "^v0.6.11",
+        "tailwindcss": "^4.0.0"
     }
 }

stubs/modules/Blog/views/post-index.blade.php

@@ -15,11 +15,11 @@
         <div class="mx-auto max-w-7xl px-6 lg:px-8">
             <!-- Section Title -->
             <div class="mx-auto max-w-2xl text-center">
-                <h2 class="text-3xl font-bold tracking-tight text-skin-neutral-11 sm:text-4xl">
+                <h2 class="text-skin-neutral-11 text-3xl font-bold tracking-tight sm:text-4xl">
                     Blog
                 </h2>
 
-                <p class="mt-2 text-lg leading-8 text-skin-neutral-12">
+                <p class="text-skin-neutral-12 mt-2 text-lg leading-8">
                     @if (isset($fromArchive))
                         Posts from archive:
                         <span class="font-semibold">{{ $fromArchive }}</span>
@@ -43,22 +43,22 @@
                 <div
                     class="mx-auto mt-16 grid max-w-sm grid-cols-1 gap-x-8 gap-y-16 md:max-w-2xl md:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
                     @foreach ($posts as $post)
-                        <article class="rounded bg-skin-neutral-11">
+                        <article class="bg-skin-neutral-11 rounded">
                             <a href="/blog/{{ $post->slug }}"
-                                class="flex flex-col items-start justify-between px-6 py-6 text-skin-neutral-2 transition-all duration-300 ease-out hover:bg-skin-neutral-12 hover:text-skin-neutral-1">
+                                class="text-skin-neutral-2 hover:bg-skin-neutral-12 hover:text-skin-neutral-1 flex flex-col items-start justify-between px-6 py-6 transition-all duration-300 ease-out">
                                 <header class="relative w-full">
                                     @if ($post->image_url)
                                         <img src="{{ $post->image_url }}" alt="{{ $post->title }}"
-                                            class="aspect-[16/9] w-full object-cover sm:aspect-[2/1] lg:aspect-[3/2]" />
+                                            class="aspect-[16/9] w-full rounded-2xl object-cover sm:aspect-[2/1] lg:aspect-[3/2]" />
                                     @else
                                         <div
-                                            class="flex aspect-[16/9] w-full items-center justify-center rounded-2xl bg-gradient-to-bl from-skin-neutral-1 to-skin-neutral-6 sm:aspect-[2/1] lg:aspect-[3/2]">
-                                            <span class="text-lg text-skin-neutral-9">
+                                            class="from-skin-neutral-1 to-skin-neutral-6 flex aspect-[16/9] w-full items-center justify-center rounded-2xl bg-gradient-to-bl sm:aspect-[2/1] lg:aspect-[3/2]">
+                                            <span class="text-skin-neutral-9 text-lg">
                                                 N/A
                                             </span>
                                         </div>
                                     @endif
-                                    <div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-skin-neutral-10/10">
+                                    <div class="ring-skin-neutral-10/10 absolute inset-0 rounded-2xl ring-1 ring-inset">
                                     </div>
                                 </header>
                                 <div class="max-w-xl">
@@ -77,7 +77,7 @@ class="h-3 w-3">
                                                 @if ($post->author->image_url)
                                                     <img src="{{ $post->author->image_url }}"
                                                         alt="{{ $post->author->name }}"
-                                                        class="h-4 w-4 rounded-md bg-skin-neutral-2 object-cover" />
+                                                        class="bg-skin-neutral-2 h-4 w-4 rounded-md object-cover" />
                                                 @else
                                                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                                         fill="currentColor" class="h-4 w-4">
@@ -91,7 +91,7 @@ class="h-4 w-4 rounded-md bg-skin-neutral-2 object-cover" />
                                         </div>
                                     </div>
                                     <div class="group relative mb-2">
-                                        <h3 class="mb-2 mt-3 min-h-12 text-lg font-semibold leading-6">
+                                        <h3 class="mt-3 mb-2 min-h-12 text-lg leading-6 font-semibold">
                                             <span class="absolute inset-0"></span>
                                             {{ $post->title }}
                                         </h3>
@@ -103,7 +103,7 @@ class="h-4 w-4 rounded-md bg-skin-neutral-2 object-cover" />
                                         <footer class="mt-4 min-h-[44px]">
                                             @foreach ($post->tags as $tag)
                                                 <a href="/blog/tag/{{ $tag->slug }}"
-                                                    class="mr-2 inline-block rounded bg-skin-neutral-1 px-3 py-1.5 text-sm">
+                                                    class="bg-skin-neutral-1 mr-2 inline-block rounded px-3 py-1.5 text-sm">
                                                     {{ $tag->name }}
                                                 </a>
                                             @endforeach
@@ -115,7 +115,7 @@ class="mr-2 inline-block rounded bg-skin-neutral-1 px-3 py-1.5 text-sm">
                     @endforeach
                 </div>
             @else
-                <p class="mt-2 rounded bg-skin-neutral-3 px-4 py-2 text-skin-neutral-9">
+                <p class="bg-skin-neutral-3 text-skin-neutral-9 mt-2 rounded px-4 py-2">
                     No posts found.
                 </p>
             @endif

stubs/resources-site/css/blog.css

@@ -1,27 +1,27 @@
 .blog-post-content {
-    @apply leading-relaxed text-skin-neutral-11;
+    @apply text-neutral-11 leading-relaxed;
 }
 
 .blog-post-content h1 {
-    @apply mb-4 mt-8 text-3xl font-semibold;
+    @apply mt-8 mb-4 text-3xl font-semibold;
 }
 
 .blog-post-content h2 {
-    @apply mb-4 mt-8 text-2xl font-semibold;
+    @apply mt-8 mb-4 text-2xl font-semibold;
 }
 
 .blog-post-content h3 {
-    @apply mb-4 mt-8 text-xl font-semibold;
+    @apply mt-8 mb-4 text-xl font-semibold;
 }
 
 .blog-post-content p {
     @apply mb-6 text-base leading-relaxed tracking-normal;
 }
 
 .blog-post-content img {
-    @apply mb-8 mt-4 rounded-lg shadow-lg;
+    @apply mt-4 mb-8 rounded-lg shadow-lg;
 }
 
 .blog-post-content a {
-    @apply text-skin-primary-9 hover:underline;
+    @apply text-primary-9 hover:underline;
 }

stubs/resources/js/Components/Modules/Blog/AppImageNotAvailable.vue

@@ -1,7 +1,7 @@
 <template>
     <div
-        class="from-skin-neutral-3 to-skin-neutral-6 flex h-10 w-10 items-center justify-center rounded bg-gradient-to-bl"
+        class="from-neutral-3 to-neutral-6 flex h-10 w-10 items-center justify-center rounded bg-gradient-to-bl"
     >
-        <span class="text-skin-neutral-9 text-xs">N/A</span>
+        <span class="text-neutral-9 text-xs">N/A</span>
     </div>
 </template>

stubs/resources/js/Pages/BlogAuthor/AuthorIndex.vue

@@ -33,13 +33,13 @@
 
                     <AppDataTableData>
                         {{ item.name }}<br />
-                        <small class="text-skin-neutral-9 text-sm">{{
+                        <small class="text-neutral-9 text-sm">{{
                             item.email
                         }}</small>
                     </AppDataTableData>
 
                     <AppDataTableData>
-                        <small class="text-skin-neutral-9 text-sm">
+                        <small class="text-neutral-9 text-sm">
                             <i class="ri-github-fill mr-0 h-5 w-5"></i>
                             {{ item.github_handle }}<br />
                             <i class="ri-twitter-x-line mr-1 h-5 w-5"></i

stubs/resources/js/Pages/BlogCategory/CategoryIndex.vue

@@ -132,11 +132,13 @@ const { can } = useAuthCan()
 </script>
 
 <style scoped>
+@reference "../../../css/app.css";
+
 .category-visible {
-    @apply bg-skin-success-light text-skin-success;
+    @apply bg-success-light text-success;
 }
 
 .category-invisible {
-    @apply bg-skin-warning-light text-skin-warning;
+    @apply bg-warning-light text-warning;
 }
 </style>

stubs/resources/js/Pages/BlogCategory/Components/CategorySeo.vue

@@ -5,7 +5,7 @@
 
             <a
                 href="#"
-                class="text-skin-primary-9 text-sm hover:underline"
+                class="text-primary-9 text-sm hover:underline"
                 @click.prevent="toggleSeoForm"
             >
                 Edit SEO content
@@ -14,7 +14,7 @@
 
         <small
             v-show="categoryStore.showSeoAlert()"
-            class="text-skin-neutral-9 block text-sm"
+            class="text-neutral-9 block text-sm"
         >
             (fill the title and description to see a preview)
         </small>
@@ -23,12 +23,12 @@
             <div>
                 <div class="mb-2 mt-2 flex items-center">
                     <div
-                        class="from-skin-neutral-3 to-skin-neutral-6 mr-4 flex h-10 w-10 rounded-full bg-gradient-to-bl"
+                        class="from-neutral-3 to-neutral-6 mr-4 flex h-10 w-10 rounded-full bg-gradient-to-bl"
                     ></div>
 
                     <div class="flex flex-col items-start">
                         <p class="text-sm">Your Site Name</p>
-                        <p class="text-skin-neutral-10 -mt-1 text-sm">
+                        <p class="text-neutral-10 -mt-1 text-sm">
                             https://your-domain.com/blog/category/{{
                                 categoryStore.getSlug()
                             }}
@@ -37,7 +37,7 @@
                 </div>
 
                 <div>
-                    <p class="text-skin-primary-11 text-2xl">
+                    <p class="text-primary-11 text-2xl">
                         {{ categoryStore.category.meta_tag_title }}
                     </p>
 
@@ -58,7 +58,7 @@
                         'input-error': errorsFields.includes('meta_tag_title')
                     }"
                 />
-                <small class="text-skin-neutral-9 block text-right">
+                <small class="text-neutral-9 block text-right">
                     {{ categoryStore.getRemainingChars('meta_tag_title', 60) }}
                     of 60
                 </small>
@@ -79,7 +79,7 @@
                         )
                     }"
                 />
-                <small class="text-skin-neutral-9 block text-right">
+                <small class="text-neutral-9 block text-right">
                     {{
                         categoryStore.getRemainingChars(
                             'meta_tag_description',

stubs/resources/js/Pages/BlogPost/Components/PostSeo.vue

@@ -5,7 +5,7 @@
 
             <a
                 href="#"
-                class="text-skin-primary-9 text-sm hover:underline"
+                class="text-primary-9 text-sm hover:underline"
                 @click.prevent="toggleSeoForm"
             >
                 Edit SEO content
@@ -14,7 +14,7 @@
 
         <small
             v-show="postStore.showSeoAlert()"
-            class="text-skin-neutral-9 block text-sm"
+            class="text-neutral-9 block text-sm"
         >
             (fill the title and description to see a preview)
         </small>
@@ -23,12 +23,12 @@
             <div>
                 <div class="mb-2 mt-2 flex items-center">
                     <div
-                        class="from-skin-neutral-3 to-skin-neutral-6 mr-4 flex h-10 w-10 rounded-full bg-gradient-to-bl"
+                        class="from-neutral-3 to-neutral-6 mr-4 flex h-10 w-10 rounded-full bg-gradient-to-bl"
                     ></div>
 
                     <div class="flex flex-col items-start">
                         <p class="text-sm">Your Site Name</p>
-                        <p class="text-skin-neutral-10 -mt-1 text-sm">
+                        <p class="text-neutral-10 -mt-1 text-sm">
                             https://your-domain.com/blog/post/{{
                                 postStore.getSlug()
                             }}
@@ -37,7 +37,7 @@
                 </div>
 
                 <div>
-                    <p class="text-skin-primary-11 text-2xl">
+                    <p class="text-primary-11 text-2xl">
                         {{ postStore.post.meta_tag_title }}
                     </p>
 
@@ -58,7 +58,7 @@
                         'input-error': errorsFields.includes('meta_tag_title')
                     }"
                 />
-                <small class="text-skin-neutral-9 block text-right">
+                <small class="text-neutral-9 block text-right">
                     {{ postStore.getRemainingChars('meta_tag_title', 60) }}
                     of 60
                 </small>
@@ -79,7 +79,7 @@
                         )
                     }"
                 />
-                <small class="text-skin-neutral-9 block text-right">
+                <small class="text-neutral-9 block text-right">
                     {{
                         postStore.getRemainingChars('meta_tag_description', 160)
                     }}

stubs/resources/js/Pages/BlogPost/Components/PostTags.vue

@@ -11,14 +11,14 @@
         <li
             v-for="tag in postStore.post.tags"
             :key="tag.id"
-            class="bg-skin-neutral-3 mb-3 flex items-center justify-between rounded p-3"
+            class="bg-neutral-3 mb-3 flex items-center justify-between rounded p-3"
         >
             <span>
                 {{ tag.name }}
             </span>
 
             <i
-                class="ri-close-line text-skin-neutral-11 hover:text-skin-neutral-12 hover:cursor-pointer"
+                class="ri-close-line text-neutral-11 hover:text-neutral-12 hover:cursor-pointer"
                 @click="removeTag(tag)"
             ></i>
         </li>

stubs/resources/js/Pages/BlogPost/PostIndex.vue

@@ -132,11 +132,13 @@ const { can } = useAuthCan()
 </script>
 
 <style scoped>
+@reference "../../../css/app.css";
+
 .published {
-    @apply bg-skin-success-light text-skin-success;
+    @apply bg-success-light text-success;
 }
 
 .draft {
-    @apply bg-skin-warning-light text-skin-warning;
+    @apply bg-warning-light text-warning;
 }
 </style>