Skip to content

Upgrade tailwind to v3 #795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Dec 28, 2021
Merged

Upgrade tailwind to v3 #795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
db24b8f
update dependencies
faissaloux Dec 13, 2021
711cc69
update classes
faissaloux Dec 13, 2021
14b9b5f
remove classes duplication
faissaloux Dec 13, 2021
70b2198
resolve conflict
faissaloux Dec 13, 2021
3548ea6
Remove dependency
joedixon Dec 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
991 changes: 514 additions & 477 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 8 additions & 11 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
2 changes: 1 addition & 1 deletion resources/css/buttons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}

.button-primary {
@apply text-white bg-lio-500;
@apply text-white bg-lio-500 !important;
}

.button-primary:hover {
Expand Down
2 changes: 1 addition & 1 deletion resources/views/admin/articles.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions resources/views/admin/partials/_navigation.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/admin/users.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions resources/views/articles/overview.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions resources/views/articles/show.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down
10 changes: 5 additions & 5 deletions resources/views/components/articles/form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/articles/summary.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()) }}">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/community-member.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}'"
Expand Down
6 changes: 3 additions & 3 deletions resources/views/components/threads/form.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>

Expand All @@ -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
Expand All @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions resources/views/forum/_thread.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion resources/views/forum/overview.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions resources/views/forum/threads/show.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions resources/views/home.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion resources/views/layouts/_ads/_banner.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 3 additions & 3 deletions resources/views/layouts/_footer.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -55,7 +55,7 @@
</div>
</div>

<div class="flex-grow">
<div class="grow">
<h6 class="text-lg mb-6">
The community
</h6>
Expand Down
4 changes: 2 additions & 2 deletions resources/views/layouts/_nav.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="" />
Expand Down Expand Up @@ -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"/>

Expand Down
2 changes: 1 addition & 1 deletion resources/views/users/articles.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
6 changes: 3 additions & 3 deletions resources/views/users/settings/profile.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>

Expand All @@ -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">
Expand Down
4 changes: 1 addition & 3 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
mode: 'jit',
purge: [
content: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/macros/blade.php',
Expand Down Expand Up @@ -85,6 +84,5 @@ module.exports = {
}),
},
},
variants: {},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};