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

Posted 2023-03-07

【中文标题】如何根据tailwindcss应用自定义字体大小

【英文标题】：How to apply custom font-size based on tailwindcss

【发布时间】：2022-01-06 21:42:42

【问题描述】：

我有一个导航菜单；小型设备的字体大小为 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;
    
    

【参考方案1】：

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

.nav-link 
    font-size: 10px;

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

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

除了xs，它在12px附近，其他大小相同。