主页 / coding / 问题 / 79232620
Accepted
Linda Dlamini
Asked: 2024-11-28 12:46:32 +0800 CST

有没有办法定义自定义响应类？

  • 772

我对 tailwind 还不太熟悉。我正在尝试找到一种优雅的方式来定义不同屏幕尺寸的类。

鉴于我有不同的屏幕尺寸来处理每个屏幕尺寸中的不同字体大小并使用一个类。

媒体查询是解决此问题的一个方法，但我想知道是否有办法做这样的事情：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .h1 {
        @apply sm:font-size-[33px] md:font-size-[35px] lg:font-size-[43px];
    }
}

不幸的是，我得到了一个错误：

X [错误]sm:font-size-[33px]该类不存在。如果sm:font-size-[33px]是自定义类，请确保它是在@layer指令内定义的。[插件 angular-sass]

styles/ci-font-styles.scss:3:3:
  3 │     @apply sm:font-size-[33px] md:font-size-[35px] lg:font...
    ╵    ^
tailwind-css

1 个回答

  1. Best Answer

    根据字体大小的文档（https://tailwindcss.com/docs/font-size#arbitrary-values）

    您需要使用text-[...px]而不是font-size-[...px]。

    类似于

    @layer components {
    .h1 {
        @apply sm:text-[33px] md:text-[35px] lg:text-[43px];
    }
}

    应该可以。

    • 0

相关问题