style.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/core/dist/style.css';

@custom-variant touch-only (@media (hover: none) or (pointer: coarse));

/* This media query applies styles only to devices that do not support hover, 
   such as touchscreens. It ensures that elements with a title attribute 
   display a tooltip when focused. */
@media (hover: none) {
    [title] {
        position: relative;
        display: inline-flex;
        justify-content: center;
    }
    [title]:focus::after {
        content: attr(title);
        position: absolute;
        top: 90%;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
        z-index: 99;
    }
}

button {
    cursor: pointer;
}