Confusion around the not-small breakpoint in tachyons

Question

Using tachyons css library:

I don't understand how the ns breakpoint works. According to the docs the breakpoints are defined as:

Media Query Extensions:
  -ns = not-small [ @media screen and (min-width: 30em) ]
  -m  = medium [ @media screen and (min-width: 30em) and (max-width: 60em) ]
  -l  = large [ @media screen and (min-width: 60em) ]

  

Thought the following code will ensure only a single div's visibility depending on the width.

<div class="dn-ns dn-m dn-l">Mobile</div>
<div class="dn db-ns">Small</div>
<div class="dn db-m">Medium</div>
<div class="dn db-l">Large</div>

However, the ns breakpoint also appears to kicks in at medium and large breakpoints.

mobile breakpoint, it's default

ns and medium, both kicking in

ns and large, both visible

Is it because the ns breakpoint does not specify an upper bound and so covers anything not mobile?

Answer 1

ns breakpoint means the class will apply to all the sizes which are not small that (min-width:30em // only mobile devices will have width below 30em, so ns will work on tablet, desktop, large display device widths)

<!---display: none on all devices which are not small(dn-m and dn-l are redundant here) --->
<div class="dn-ns dn-m dn-l">Mobile</div>