如何使用 TailwindCSS 限制字体大小？

Question

CSS 函数如何clamp()与 TailwindCSS 一起使用以fontSize在最小值和最大值之间进行线性缩放？

对与 Next.js 集成特别感兴趣。

Answer 1

在撰写本文时，TailwindCSS 似乎默认并不clamp()原生支持。

搜索返回使用插件进行多行截断的line-clamp用例，这与限制字体大小不同。

受到这个 GitHub 问题的启发，clamp()在 TailwindCSS 中使用可以通过扩展默认主题来完成。Next.js 应用程序中的示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontSize: {
        clamp: "clamp(1rem, 5vw, 3rem)",
      },
    },
  },
  plugins: [],
};

jsx要在或组件中使用它tsx，只需将其text-clamp作为附加的className.

链接到工作codesandbox。