Upgrade tailwind to v3 (#795)

joedixon · faissaloux · web-flow · commit 2cf8daffcf28 · 2021-12-28T10:27:24.000Z
* update dependencies

* update classes

* remove classes duplication

* resolve conflict

* Remove dependency

Co-authored-by: faissaloux &lt;fwahabali@gmail.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,20 +10,17 @@
     "production": "mix --production"
   },
   "devDependencies": {
+    "@tailwindcss/aspect-ratio": "^0.2.0",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/typography": "^0.5.0",
+    "autoprefixer": "^10.4.0",
     "axios": "^0.21.4",
     "highlight.js": "^10.5.0",
     "laravel-mix": "^6.0.23",
-    "vue-template-compiler": "^2.6.12"
-  },
-  "dependencies": {
-    "@tailwindcss/aspect-ratio": "^0.2.0",
-    "@tailwindcss/forms": "^0.2.1",
-    "@tailwindcss/typography": "^0.4.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.2",
     "algoliasearch": "^4.8.4",
     "alpinejs": "^3.0",
-    "autoprefixer": "^10.2.4",
-    "choices.js": "^9.0.1",
-    "postcss": "^8.2.10",
-    "tailwindcss": "^2.0.2"
+    "choices.js": "^9.0.1"
   }
-}
+}
diff --git a/resources/css/buttons.css b/resources/css/buttons.css
@@ -7,7 +7,7 @@
 }
 
 .button-primary {
-    @apply text-white bg-lio-500;
+    @apply text-white bg-lio-500 !important;
 }
 
 .button-primary:hover {
diff --git a/resources/views/admin/articles.blade.php b/resources/views/admin/articles.blade.php
@@ -31,7 +31,7 @@
                                         <tr>
                                             <x-tables.table-data>
                                                 <div class="flex items-center">
-                                                    <div class="flex-shrink-0 h-10 w-10">
+                                                    <div class="shrink-0 h-10 w-10">
                                                         <x-avatar :user="$article->author()" class="h-10 w-10 rounded-full"/>
                                                     </div>
                                                     <div class="ml-4">
diff --git a/resources/views/admin/partials/_navigation.blade.php b/resources/views/admin/partials/_navigation.blade.php
@@ -1,6 +1,6 @@
 <div class="border-b border-gray-200">
-    <div class="sm:flex sm:items-center sm:justify-between sm:items-baseline">
-        <div class="sm:flex sm:items-center sm:justify-between sm:items-baseline">
+    <div class="sm:flex sm:justify-between sm:items-baseline">
+        <div class="sm:flex sm:justify-between sm:items-baseline">
             <h3 class="text-lg leading-6 font-medium text-gray-900">
                 Admin
             </h3>
@@ -23,7 +23,7 @@
                 <label for="adminSearch" class="sr-only">Search</label>
 
                 <div class="flex rounded-md shadow-sm">
-                    <div class="relative flex-grow">
+                    <div class="relative grow">
                         <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                             <x-heroicon-s-search class="h-5 w-5 text-gray-400" />
                         </div>
diff --git a/resources/views/admin/users.blade.php b/resources/views/admin/users.blade.php
@@ -30,7 +30,7 @@
                                     <tr>
                                         <x-tables.table-data>
                                             <div class="flex items-center">
-                                                <div class="flex-shrink-0 h-10 w-10">
+                                                <div class="shrink-0 h-10 w-10">
                                                     <x-avatar :user="$user" class="h-10 w-10 rounded-full" />
                                                 </div>
 
diff --git a/resources/views/articles/overview.blade.php b/resources/views/articles/overview.blade.php
@@ -18,7 +18,7 @@
                     Share your article with <a href="https://twitter.com/laravelio" class="text-lio-500 hover:text-lio-600 hover:underline">our 45,000 Twitter followers</a>.
                 </span>
             </h2>
-            <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
+            <div class="mt-8 flex lg:mt-0 lg:shrink-0">
                 <div class="inline-flex rounded-md shadow">
                     <x-buttons.primary-button href="{{ route('articles.create') }}" class="px-5 py-3 text-base font-medium">
                         Share Your Article
@@ -46,7 +46,7 @@
                         <div class="hidden lg:flex gap-x-2">
                             <x-articles.filter :selectedFilter="$filter" :activeTag="$activeTag" />
 
-                            <div class="flex-shrink-0">
+                            <div class="shrink-0">
                                 <x-buttons.secondary-button class="flex items-center gap-x-2" @click="activeModal = 'tag-filter'">
                                     <x-heroicon-o-filter class="w-5 h-5" />
                                     Tag filter
diff --git a/resources/views/articles/show.blade.php b/resources/views/articles/show.blade.php
@@ -10,7 +10,7 @@
             <div class="container mx-auto">
                 <div class="px-4 lg:px-0 lg:mx-48">
                     <div class="flex items-center justify-between pt-6 mb-28">
-                        <a href="{{ route('articles') }}" class="hidden flex items-center text-base text-white hover:underline lg:flex">
+                        <a href="{{ route('articles') }}" class="hidden items-center text-base text-white hover:underline lg:flex">
                             <x-heroicon-s-arrow-left class="w-4 h-4 fill-current" />
                             <span class="text-white ml-1 hover:text-gray-100">Back to articles</span>
                         </a>
@@ -106,7 +106,7 @@ class="prose prose-lg text-gray-800 prose-lio"
                     <div class="border-t-2 border-gray-200 py-8 lg:pt-14 lg:pb-16">
                         <div class="flex flex-col items-center justify-center gap-y-4 lg:flex-row lg:justify-between">
                             <div class="flex items-start gap-x-4">
-                                <div class="flex-shrink-0">
+                                <div class="shrink-0">
                                     <x-avatar :user="$article->author()" class="hidden w-16 h-16 lg:block" />
                                 </div>
 
diff --git a/resources/views/components/articles/form.blade.php b/resources/views/components/articles/form.blade.php
@@ -29,7 +29,7 @@
         </div>
 
         <div class="flex flex-col space-y-6">
-            <div class="flex-grow space-y-6">
+            <div class="grow space-y-6">
                 <div class="space-y-1">
                     <x-forms.label for="title">Title</x-forms.label>
 
@@ -41,7 +41,7 @@
                 </div>
             </div>
 
-            <div class="flex-grow space-y-6">
+            <div class="grow space-y-6">
                 <div class="space-y-1">
                     <x-forms.label for="body">Body</x-forms.label>
 
@@ -51,8 +51,8 @@
                 </div>
             </div>
 
-            <div class="flex-grow space-y-6">
-                <div class="flex-grow space-y-6">
+            <div class="grow space-y-6">
+                <div class="grow space-y-6">
                     <div class="space-y-1">
                         <x-forms.label for="original_url">Original URL</x-forms.label>
 
@@ -64,7 +64,7 @@
                     </div>
                 </div>
 
-                <div class="flex-grow space-y-6">
+                <div class="grow space-y-6">
                     <div class="space-y-1">
                         <x-forms.label for="tags">Tags</x-forms.label>
 
diff --git a/resources/views/components/articles/summary.blade.php b/resources/views/components/articles/summary.blade.php
@@ -3,7 +3,7 @@
     'isFeatured' => false,
 ])
 
