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>

Device Guide Table

AliasCSS Device Prefix	CSS 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)

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-width-500px">...</div>
<!-- using shorthand -->
 <div class="md-w-500p">...</div>

Compiled


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