DEV Community

loading...
Cover image for Tailwind expanding slider

Tailwind expanding slider

dailydevtips1 profile image Chris Bongers Originally published at daily-dev-tips.com ・2 min read

Some time ago, I made this cool expanding slider in CSS.
And I was intrigued if it was possible in Tailwind.

The short answer: Yes!

This is what it will look like:

Tailwind expanding slider structure

We obviously have some help by already having made this before. For the Tailwind version, let's start by making the container and slider wrapper.

<div class="flex w-full h-full items-center justify-center">
  <div class="flex w-5/6 h-5/6">
    <!-- Slides here -->
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Yes, that is basically it!
So far, we didn't need anything fancy, but let's move onto how a slide should look.

<div
  class="slide relative flex-auto bg-cover bg-center transition-all duration-500 ease-in-out hover:flex-grow"
  style="background-image:url('img.png')"
></div>
Enter fullscreen mode Exit fullscreen mode

There are two things to note here:

  1. For the codepen, I used an inline background-image
  2. I use the slide class for the hover

These two elements should be included in the tailwind.config.js file and extend Tailwind.

This config will look like this:

module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        1: "url('1.jpg')",
        2: "url('2.jpg')",
        3: "url('3.jpg')",
        4: "url('4.jpg')",
        5: "url('5.jpg')"
      },
      flex: {
        5: 5
      }
    }
  },
  variants: {},
  plugins: []
};
Enter fullscreen mode Exit fullscreen mode

Note: Check out this article for custom config in Tailwind

With the config in place we can convert our HTML to look like this:

<div class="flex w-full h-full items-center justify-center">
  <div class="flex w-5/6 h-5/6">
    <div class="slide bg-1"></div>
    <div class="slide bg-2"></div>
    <div class="slide bg-3"></div>
    <div class="slide bg-4"></div>
    <div class="slide bg-5"></div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Way cleaner, right?

Now all we need to do is add the custom CSS.

.slide {
  @apply relative flex-auto bg-cover bg-center transition-all duration-500 ease-in-out;
}
.slide:hover {
  @apply flex-5;
}
Enter fullscreen mode Exit fullscreen mode

And that's it!
You can find this demo on the Tailwind playground.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (0)

pic
Editor guide