Предустановки

// Set layer priority
@layer preset, base, theme, utility;

// preset layer
@layer preset {

    // Default Global Variables
    //    --sf-empty — use for set empty value in concatenate styles
    //    --sf-alfa — use for set opacity color
    :root {
    --sf-empty: ;
    --sf-alfa: 1;
    }

    // Default margins are removed
    // Presets removes all of the default margins from elements like headings, blockquotes, paragraphs, etc.
    body,
    blockquote,
    dl,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    figure,
    p,
    pre {
    margin: 0;
    }

    // Headings are unstyled
    // All heading elements are completely unstyled by default, and have the same font-size and font-weight as normal text.
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-size: inherit;
    font-weight: inherit;
    }

    // Lists are unstyled
    // Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding.
    ol,
    //ul {
    //  list-style: none;
    //  margin: 0;
    //  padding: 0;
    //}

    // Images are block-level
    // Images and other replaced elements (like svg, video, canvas, and others) are display: block by default.
    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
    display: block;
    vertical-align: middle;
    }

    // Border styles are reset globally
    // In order to make it easy to add a border by simply adding the border class, Tailwind overrides the default border styles for all elements with the following rules:
    *,
    ::before,
    ::after {
    border-width: 0;
    border-style: solid;
    border-color: theme('borderColor.default', 'currentColor');
    box-sizing: border-box;
    }

    // Buttons have a default outline
    // To ensure that we provide accessible styles out of the box, we made sure that buttons have a default outline. You can of course override this by applying focus:ring or similar utilities to your buttons.
    button:focus {
        outline: 1px dotted;
        outline: 5px auto -webkit-focus-ring-color;
    }

    body {
        color: rgb(var(--sf-gray-9r), var(--sf-gray-9g), var(--sf-gray-9b)); 
        background-color: rgb(var(--sf-white-r), var(--sf-white-g), var(--sf-white-b));
        border-color: rgb(var(--sf-gray-4r), var(--sf-gray-4g), var(--sf-gray-4b)); 
    }

}