@vicgutt/tailwindcss-opinionated-preset/src/base/opinionated.css

A TailwindCSS opinionated preset with an extended theme & multiple useful plugins installed

/* sanitize.css'ish
------------------------------------------------*/

:where(:root) {
    /* word-break: break-word; */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* Single taps are dispatched immediately on clickable elements */
:where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/*
 * 1. Remove animations when motion is reduced (opinionated).
 * 2. Remove fixed background attachments when motion is reduced (opinionated).
 * 3. Remove timed scrolling behaviors when motion is reduced (opinionated).
 * 4. Remove transitions when motion is reduced (opinionated).
 *
 * @see https://github.com/csstools/sanitize.css/blob/61c85b6961f684d0124093d97475073bb08f557e/reduce-motion.css
 */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-delay: -1ms !important; /* 1 */
        animation-duration: 1ms !important; /* 1 */
        animation-iteration-count: 1 !important; /* 1 */
        background-attachment: initial !important; /* 2 */
        scroll-behavior: auto !important; /* 3 */
        transition-delay: 0s !important; /* 4 */
        transition-duration: 0s !important; /* 4 */
    }
}

/**
 * Restrict sizing to the page width in all browsers (opinionated).
 *
 * @see https://github.com/csstools/sanitize.css/blob/092d0d85922bfa72d28e9e8d25d80a5437c8df44/assets.css
 */
:where(iframe, img, input, video, select, textarea) {
    height: auto;
    max-width: 100%;
}

/**
 * Overwrite Tailwind's default behaviour for better accessibility.
 */
ol,
ul {
    list-style: initial;
}
:where(ol, ul)[role='list'],
:where(ol, ul)[role='tablist'] {
    list-style: none;
}

/* Bootstrap v5.2.2 - Reboot
 *
 * @see https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss
 * @see https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap-reboot.css
------------------------------------------------*/

@media (prefers-reduced-motion: no-preference) {
    /* ":focus-within" from https://github.com/mayank99/reset.css/blob/fd9668d7340478e97896a63291b6ffb064edd776/package/index.css */
    :where(:root:focus-within) {
        scroll-behavior: smooth;
    }
}

:where(button) {
    /**
    * Remove the default `border-radius` that macOS Chrome adds.
    * See https://github.com/twbs/bootstrap/issues/24093
    */
    border-radius: 0;
}

/* 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */
/* 2. Add explicit cursor to indicate changed behavior. */
/* 3. Prevent the text-decoration to be skipped. */

abbr:where([title]) {
    /* text-decoration: underline dotted; -> Already handled by Tailwind; */ /* 1 */
    cursor: help; /* 2 */
    /* text-decoration-skip-ink: none; */ /* 3 */
}

/* ... */

/* Custom'ish
/* And @see https://github.com/mayank99/reset.css/blob/3dc89fae0a7178cd8ddef211f98100b4c75496ac/package/index.css
------------------------------------------------*/

:where(:root) {
    --accent-color: var(--color-accent-600);
    --app-min-width: 300px;

    accent-color: var(--accent-color);
    color-scheme: light dark;
    min-block-size: 100dvb;
    min-inline-size: var(--app-min-width);
    color: var(--app-text-color);
    background-color: var(--app-bg-color);
}

:where(:root.dark) {
    --accent-color: var(--color-accent-500);

    color-scheme: dark;
}

/* @see https://twitter.com/LeaVerou/status/1045768279753666562 */
:where(:focus:not(:focus-visible)) {
    outline: none;
}

:where(:focus-visible) {
    outline: dotted 0.1em var(--accent-color);
    outline-offset: 2px;
}

:where(body) {
    min-block-size: 100dvb;
    display: flex;
    flex-direction: column;
}

/**
 * @see https://developer.chrome.com/blog/css-text-wrap-balance/#balancing-headlines
 */
:where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
}

:where(pre) {
    white-space: pre-wrap; /* @see https://github.com/jensimmons/cssremedy/blob/af14bf33097668201441cafabe02072143fcb364/css/remedy.css */
}

:where(a, button) {
    /* transition-property: theme('transitionProperty.DEFAULT');
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function); */

    @apply transition;
}

:where(a) {
    text-underline-offset: 0.2ex;
}

:where(a:not([href]):not([class]):focus) {
    outline: 0;
}

