DEV Community

Cover image for Making a fullscreen vertical slider with Tailwind and Eleventy
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Making a fullscreen vertical slider with Tailwind and Eleventy

In this article I will be recreating my full-screen scrollable vertical slider using Tailwind CSS and Eleventy.

This will become the homepage for my lifestyle blog, the end result of todays article will look like this:

Tailwind full-page homepage scroll sections

Making full screen sections in Tailwind CSS

We will start by making our main container and the full screen sections inside.

We have a total of five sections for the homepage.

<main>
  <section class="w-full h-screen bg-red-200">
    Section 1
  </section>
  <section class="w-full h-screen bg-blue-200">
    Section 2
  </section>
  <section class="w-full h-screen bg-green-200">
    Section 3
  </section>
  <section class="w-full h-screen bg-indigo-200">
    Section 4
  </section>
  <section class="w-full h-screen bg-yellow-200">
    Section 5
  </section>
</main>
Enter fullscreen mode Exit fullscreen mode

This gives us the following result

Tailwind full screen sections

As you can see each section is the exact width/height of our viewport.
Even if we resize it will keep this size.

But we can now scroll to have section so how can we make it snap to each section?

Scroll-snaping with Tailwind CSS

There is a very cool CSS property called scroll-snap which can help us create this "scroll-snapping" behaviour with no custom JavaScript needed.

However, Tailwind CSS is missing this Scroll-snap feature. So let's start by extending the utilities for Tailwind.

Open up the global.css file and add the following lines:

