tailwind-css - 如何根据tailwindcss应用自定义字体大小

Question

我有一个导航菜单；小型设备的字体大小为 10 像素，中型设备为 20 像素，大型设备为 50 像素。不幸的是，我是顺风 css 的新手。

现在我已经编写了如下的css。这是正确的方法吗，我是否需要将像素转换为rem

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

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

@media (min-width: 1024px) {

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

Answer 1

如果您想使用您的自定义样式，只需在第一个声明中更改20px为...10px

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

否则，您可以使用 TailwindCSS 类来获得几乎相同的大小

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

除了xs, 周围12px, 其他大小是相同的。