Targeting Screen or Devices

To target Device , we can simply add device prefix at the very begin-ing of classname. for eg:-

<p class="xs-dn">This will not show in smaller device</p>

or using semantic classname

<p class="xs-display-none">This will not show in smaller devices</p>

Media | Responsive | device

Device Guide Table

AliasCSS Device PrefixCSS Selector
print@media print
xs@media (max-width : 576px)
sm@media (min-width : 576px)
md@media (min-width : 768px)
lg@media (min-width : 992px)
xl@media (min-width : 1200px)
2xl@media (min-width : 1408px)
-xs@media (min-width : 576px)
-sm@media (max-width : 576px)
-md@media (max-width : 768px)
-lg@media (max-width : 992px)
-xl@media (max-width : 1200px)
-2xl@media (max-width : 1408px)
dark@media (prefers-color-scheme: dark)
light@media (prefers-color-scheme: light)
@dark@media (prefers-color-scheme: dark)
@light@media (prefers-color-scheme: light)
@theme@layer theme
@base@layer base
@components@layer components
@comps@layer components
@utils@layer utilities
@utilities@layer utilities
@hover@media screen and (hover: hover)
@print@media print
@landscape@media (orientation: landscape)
@portrait@media (orientation: portrait)
@container-xs@container (max-width : 576px)
@container-sm@container (min-width : 576px)
@container-md@container (min-width : 768px)
@container-lg@container (min-width : 992px)
@container-xl@container (min-width : 1200px)
@container-2xl@container (min-width : 1408px)
Want to customize Responsive prefix declaration Customize media prefix

Any of the above prefix can be used, these prefix must be the at the beginning of the classnames. Few examples:-

Define

<div class="xs-flex-direction-column">...</div>
<!--using shorthand !-->
<div class="xs-fdc">...</div>

Compiled

@media (max-width : 576px) {
    .xs-flex-direction-column{
            flex-direction: column ;
        }
}

Define

<div class="xs_p-flex-direction-column">...</div>
<!-- using shorthand  -->
<div class="xs_p-fdc">...</div>

Compiled

@media (max-width : 576px) { 
    .xs_p-flex-direction-column p{
        flex-direction: column ;
    }
}

Define

<div class="md-width500px">...</div>
<!-- using shorthand -->
 <div class="md-w500p">...</div>

Compiled

@media (min-width : 768px){
    .md-width500px{
         width:500px ;
    }
}
Attribute SelectorCSS Variables