Courses

Tailwind CSS v4 for Laravel Developers

Layout - Media Breakpoints and Customization

In this lesson, we will cover the essentials of making responsive elements and customizing media query breakpoints.

Display Box Type

Tailwind adds utility classes to specify what box type the element should use. The most common ones are: block, inline-block, flex, inline-flex, and grid. The unique hidden class will hide the element completely.

Flexbox

While the flex class defines only box type, there are more utilities to specify how elements inside the flexbox flow. The flex-col will stack elements vertically, and the flex-row will position elements horizontally.

Grid

With grid box type, you can specify the number of columns using grid-cols-{1..12} classes.

Gap

When using the flex or grid box type, the gap-{size} class helps control the gutter size between elements. In other words, it is space between elements.

If you need to set different gaps between rows and columns, use the gap-x-{size} and gap-y-{size} classes.

Custom Breakpoints

By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

Every utility class in Tailwind can be applied conditionally at different breakpoints. For example, uppercase will take effect on all screen sizes, while prefixed md:uppercase will only take effect at 768 pixels wide and more.

There are five breakpoints by default, inspired by common device resolutions:

Breakpoint prefix Minimum width
sm 640px (40rem)
md 768px (48rem)
lg 1024px (64rem)
xl 1280px (80rem)
2xl 1536px (96rem)

You can set your custom breakpoints by defining them in the resource/css/app.css as a theme variable:

resources/css/app.css:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
 
@theme { 
    --breakpoint-sm: 700px;
    --breakpoint-md: 1000px;
    --breakpoint-lg: 1300px;
    --breakpoint-xl: 1600px;
}

More Sizing Options

Setting the minimum and maximum width

To set an element's minimum width, use the min-w-{width} class. Possible options are:

  • min-w-3xs
  • min-w-2xs
  • min-w-xs
  • min-w-sm
  • min-w-md
  • ... and more

To set an element's maximum width, use the max-w-{size} utilities. Possible options are:

  • min-w-3xs
  • min-w-2xs
  • min-w-xs
  • min-w-sm
  • min-w-md
  • ... and more

Setting the minimum and maximum height

Set the minimum height of an element using the min-h-auto, min-h-full, min-h-screen, and more classes.

Set the maximum height of an element using the max-h-auto, max-h-full, max-h-screen, and more classes.

Setting arbitrary value

You're not limited to preset values; for example, if you want to set the maximum width to 3000px, you can put that value using square brackets max-w-[3000px].

Responsive Grid Layout

Now, let's quickly make a page layout with custom media breakpoints to display a grid of videos to demonstrate how easy it is to customize CSS media queries using Tailwind.

Update Tailwind theme directive and define custom breakpoints:

resources/css/app.css:

@import 'tailwindcss';
 
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
 
@theme { 
    --breakpoint-sm: 684px;
    --breakpoint-md: 1010px;
    --breakpoint-lg: 1336px;
    --breakpoint-xl: 1662px;
    --breakpoint-2xl: 1988px;
}

Then, create a new page to display thumbnails.

resources/views/videos.blade.php:

<html>
    <head>
        <title>Tailwind Videos</title>
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="min-h-screen bg-gray-900">
        <div class="max-w-[3000px] mx-auto">
            <main class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 m-4">
                @for($i = 1; $i <= 60; $i++)
                    <div class="overflow-hidden">
                        <a href="#">
                            <img src="https://picsum.photos/seed/{{ $i }}/482/271" alt="" class="rounded-xl aspect-video w-full object-cover hover:rounded-none hover:scale-105 transition">
                        </a>
                    </div>
                @endfor
            </main>
        </div>
    </body>
</html>

Define a route for the page.

routes/web.php:

Route::view('/videos', 'videos');

Now, compile assets with the npm command.

npm run dev

Visit the /videos URL. You should see the following result, with the number of columns depending on your screen size:

Tailwind Grid 4 Columns

Let's look into the classes we have set on the <main> element:

<main class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 m-4">
  • grid - child elements will placed in a grid
  • grid-cols-1 - by default, everything will be displayed in a single column if no media queries are matched
  • sm:grid-cols-2 - for screens 684px and wider, two columns are displayed
  • md:grid-cols-3 - for screens 1010px and wider, three columns are displayed
  • lg:grid-cols-4 - for screens 1336px and wider, four columns are displayed
  • xl:grid-cols-5 - for screens 1662px and wider, five columns are displayed
  • 2xl:grid-cols-6 - for screens 1988px and wider 6 columns are displayed
  • gap-4 - sets the gap to 1rem (16px) between all rows and columns
  • m-4 - sets a margin to the top, left, right, and bottom of the main element

Try changing the window width and see how the layout changes.

Tailwind Grid 3 Columns

To make all images uniform inside the grid, we applied these classes:

<img class="rounded-xl aspect-video w-full object-cover hover:rounded-none hover:scale-105 transition" ...>
  • rounded-xl - sets round border to image
  • w-full - sets image width to 100%
  • aspect-video - sets an aspect ratio of 16 / 9 to the image; since all columns are of the same width, all thumbnails have the same height
  • object-cover - ensures the image is not distorted and scaled to cover full width and height
  • hover:rounded-none - when we hover the image, the border will no longer be rounded, and we can see a rectangular shape
  • hover:scale-105 - when hovered, the image will be slightly zoomed
  • transition - applies transition when image attributes are changed, so they won't change immediately and have a nice animation effect
Previous: Practical Application of Tailwind CSS Utility Classes

No comments yet…

avatar
You can use Markdown