Upgrade to Tailwind 2.0 (#584)

joedixon · web-flow · commit 5a47134daaac · 2021-01-27T14:54:41.000+01:00
* Upgrade to tailwind 2.0

* Apply fixes from StyleCI

* Remove config bloat

* Apply fixes from StyleCI

* Remove plugin
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,16 +11,20 @@
   },
   "devDependencies": {
     "axios": "^0.21.1",
-    "highlight.js": "^10.4.1",
+    "highlight.js": "^10.5.0",
     "laravel-mix": "^6.0.6",
     "postcss-import": "^12.0.1",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.12"
   },
   "dependencies": {
-    "@tailwindcss/ui": "^0.1.4",
-    "algoliasearch": "^4.0.3",
+    "@tailwindcss/aspect-ratio": "^0.2.0",
+    "@tailwindcss/forms": "^0.2.1",
+    "@tailwindcss/typography": "^0.4.0",
+    "algoliasearch": "^4.8.4",
     "alpinejs": "^1.12.0",
+    "autoprefixer": "^10.2.3",
     "choices.js": "^9.0.1",
-    "tailwindcss": "^1.9.6"
+    "postcss": "^8.2.4",
+    "tailwindcss": "^2.0.2"
   }
 }
diff --git a/resources/css/forms.css b/resources/css/forms.css
@@ -18,7 +18,7 @@
 .standard input[type='email'],
 .standard textarea,
 .standard select {
-    @apply rounded border-2 p-3 w-full;
+    @apply rounded border-2 p-3 w-full border-gray-300;
 }
 
 .standard select {
@@ -30,7 +30,7 @@
 }
 
 .standard input[type='checkbox'] {
-    @apply mr-1;
+    @apply mr-1 rounded border border-gray-300;
 }
 
 .standard .help-block {
diff --git a/resources/views/_partials/_editor.blade.php b/resources/views/_partials/_editor.blade.php
@@ -1,5 +1,5 @@
 <div x-data="editorConfig()" x-init="minHeight = $refs.editor.scrollHeight">
-    <div class="border-2 border-b-0 rounded-t p-2 bg-gray-200">
+    <div class="border-gray-300 border-2 border-b-0 rounded-t p-2 bg-gray-200">
         <ul class="flex">
             <li>
                 <button 
diff --git a/resources/views/_partials/_search.blade.php b/resources/views/_partials/_search.blade.php
@@ -10,12 +10,12 @@
             type="text" 
             name="search" 
             id="search" 
-            class="nav-search block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:border-blue-300 focus:shadow-outline-blue sm:text-sm transition duration-150 ease-in-out" 
+            class="nav-search block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:border-blue-300 focus:ring-blue-500 sm:text-sm transition duration-150 ease-in-out" 
             placeholder="Search for threads..." 
         />
         <template x-if="results">
             <div x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="search mt-1 origin-top-right absolute right-0 rounded-md shadow-lg z-10">
-                <div class="rounded-md bg-white shadow-xs w-full">
+                <div class="rounded-md bg-white ring-1 ring-black ring-opacity-5 w-full">
                     <div class="flex flex-col border-b md:flex-row">
                         <div class="py-1 w-full border-b md:w-1/2 md:border-r md:border-b-0">
                             <span class="text-xl px-4 py-2 text-gray-700">Threads</span>
diff --git a/resources/views/articles/_form.blade.php b/resources/views/articles/_form.blade.php
@@ -113,7 +113,7 @@ class="button button-primary h-full button-dropdown-right relative inline-flex i
                             </svg>
                         </button>
                         <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg" x-show="showDropdown" x-cloak>
-                            <div class="rounded-md bg-white shadow-xs">
+                            <div class="rounded-md bg-white ring-1 ring-black ring-opacity-5">
                                 <div class="py-1">
                                     <button 
                                         type="submit" 
diff --git a/resources/views/components/buttons/danger-button.blade.php b/resources/views/components/buttons/danger-button.blade.php
@@ -1,7 +1,7 @@
 @props(['type' => 'button'])
 
 <span class="inline-flex rounded-md shadow-sm">
-    <button type="{{ $type }}" class="bg-red-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-red-700 focus:outline-none focus:border-red-900 focus:shadow-outline-red active:bg-red-900 transition duration-150 ease-in-out" {{ $attributes }}>
+    <button type="{{ $type }}" class="bg-red-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-red-700 focus:outline-none focus:border-red-900 focus:ring-red-900 active:bg-red-900 transition duration-150 ease-in-out" {{ $attributes }}>
         {{ $slot }}
     </button>
 </span>
diff --git a/resources/views/components/buttons/primary-button.blade.php b/resources/views/components/buttons/primary-button.blade.php
@@ -1,7 +1,7 @@
 @props(['type' => 'button'])
 
 <span class="inline-flex rounded-md shadow-sm">
-    <button type="{{ $type }}" class="bg-lio-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-lio-700 focus:outline-none focus:border-lio-900 focus:shadow-outline-lio active:bg-lio-900 transition duration-150 ease-in-out">
+    <button type="{{ $type }}" class="bg-lio-600 border border-transparent rounded-md py-2 px-4 inline-flex justify-center text-sm leading-5 font-medium text-white hover:bg-lio-700 focus:outline-none focus:border-lio-900 focus:ring-lio-900 active:bg-lio-900 transition duration-150 ease-in-out">
         {{ $slot }}
     </button>
 </span>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
@@ -18,23 +18,23 @@
                     <div class="mt-5 max-w-lg mx-auto sm:flex sm:justify-center md:mt-8">
                         @if (Auth::guest())
                             <div class="rounded-md shadow">
-                                <a href="{{ route('register') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-lio-600 hover:bg-lio-500 focus:outline-none focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
+                                <a href="{{ route('register') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-lio-600 hover:bg-lio-500 focus:outline-none-500 transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                                     Join the Community
                                 </a>
                             </div>
                             <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-                                <a href="{{ route('forum') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-lio-500 bg-white hover:text-lio-600 focus:outline-none focus:shadow-outline-blue transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
+                                <a href="{{ route('forum') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-lio-500 bg-white hover:text-lio-600 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                                     Visit the Forum
                                 </a>
                             </div>
                         @else
                             <div class="rounded-md shadow">
-                                <a href="{{ route('threads.create') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-lio-600 hover:bg-lio-500 focus:outline-none focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
+                                <a href="{{ route('threads.create') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-lio-600 hover:bg-lio-500 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                                     Start a Thread
                                 </a>
                             </div>
                             <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-                                <a href="{{ route('articles.create') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-lio-600 hover:bg-lio-500 focus:outline-none focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
+                                <a href="{{ route('articles.create') }}" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-lio-600 hover:bg-lio-500 focus:outline-none transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
                                     Share an Article
                                 </a>
                             </div>
@@ -93,7 +93,7 @@
             </div>
             <div class="w-full md:w-1/2 mx-auto relative mb-8">
                 <form action="{{ route('forum') }}" method="GET">
-                    <input type="search" class="rounded-full border-2 w-full p-3 text-xl bg-gray-100" placeholder="Search for threads..." name="search">
+                    <input type="search" class="rounded-full border-gray-300 border-2 w-full p-3 text-xl bg-gray-100" placeholder="Search for threads..." name="search">
                     <button type="submit" class="absolute top-0 right-0 w-10 h-10 my-2 mx-3">
                         <x-heroicon-o-search class="w-full"/>
                     </button>
diff --git a/resources/views/layouts/_nav.blade.php b/resources/views/layouts/_nav.blade.php
@@ -27,7 +27,7 @@
                             </button>
                         </div>
                         <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50" x-cloak>
-                            <div class="py-1 rounded-md bg-white shadow-xs">
+                            <div class="py-1 rounded-md bg-white ring-1 ring-black ring-opacity-5">
                                 <a href="https://discord.gg/KxwQuKb">Discord</a>
                                 <a href="https://larachat.co">Larachat</a>
                                 <a href="https://webchat.freenode.net/?nick=laravelnewbie&channels=%23laravel&prompt=1">IRC</a>
@@ -46,7 +46,7 @@
                             </button>
                         </div>
                         <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="dropdown absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50" x-cloak>
-                            <div class="py-1 rounded-md bg-white shadow-xs">
+                            <div class="py-1 rounded-md bg-white ring-1 ring-black ring-opacity-5">
                                 <a href="https://github.com/laravelio">Github</a>
                                 <a href="https://larachat.co">Twitter</a>
                                 <div class="border-t border-gray-100"></div>
@@ -95,7 +95,7 @@
                             </button>
                         </div>
                         <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="dropdown origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg z-50" x-cloak>
-                            <div class="py-1 rounded-md bg-white shadow-xs">
+                            <div class="py-1 rounded-md bg-white ring-1 ring-black ring-opacity-5">
                                 <a href="{{ route('profile', Auth::user()->username()) }}">
                                     Your Profile
                                 </a>
diff --git a/resources/views/livewire/show-articles.blade.php b/resources/views/livewire/show-articles.blade.php
@@ -8,7 +8,7 @@
             <div class="pb-8 mb-8 border-b-2">
                 <div>
                     @foreach ($article->tags() as $tag)
-                        <button class="inline-block focus:outline-none rounded-full {{ $tag->slug() === $selectedTag ? 'bg-lio-500 text-white shadow-outline-green' : 'bg-lio-200 text-lio-500' }}" wire:click="toggleTag('{{ $tag->slug() }}')">
+                        <button class="inline-block focus:outline-none rounded-full {{ $tag->slug() === $selectedTag ? 'bg-lio-500 text-white ring-green' : 'bg-lio-200 text-lio-500' }}" wire:click="toggleTag('{{ $tag->slug() }}')">
                             <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5">
                                 {{ $tag->name() }}
                             </span>
@@ -70,13 +70,13 @@
 
     <div class="w-full lg:w-1/4 lg:pt-8 lg:pl-4">
         <span class="relative z-0 inline-flex shadow-sm mb-8">
-            <button wire:click="sortBy('recent')" type="button" class="relative inline-flex items-center px-4 py-2 rounded-l-md border text-sm leading-5 font-medium focus:z-10 focus:outline-none focus:border-lio-200 focus:shadow-outline-green active:bg-lio-500 active:text-white transition ease-in-out duration-150 {{ $selectedSortBy === 'recent' ? 'bg-lio-500 text-white border-lio-500 shadow-outline-green z-10' : 'bg-white text-gray-700 border-gray-300' }}">
+            <button wire:click="sortBy('recent')" type="button" class="relative inline-flex items-center px-4 py-2 rounded-l-md border text-sm leading-5 font-medium focus:z-10 focus:outline-none focus:border-lio-200 focus:ring focus:ring-lio-200 focus:ring-opacity-50 active:bg-lio-500 active:text-white transition ease-in-out duration-150 {{ $selectedSortBy === 'recent' ? 'bg-lio-500 text-white border-lio-500 ring-green z-10' : 'bg-white text-gray-700 border-gray-300' }}">
                 Recent
             </button>
-            <button wire:click="sortBy('popular')" type="button" class="-ml-px relative inline-flex items-center px-4 py-2 border text-sm leading-5 font-medium focus:z-10 focus:outline-none focus:border-lio-200 focus:shadow-outline-green active:bg-lio-500 active:text-white transition ease-in-out duration-150 {{ $selectedSortBy === 'popular' ? 'bg-lio-500 text-white border-lio-500 shadow-outline-green z-10' : 'bg-white text-gray-700 border-gray-300' }}">
+            <button wire:click="sortBy('popular')" type="button" class="-ml-px relative inline-flex items-center px-4 py-2 border text-sm leading-5 font-medium focus:z-10 focus:outline-none focus:border-lio-200 focus:ring focus:ring-lio-200 focus:ring-opacity-50 active:bg-lio-500 active:text-white transition ease-in-out duration-150 {{ $selectedSortBy === 'popular' ? 'bg-lio-500 text-white border-lio-500 ring-green z-10' : 'bg-white text-gray-700 border-gray-300' }}">
                 Popular
             </button>
-            <button wire:click="sortBy('trending')" type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border text-sm leading-5 font-medium focus:z-10 focus:outline-none focus:border-lio-200 focus:shadow-outline-green active:bg-lio-500 active:text-white transition ease-in-out duration-150 {{ $selectedSortBy === 'trending' ? 'bg-lio-500 text-white border-lio-500 shadow-outline-green z-10' : 'bg-white text-gray-700 border-gray-300' }}">
+            <button wire:click="sortBy('trending')" type="button" class="-ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border text-sm leading-5 font-medium focus:z-10 focus:outline-none focus:border focus:border-lio-200 focus:ring focus:ring-lio-200 focus:ring-opacity-50 active:bg-lio-500 active:text-white transition ease-in-out duration-150 {{ $selectedSortBy === 'trending' ? 'bg-lio-500 text-white border-lio-500 ring-green z-10' : 'bg-white text-gray-700 border-gray-300' }}">
                 Trending 🔥
             </button>
         </span>
diff --git a/resources/views/notifications/article_approved.blade.php b/resources/views/notifications/article_approved.blade.php
@@ -1,7 +1,7 @@
 @php($data = $notification->data)
 
 <tr>
-    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-600">
+    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5 text-gray-600">
         <div class="flex items-center">
             <svg fill="currentColor" viewBox="0 0 20 20" class="w-5 h-5 mr-4">
                 <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path>
@@ -15,11 +15,11 @@
         </div>
     </td>
 
-    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-600">
+    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5 text-gray-600">
         {{ $notification->created_at->diffForHumans() }}
     </td>
 
-    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-600 text-right">
+    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5 text-gray-600 text-right">
         <div class="flex justify-end">
             <button wire:click="markAsRead('{{ $notification->id }}')" class="text-lio-500">
                 <svg viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
diff --git a/resources/views/notifications/new_reply.blade.php b/resources/views/notifications/new_reply.blade.php
@@ -1,7 +1,7 @@
 @php($data = $notification->data)
 
 <tr>
-    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-600">
+    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5 text-gray-600">
         <div class="flex items-center">
             <x-heroicon-s-reply class="w-5 h-5 mr-4"/>
 
@@ -11,11 +11,11 @@
         </div>
     </td>
 
-    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-600">
+    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5 text-gray-600">
         {{ $notification->created_at->diffForHumans() }}
     </td>
 
-    <td class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-600 text-right">
+    <td class="px-6 py-4 whitespace-nowrap border-b border-gray-200 text-sm leading-5 text-gray-600 text-right">
         <div class="flex justify-end">
             <button wire:click="markAsRead('{{ $notification->id }}')" class="text-lio-500">
                 <x-heroicon-s-check class="w-5 h-5"/>
diff --git a/resources/views/users/dashboard.blade.php b/resources/views/users/dashboard.blade.php
diff --git a/resources/views/users/profile.blade.php b/resources/views/users/profile.blade.php
diff --git a/resources/views/vendor/blade-ui-kit/components/forms/inputs/input.blade.php b/resources/views/vendor/blade-ui-kit/components/forms/inputs/input.blade.php
diff --git a/resources/views/vendor/blade-ui-kit/components/forms/inputs/textarea.blade.php b/resources/views/vendor/blade-ui-kit/components/forms/inputs/textarea.blade.php
diff --git a/tailwind.config.js b/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`	`.standard input[type='email'],`
`19`	`19`	`.standard textarea,`
`20`	`20`	`.standard select {`
`21`		`- @apply rounded border-2 p-3 w-full;`
	`21`	`+ @apply rounded border-2 p-3 w-full border-gray-300;`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.standard select {`
`@@ -30,7 +30,7 @@`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.standard input[type='checkbox'] {`
`33`		`- @apply mr-1;`
	`33`	`+ @apply mr-1 rounded border border-gray-300;`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`.standard .help-block {`