Notus Svelte Custom Classes
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%; |