Tailwind CSS Custom Classes - Notus JS
New classes, added to the Tailwind CSS ones.
Since our web app is a fully coded website, we needed a bit more than what Tailwind CSS has to offer, so we’ve decided to add some new classes, so that we won’t need to use inline styles.
Here are these classes.
| # | Class Name | Class Description |
| 1 |
.min-h-screen-75
|
min-height: 75vh;
|
| 2 |
.text-55
|
font-size: 55rem;
|
| 3 |
.opacity-80
|
opacity: .8;
|
| 4 |
.z-2
|
z-index: 2;
|
| 5 |
.z-3
|
z-index: 3;
|
| 6 |
.-right-100
|
right: -100%;
|
| 7 |
.-top-225-px
|
top: -225px;
|
| 8 |
.-top-160-px
|
top: -160px;
|
| 9 |
.-top-150-px
|
top: -150px;
|
| 10 |
.-top-94-px
|
top: -94px;
|
| 11 |
.-left-50-px
|
left: -50px;
|
| 12 |
.-top-29-px
|
top: -29px;
|
| 13 |
.-left-20-px
|
left: -20px;
|
| 14 |
.top-25-px
|
top: 25px;
|
| 15 |
.left-40-px
|
left: 40px;
|
| 16 |
.top-95-px
|
top: 95px;
|
| 17 |
.left-145-px
|
left: 145px;
|
| 18 |
.left-195-px
|
left: 195px;
|
| 19 |
.top-210-px
|
top: 210px;
|
| 20 |
.left-260-px
|
left: 260px;
|
| 21 |
.h-95-px
|
height: 95px;
|
| 22 |
.h-70-px
|
height: 70px;
|
| 23 |
.h-350-px
|
height: 350px;
|
| 24 |
.h-500-px
|
height: 500px;
|
| 25 |
.h-600-px
|
height: 600px;
|
| 26 |
.max-h-860-px
|
max-height: 860px;
|
| 27 |
.max-w-100-px
|
max-width: 100px;
|
| 28 |
.max-w-120-px
|
max-width: 120px;
|
| 29 |
.max-w-150-px
|
max-width: 150px;
|
| 30 |
.max-w-180-px
|
max-width: 180px;
|
| 31 |
.max-w-200-px
|
max-width: 200px;
|
| 32 |
.max-w-210-px
|
max-width: 210px;
|
| 33 |
.max-w-580-px
|
max-width: 580px;
|
| 34 |
.min-w-48
|
min-width: 12rem;
|
| 35 |
.min-w-140-px
|
min-width: 140px;
|
| 36 |
.bg-full
|
background-size: 100%;
|