I can’t get scroll snapping to work with CSS and have tried multiple times and with tailwind as well and it just doesnt work. It kinda “buggyly” works on mobile devices.

I have the following classes on my App and start of my page components (React) respectively:

.app {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.scroll-section {
    scroll-snap-align: start;
}

Example (all pages have this class at the top div) :

 <div className={"flex scroll-section flex-col h-screen justify-center items-center"} id={"landing"}>

App component:

import './App.css';
import { MaxWidthWrapper } from './components/MaxWidthWrapper.tsx';
import { Landing } from './pages/landing/Landing.tsx';
import { Projects } from './pages/projects/Projects.tsx';
import { Technologies } from './pages/technologies/Technologies.tsx';
import {Flowbite} from "flowbite-react";
import {ThemeProvider} from "../@/components/theme-provider.tsx";
type ThemeMode = "light" | "dark" | "auto";

declare const useThemeMode: () => {
    mode: ThemeMode;
    computedMode: ThemeMode; // "light" | "dark"
    setMode: (mode: ThemeMode) => void;
    toggleMode: () => void;
    clearMode: () => void;
};

function App() {

    return (

        <Flowbite>
            <ThemeProvider defaultTheme={"light"} storageKey="ui-theme">
        <div className={"app dark:bg-gray-800 snap-mandatory snap-y overflow-y-scroll"}>
        <MaxWidthWrapper>
                <Landing/>
                <Technologies/>
                <Projects/>
        </MaxWidthWrapper>
        </div>
            </ThemeProvider>
        </Flowbite>
);
}

export default App;

Why is scroll snapping not working??