# Tailwind expanding slider

Some time ago, I made this cool [expanding slider in CSS](https://daily-dev-tips.com/posts/css-only-expanding-slider-%F0%9F%98%B2/).
And I was intrigued if it was possible in Tailwind.

The short answer: Yes!

This is what it will look like:

%[https://codepen.io/rebelchris/pen/oNBLBxV]

## 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.

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

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

```html
<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>
```

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:

```js
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](https://daily-dev-tips.com/posts/using-google-fonts-in-a-tailwind-project/)

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

```html
<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>
```

Way cleaner, right?

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

```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](https://play.tailwindcss.com/lsrb2bG5RP?file=css).

### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)