Hairlines

For many elements Tailwind Mobile uses so called "hairlines" instead of usual CSS borders.

Hairlines are made with :after and :before pseudo elements. This method allows to have true 0.5px and 0.33px wide "borders".

Add Hairlines

To add hairline we need to use .hairline-[side] classes:

Class
.hairline-tAdd top hairline
.hairline-rAdd right hairline
.hairline-bAdd bottom hairline
.hairline-lAdd left hairline
Note, hairlines use absolute positioning, so make sure element with hairline has absolute, fixed or relative position

For example:

// add bottom hairline to the element
<div className="relative hairline-b">...</div>

Remove Hairlines

To remove hairline we need to use .no-hairline-[side] classes:

Class
.hairline-t-noneRemove top hairline
.hairline-r-noneRemove right hairline
.hairline-b-noneRemove bottom hairline
.hairline-l-noneRemove left hairline

Hairline Color

Hairline color is also customizable with .hairline-[color] classes:

Class
.hairline-[color]Set hairline color

For example:

// add bottom hairline with red-500 color to the element
<div className="relative hairline-b hairline-red-500">...</div>

Hairline Transition Duration

To control hairline transition duration we can use .hairline-duration-[duration] classes:

Class
.hairline-duration-[duration]Set hairline transition duration

For example:

// add bottom hairline with red-500 color to the element, and change its color to blue-500 on hover
<div className="relative hairline-b hairline-red-500 hairline-duration-300 hover:hairline-blue-500">
  ...
</div>
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.