How To Control The Scroll Snap in Tailwind CSS?
Last Updated :
08 Oct, 2024
To simplify scroll snap effects, a utility-first CSS framework, Tailwind CSS, helps with some utilities. When scroll snapping is in place, users are guided through the content smoothly by snapping elements into position as they scroll down the page, resulting in a more polished and responsive experience for your websites.
Prerequisites
Approach
- Creating a horizontally or vertically scrolling container.
- Applying scroll snap properties to align content after scrolling.
- Customizing scroll snap behavior to control the snap alignment.
Steps To Control The Scroll Snap
Step 1: Create a new project
- Create a new project directory and navigate into it using the following commands in your terminal:
mkdir tailwind-colors
cd tailwind-colors
- Next, initialize a new Node.js project using the following command:
npm init -y
Step 2: Install Tailwind CSS
npm i tailwindcss postcss autoprefixer
npx tailwindcss init
Step 3: Configure Tailwind to remove unused styles in tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}- Create a new public directory in the root of our project directory. In the public directory create new files .public/index.html and .public/tailwind.css.
Step 4: Configure tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
After adding code in tailwind.css run on command in terminal for style.css.
npx tailwindcss -i public/tailwind.css -o public/styles.css --watch
import image:
https://drive.google.com/drive/u/0/folders/1l7jxjRtehNuBqMPf4EXeXmVU5csGll1H
Start the Tailwind CLI build process: Run the CLI tool to scan your template files for classes and build your CSS:
npx tailwindcss -i public/tailwind.css -o public/styles.css --watch
Project Structure:
Project StructureUpdated Dependencies:
{
"name": "tailwind-skew-button-gfg",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"dependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.13"
}
}Example 1: Snap-start in Horizontal way using the images all setup is same only change in index.html code file
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Scroll Snap End Demo</title>
<link href="styles.css" rel="stylesheet">
<style>
/* Basic styles for horizontal scrolling and snapping */
.snap-x {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
gap: 10px;
/* Add some space between the items */
padding: 10px;
}
.snap-center {
scroll-snap-align: center;
flex-shrink: 0;
}
img {
width: 100px;
height: 90px;
object-fit: cover;
border-radius: 8px;
}
/* Hide the scrollbar for better UX */
.snap-x::-webkit-scrollbar {
display: none;
}
.snap-x {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
</style>
</head>
<body>
<div class="mt-20 snap-x">
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/
20241007122637359872/1.png">
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122822282016/2.png">
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007123135405175/file.jpg" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/
20241007122637359872/1.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/
20241007122637359872/1.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122822282016/2.png">
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007123135405175/file.jpg" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122822282016/2.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122822282016/2.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007123135405175/file.jpg" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/
20241007122637359872/1.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007123135405175/file.jpg" />
</div>
</div>
</body>
</html>
Output:
Example 2: This example shows the Snap-start vertical way.
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Scroll Snap End Demo</title>
<link href="styles.css" rel="stylesheet">
<style>
/* Basic styles for vertical scrolling and snapping */
.snap-y {
display: flex;
flex-direction: column;
overflow-y: scroll;
scroll-snap-type: y mandatory;
gap: 10px;
/* Add some space between the items */
padding: 10px;
height: 100vh;
/* Full viewport height */
justify-content: center;
/* Center content horizontally */
align-items: center;
/* Center content vertically */
}
.snap-center {
scroll-snap-align: center;
flex-shrink: 0;
}
img {
width: 100px;
height: 90px;
object-fit: cover;
border-radius: 8px;
}
/* Hide the scrollbar for better UX */
.snap-y::-webkit-scrollbar {
display: none;
}
.snap-y {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
</style>
</head>
<body>
<div class="snap-y">
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122637359872/1.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122822282016/2.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007123135405175/file.jpg" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122822282016/2.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007122637359872/1.png" />
</div>
<div class="snap-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads
/20241007123135405175/file.jpg" />
</div>
</div>
</body>
</html>
Output:
Similar Reads
How to Change Style of Scrollbar using Tailwind CSS?
By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar wid
3 min read
How to Skew a Button in Tailwind CSS?
Skewed buttons can add a dynamic and modern look to your website, Tailwind CSS provides utility classes to easily apply 2D transformations like tilt, rotation, and scaling, we'll explain how to tilt, buttons using Tailwind CSS and create a simple project to demonstrate this.Approach To Skew A Button
2 min read
How to Create Parallax Effect in Tailwind CSS ?
A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. If you use the parallax effect on our page then it helps the user to interact with the page. PreviewCreating Parallax Effect in Tailwind CSS At
3 min read
How to target next sibling in Tailwind CSS ?
In Tailwind CSS, you may run into a situation where you only want to target and format direct siblings of HTML elements. This article walks you through the process of accessing the direct sibling of a tag in Tailwind CSS by providing syntax, methods, and examples. A solution that allows developers t
3 min read
How to control scrolling of image using CSS ?
In this article, we will see what property can be utilized to control the image scroll using CSS. To accomplish this task, we can implement the background-attachment property that specifies the kind of attachment of the background image with respect to its container. It can be applied to all HTML el
10 min read
How to Install Tailwind CSS with Create React App?
We will see how to set up Tailwind CSS in a React project using the Create React App. Tailwind CSS is a utility-first CSS framework that allows for rapid development of custom user interfaces. When combined with Create React App, it offers a flexible approach to build modern React applications.Prere
2 min read
How to Create Columns with the Same Height in Tailwind CSS ?
Creating columns of equal height is a common design requirement in web development. This need arises in scenarios like displaying a grid of cards or a list of items where each column should have the same height regardless of its content. Tailwind CSS, a utility-first CSS framework, provides several
2 min read
How to use calc() in Tailwind CSS?
The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities.1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values.H
2 min read
How to Implement Smooth Scrolling using Tailwind CSS ?
Smooth scrolling refers to the scrolling of a section of the webpage when the respective link is clicked. By default when we click a link it skips directly to that element using smooth scrolling the UX improves a lot. Tailwind CSS provides a utility class named scroll-smooth which applies the CSS pr
2 min read
Create Animated Scroll-to-Top Button in Tailwind CSS
An animated scroll-to-top button is a user interface element that appears on a webpage when the user scrolls down. It allows the user to quickly return to the top of the page with a single click or tap. This feature is often implemented using CSS animations or transitions, and it can enhance the use
2 min read