Subscribe

Tailwind expanding slider

✍️

Making a expanding slider, using only TailwindCSS

1 Apr, 2021 · 2 min read

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:

See the Pen Tailwind expanding slider by Chris Bongers (@rebelchris) on CodePen.

Tailwind expanding slider structure

We have some help by already having made this before. Let's start making the container and slider wrapper for the Tailwind version.

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

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

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

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: [],
};

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 items-center justify-center w-full h-full">
  <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>

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;
}

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Creating an animated wave line with Tailwind CSS

10 Mar, 2022 · 4 min read

Creating an animated wave line with Tailwind CSS

Tailwind CSS Numeric font variants

9 Mar, 2022 · 3 min read

Tailwind CSS Numeric font variants

Join 1829 devs and subscribe to my newsletter