:where(
    button,
    select,
    summary,
    area,
    a[href],
    label[for],
    input[type='checkbox' i], /* input types : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type */
    input[type='radio' i],
    input[type='button' i],
    input[type='color' i],
    input[type='range' i],
    input[type='reset' i],
    input[type='submit' i],
    input::file-selector-button,
    input::-webkit-file-upload-button,
    input::-webkit-calendar-picker-indicator,
    [role='button'],
    [role='option']
):where(:not([disabled])) {
    cursor: pointer;
}
:where(input[type='image' i]):not([disabled]) {
    cursor: auto;
}
:where(label:has(> :disabled, + :disabled)) {
    cursor: not-allowed;
}

:where(img[draggable='false' i]) {
    user-select: none;
}

:where([hidden]:not([hidden='until-found'])) {
    display: none !important;
}

:where(#app) {
    isolation: isolate;
}

::marker {
    color: var(--accent-color);
}
/**
 * Can not be rendered by Tailwind v4 for some reason.
 */
/* :is(
        ::-webkit-calendar-picker-indicator,
        ::-webkit-clear-button,
        ::-webkit-inner-spin-button,
        ::-webkit-outer-spin-button
    ) {
    color: var(--accent-color);
} */

/*** Selection  ***/

::selection {
    color: var(--color-white);
    background-color: oklch(from var(--accent-color) l c h / 0.5);
    text-shadow: none;
}
::-moz-selection {
    color: var(--color-white);
    background-color: oklch(from var(--accent-color) l c h / 0.5);
    text-shadow: none;
}
::-moz-selection img {
    color: var(--color-white);
    background-color: oklch(from var(--accent-color) l c h / 0.5);
}

/*** Scrollbar  ***/

@supports (scrollbar-width: thin) {
    /* Enabling this only for Firefox as Chrome now also supports "scrollbar-width" */
    @-moz-document url-prefix() {
        :root {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb, var(--color-gray-300)) var(--scrollbar-track, transparent); /* The first applies to the thumb of the scrollbar, the second to the track. */
        }
        * {
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar-thumb, var(--color-gray-300)) var(--scrollbar-track, transparent); /* The first applies to the thumb of the scrollbar, the second to the track. */
        }
        :is(:root.dark) {
            --scrollbar-thumb: var(--color-gray-600);
        }
        :is(:root.dark) * {
            --scrollbar-thumb: var(--color-gray-600);
        }
    }
}

/**
 * Customized scrollbar for Webkit based browsers
 *
 * ::-webkit-scrollbar — the entire scrollbar.
 * ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards that scroll one line at a time).
 * ::-webkit-scrollbar-thumb — the draggable scrolling handle.
 * ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top of a white bar.
 * ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
 * ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet This is often the bottom-right corner of the browser window.
 * ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
 * @see https://webkit.org/blog/363/styling-scrollbars/
 * @see https://css-tricks.com/custom-scrollbars-in-webkit/
*/

::-webkit-scrollbar {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
}

/* ::-webkit-scrollbar:vertical {
    width: calc(var(--spacing) * 3.5);
}
::-webkit-scrollbar:horizontal {
    height: calc(var(--spacing) * 3.5);
} */

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 8px;
}
::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track, transparent);
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb, var(--color-gray-300));
}

:is(:root.dark) ::-webkit-scrollbar-thumb {
    --scrollbar-thumb: var(--color-gray-600);
}
::-webkit-scrollbar-thumb:hover,
:is(:root.dark) ::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover, var(--color-gray-500));
}

/* ::-webkit-scrollbar-track-piece {
    background-color: theme('colors.white') | var(--color-gray-900);
} */

:where(.scrollbar-sm)::-webkit-scrollbar {
    height: calc(var(--spacing) * 3);
    width: calc(var(--spacing) * 3);
}
:where(.scrollbar-md)::-webkit-scrollbar {
    height: calc(var(--spacing) * 3.5);
    width: calc(var(--spacing) * 3.5);
}
:where(.scrollbar-lg)::-webkit-scrollbar {
    height: calc(var(--spacing) * 4);
    width: calc(var(--spacing) * 4);
}
:where(.scrollbar-none) {
    scrollbar-width: none;
}
:where(.scrollbar-none)::-webkit-scrollbar {
    display: none;
}