@layer utilities {
  .snap {
    scroll-snap-type: var(--scroll-snap-direction) var(--scroll-snap-constraint);
  }
  .snap-y {
    --scroll-snap-direction: y;
  }
  .snap-mandatory {
    --scroll-snap-constraint: mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
}
Enter fullscreen mode Exit fullscreen mode

This will extend Tailwind and add the missing classes we need.

Note: I only added the actual classes we need, not all the scroll-snap types.

Now let's add these classes to our HTML structure, starting with the <main> element.

<main class="max-h-screen overflow-y-scroll snap snap-y snap-mandatory"></main>
Enter fullscreen mode Exit fullscreen mode

First, we'll make sure the element has a max-height of the screen and the overflow vertical is set to scroll.
Then we add our recently created snap classes which will render to the following:

scroll-snap-type: y mandatory;
Enter fullscreen mode Exit fullscreen mode

Perfect, now we just need to tell our sections where they have to snap to.

<section class="w-full h-screen bg-red-200 snap-start"></section>
Enter fullscreen mode Exit fullscreen mode

You see, we added the snap-start class to each section, and this will now render to behave as you can see in the GIF below.

Scroll snapping in CSS

Pretty cool right!

Finishing our section with their appropriate styling

Each of our sections will have it's own unique styling, the first section is a full-screen background image with the logo centered in the middle of it.

I've placed the images directly in the src/images folder.

First of all we need to add a custom backgroundImage in our tailwind.config.js file this will allow us to easily use the background image as a class.

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {
      // Other extends
      backgroundImage: {
        'home-1': "url('images/home-intro.jpg')"
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};
Enter fullscreen mode Exit fullscreen mode

Now we can use this background using the following class.

class="bg-home-1"
Enter fullscreen mode Exit fullscreen mode

The HTML for this section will look like this:

<section
  class="flex items-center justify-center w-full h-screen  bg-center bg-cover snap-start bg-home-1"
>
  <img alt="The todoist logo" title="The Todoist Logo" src="images/logo.png" />
</section>
Enter fullscreen mode Exit fullscreen mode

This will give us the following result:

Homepage section one

Section two is the about page section which showcases an image with some offset text on top of it.

We will use Tailwind CSS Grid as we did in the Newsletter layout.

<section class="flex items-center justify-center w-full h-screen snap-start">
  <div class="grid grid-flow-row grid-cols-12 grid-rows-1 gap-8">
    <div class="z-10 flex flex-col justify-center col-span-3 col-start-2 row-start-1">
      <h1 class="font-black text-purple">About The Todoist</h1>
      <h3 class="text-pink">Coffee, Adrenaline, and a bunch off craziness</h3>
    </div>
    <div class="flex flex-col items-end col-span-6 col-start-3 row-start-1">
      <img src="https://thetodoist.com/static/media/home_about.104e3ad7.jpg" />
      <a href="/about" class="mt-2 text-xs underline">Find out more &rarr;</a>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

In this section I use the same start-row and start-col hack to overlap the elements.

I then use CSS Flex to align the elements in the right position.

The result for this section:

Section two styling

As you can see it's an offset element, this is how it was designed, you could center it adjusting the col-start position.

As for the third section it's a big section that showcases the featured post.

For this example we will hardcode the article, in a later stage we will connect it to our data store.

<section
  class="flex items-center justify-center w-full h-screen text-white bg-purple snap-start"
>
  <div class="grid grid-flow-row grid-cols-12 grid-rows-1 gap-8">
    <div class="col-span-5 col-start-2">
      <img src="https://thetodoist.com/img/blog/forgotten-punctuation/overview.jpg" />
    </div>
    <div class="flex flex-col justify-center col-span-3 col-start-8">
      <h2 class="font-black">Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed diam, sed diam.</p>
      <a href="#" class="mt-2 text-xs underline">Read more &rarr;</a>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

This is again a section where I used mainly CSS Grid to create the elements next to each other, and flex to align them.

The result for this section:

Tailwind CSS Section styling

The fourth section is very similar to the previous one, it showcases a blog item, however focussing on the background image like in section one.

Since this data will be populated from the actual blog item we need to use a inlined background-image.

We can then use a div that has a narrow width for the text area.

The whole HTML for this section will look like this:

<section
  class="flex items-center w-full h-screen bg-indigo-200 bg-center bg-cover text-purple snap-start"
  style="background-image: url(https://thetodoist.com/img/blog/beach-workouts/running.jpg)"
>
  <div class="w-1/12">&nbsp;</div>
  <div class="w-3/12">
    <div class="relative">
      <span class="absolute flex w-full h-0.5 -ml-4 bg-purple -left-full top-1/2"></span
      >Health
    </div>
    <a href="#">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing, sed diam, sed diam.</p>
    </a>
    <a href="#" class="mt-2 text-xs underline">Read more &rarr;</a>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

And this will give us the following result.

Full screen post section in Tailwind CSS

The last section is the contact section.
I will change the design a little big, so we don't have the form anymore.

The tricky part here is enabling the background pattern for this section.

Let's first add this pattern to our tailwind.config file.

backgroundImage: {
    "home-1": "url('images/home-intro.jpg')",
    "pattern-striped": "url('images/pattern-striped.png')",
},
Enter fullscreen mode Exit fullscreen mode

Now we can use this on our section:

<section class="w-full h-screen bg-pattern-striped snap-start"></section>
Enter fullscreen mode Exit fullscreen mode

The rest of the block uses grid and flex to align the items again.

<section class="flex items-center justify-center w-full h-screen bg-pattern-striped snap-start">
  <div class="grid grid-flow-row grid-cols-12 grid-rows-1 gap-8">
    <div class="col-span-10 col-start-2">
    <h2 class="font-black">Coffee? Sure let's do it.</h2>
    <strong class="flex w-1/2">Always up for meeting new people, learning stuff, trying new things, so please give me a shout out if you want to be in touch.</strong>

    <div class="flex mt-8">
      <div class="w-1/2">
        <h4>Contact me</h4>
        <p>Send me an email on <a class="underline" href="mailto:info@thetodoist.com">info@thetodoist.com</a></p>
      </div>
      <div class="w-1/2">
        <h4>Currently in</h4>
        <p>Cape Town, South Africa</p>
      </div>
    </div>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode

This will render in the following result.

Tailwind homepage contact pattern

There we go, we now have our full vertical scrollable homepage sections made in Tailwind.

You can find today's work on GitHub.

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

Top comments (0)