-<div class="h-full flex flex-1 flex-col flex-grow place-content-between">
+<div class="h-full flex flex-1 flex-col grow place-content-between">
     <div class="break-words">
         @if ($isFeatured)
             <a href="{{ route('articles.show', $article->slug()) }}">
diff --git a/resources/views/components/community-member.blade.php b/resources/views/components/community-member.blade.php
@@ -1,4 +1,4 @@
-<div class="flex-shrink-0 w-14 h-14 md:w-20 md:h-20 mr-8 my-2 cursor-pointer">
+<div class="shrink-0 w-14 h-14 md:w-20 md:h-20 mr-8 my-2 cursor-pointer">
     <x-stat-popout
         x-cloak
         x-show="active == '{{ $member->id }}'"
diff --git a/resources/views/components/threads/form.blade.php b/resources/views/components/threads/form.blade.php
@@ -20,7 +20,7 @@
         </div>
 
         <div class="flex flex-col space-y-6">
-            <div class="flex-grow space-y-6">
+            <div class="grow space-y-6">
                 <div class="space-y-1">
                     <x-forms.label for="subject"/>
 
@@ -32,7 +32,7 @@
                 </div>
             </div>
 
-            <div class="flex-grow space-y-6">
+            <div class="grow space-y-6">
                 <div class="space-y-1">
                     <x-forms.label for="tags">
                         Tags
@@ -46,7 +46,7 @@
                 </div>
             </div>
 
