How to apply custom font-size based on tailwindcss

Question

I have a navigation menu; whose font-size is 10px for small device, 20px for medium and 50px for large device. Unfortunately I am new to tailwind css.

Now I have written the css as below. Is this correct way, do I need to convert the pixel to rem

.nav-link {
  font-size:  10px;
}

@media (min-width: 768px) {
  .nav-link {
        font-size:  20px;
   }
}

@media (min-width: 1024px) {

    .nav-link {
        font-size:  50px;
    }
    
}

score 0 · Answer 1 · answered Nov 30 '21 at 12:45

If you want to use your custom style, just change from 20px to 10px on the first declaration...

.nav-link {
    font-size: 10px;
}

Otherwise, you can use TailwindCSS classes to have almost the same sizes

<a class="text-xs md:text-xl lg:text-5xl">link</a>

Excluding the xs, which is around 12px, the other sizes are the same.

How to apply custom font-size based on tailwindcss

1 Answers1