Media запросы под TailwindCSS

В первую очередь нужно в конфигурационном файле переопределить свои точки экранов:

theme: {
    screens: {
        'xss': '400px',
        'xs': '480px',
        'sm': '576px',
        'md': '768px',
        'lg': '992px',
        'xl': '1200px',
        'xxl': '1400px',
        'xxxl': '1600px',
        'fhd': '1920px',
        '2k': '2880px',
        '4k': '3840px',
    },
    container: {
        center: true,
        padding: {
            DEFAULT: '15px',
            md: '30px',
        },
    },
}

Затем мы можем использовать в файлах SCSS (SASS):

@media (max-width: theme('screens.xs')){
    ...
}

И конечно же не забываем о видимости классов, в HTML в class для видимости media запроса по правилу max-width необходимо указать следующее (пример с XS):

<div class=" xs:text-color-red ">123</div>