-            <div class="flex-grow space-y-6">
+            <div class="grow space-y-6">
                 <div class="space-y-1">
                     <x-forms.label for="body">Compose your question</x-forms.label>
 
diff --git a/resources/views/forum/_thread.blade.php b/resources/views/forum/_thread.blade.php
@@ -7,7 +7,7 @@
                 </h2>
             </a>
 
-            <div class="md:flex-shrink-0 md:self-center md:flex mt-2 md:mt-0">
+            <div class="md:shrink-0 md:self-center md:flex mt-2 md:mt-0">
                 @if (count($tags = $thread->tags()))
                     <div class="flex text-sm space-x-2">
                         @foreach ($tags as $tag)
@@ -30,7 +30,7 @@
 
         <div class="mt-4 flex justify-between space-x-8">
             <div class="flex space-x-3">
-                <div class="flex-shrink-0">
+                <div class="shrink-0">
                     <x-avatar :user="$thread->author()" class="h-10 w-10 sm:h-5 sm:w-5 rounded-full" />
                 </div>
 
diff --git a/resources/views/forum/overview.blade.php b/resources/views/forum/overview.blade.php
@@ -27,7 +27,7 @@
                         <div class="hidden lg:flex gap-x-2">
                             <x-threads.filter :filter="$filter" />
 
-                            <div class="flex-shrink-0">
+                            <div class="shrink-0">
                                 <x-buttons.secondary-button class="flex items-center gap-x-2" @click="activeModal = 'tag-filter'">
                                     <x-heroicon-o-filter class="w-5 h-5" />
                                     Tag filter
diff --git a/resources/views/forum/threads/show.blade.php b/resources/views/forum/threads/show.blade.php
@@ -42,7 +42,7 @@
                     <x-info-panel class="flex justify-between gap-x-16">
                         <p>The last reply to this thread was more than six months ago. Please consider opening a new thread if you have a similar question.</p>
 
-                        <x-buttons.arrow-button href="{{ route('threads.create') }}" class="flex-shrink-0">
+                        <x-buttons.arrow-button href="{{ route('threads.create') }}" class="shrink-0">
                             Create thread
                         </x-buttons.arrow-button>
                     </x-info-panel>
@@ -83,7 +83,7 @@
 
                         <form action="{{ route('verification.resend') }}" method="POST" class="block">
                             @csrf
-                            <x-buttons.arrow-button type="submit" class="flex-shrink-0">
+                            <x-buttons.arrow-button type="submit" class="shrink-0">
                                 Click here to resend the verification link.
                             </x-buttons.arrow-button>
                         </form>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -62,8 +62,8 @@
 
     <!-- Search -->
     <section class="mt-10 lg:mt-16">
-        <div class="bg-lio-500 text-white transform -skew-y-1">
-            <div class="container mx-auto transform skew-y-1">
+        <div class="bg-lio-500 text-white -skew-y-1">
+            <div class="container mx-auto skew-y-1">
                 <div class="flex flex-col items-center py-10 text-center lg:py-20">
                     <div class="w-full px-4 lg:w-1/2 lg:px-0">
                         <div class="mb-8">
@@ -121,7 +121,7 @@ class="p-4 pl-10 text-gray-600 rounded w-full border-gray-100"
 
             <div class="flex gap-4 mb-4 -mx-4 p-4 overflow-x-auto lg:mb-10 lg:gap-8">
                 @foreach ($latestThreads as $thread)
-                    <div class="flex-shrink-0 w-11/12 lg:w-1/3 lg:flex-shrink">
+                    <div class="shrink-0 w-11/12 lg:w-1/3 lg:shrink">
                         <x-threads.summary :thread="$thread" />
                     </div>
                 @endforeach
diff --git a/resources/views/layouts/_ads/_banner.blade.php b/resources/views/layouts/_ads/_banner.blade.php
@@ -1,5 +1,5 @@
 <section class="bg-lio-500 text-white text-base py-2 px-4 flex justify-center text-center">
     <a class="md:flex md:items-center" href="https://github.com/sponsors/laravelio" target="_blank" rel="noopener">
-        <x-icon-github class="flex-shrink-0 w-4 h-4 inline mr-2"/> Support the ongoing development of Laravel.io  →
+        <x-icon-github class="shrink-0 w-4 h-4 inline mr-2"/> Support the ongoing development of Laravel.io  →
     </a>
 </section>
diff --git a/resources/views/layouts/_footer.blade.php b/resources/views/layouts/_footer.blade.php
@@ -17,7 +17,7 @@
                 </div>
 
                 <div class="lg:w-full lg:flex lg:justify-between">
-                    <div class="flex-grow mb-6 lg:mb-0">
+                    <div class="grow mb-6 lg:mb-0">
                         <h6 class="text-lg mb-4 lg:mb-6">
                             Laravel.io
                         </h6>
@@ -37,7 +37,7 @@
                         </div>
                     </div>
 
-                    <div class="flex-grow mb-6 lg:mb-0">
+                    <div class="grow mb-6 lg:mb-0">
                         <h6 class="text-lg mb-4 lg:mb-6">
                             Socials
                         </h6>
@@ -55,7 +55,7 @@
                         </div>
                     </div>
 
-                    <div class="flex-grow">
+                    <div class="grow">
                         <h6 class="text-lg mb-6">
                             The community
                         </h6>
diff --git a/resources/views/layouts/_nav.blade.php b/resources/views/layouts/_nav.blade.php
@@ -2,7 +2,7 @@
     <div class="container mx-auto text-gray-800 lg:block lg:py-8" x-data="{ nav: false, search: false, community: false, chat: false, settings: false }" @click.outside="nav = false">
         <div class="block bg-white 2xl:-mx-10">
             <div class="lg:px-4 lg:flex">
-                <div class="block lg:flex lg:items-center lg:flex-shrink-0">
+                <div class="block lg:flex lg:items-center lg:shrink-0">
                     <div class="flex justify-between items-center p-4 lg:p-0">
                         <a href="{{ route('home') }}" class="mr-4">
                             <img class="h-6 w-auto lg:h-8" src="{{ asset('images/laravelio-logo.svg') }}" alt="" />
@@ -149,7 +149,7 @@
                         @else
                             <li class="relative p-4 lg:p-0" x-data="{ settings: false }">
                                 <div class="flex items-center justify-center gap-3">
-                                    <a href="{{ route('notifications') }}" class="hidden flex-shrink-0 rounded-full lg:block">
+                                    <a href="{{ route('notifications') }}" class="hidden shrink-0 rounded-full lg:block">
                                         <span class="block relative">
                                             <x-heroicon-o-bell  class="h-5 w-5 hover:fill-current hover:text-lio-500"/>
 
diff --git a/resources/views/users/articles.blade.php b/resources/views/users/articles.blade.php
@@ -67,7 +67,7 @@
 
                 <div class="flex items-center justify-between mt-6">
                     <div class="flex items-center">
-                        <div class="flex-shrink-0">
+                        <div class="shrink-0">
                             <x-avatar :user="$article->author()" class="h-10 w-10 rounded-full"/>
                         </div>
 
diff --git a/resources/views/users/settings/profile.blade.php b/resources/views/users/settings/profile.blade.php
@@ -14,7 +14,7 @@
                 </div>
 
                 <div class="flex flex-col space-y-6 lg:flex-row lg:space-y-0 lg:space-x-6">
-                    <div class="flex-grow space-y-6">
+                    <div class="grow space-y-6">
                         <div class="space-y-1">
                             <x-forms.label for="name"/>
 
@@ -34,13 +34,13 @@
                         </div>
                     </div>
 
-                    <div class="flex-grow space-y-1 lg:flex-grow-0 lg:flex-shrink-0">
+                    <div class="grow space-y-1 lg:grow-0 lg:shrink-0">
                         <p class="block text-sm leading-5 font-medium text-gray-700" aria-hidden="true">
                             Profile Image
                         </p>
 
                         <div class="flex items-center mt-2">
-                            <div class="flex-shrink-0 inline-block overflow-hidden" aria-hidden="true">
+                            <div class="shrink-0 inline-block overflow-hidden" aria-hidden="true">
                                 <x-avatar :user="Auth::user()" class="h-32 w-32 mt-4" unlinked />
 
                                 <span class="mt-4 inline-block text-sm text-gray-500">
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,8 +1,7 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-    mode: 'jit',
-    purge: [
+    content: [
         './resources/**/*.blade.php',
         './resources/**/*.js',
         './resources/macros/blade.php',
@@ -85,6 +84,5 @@ module.exports = {
             }),
         },
     },
-    variants: {},
     plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
 };

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.button-primary {`
`10`		`- @apply text-white bg-lio-500;`
	`10`	`+ @apply text-white bg-lio-500 !important;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.button-primary:hover {`