带有tailwindcss的字体很棒的响应式大小
Posted
技术标签:
【中文标题】带有tailwindcss的字体很棒的响应式大小【英文标题】：Font-awesome responsive size with tailwindcss 【发布时间】：2021-12-25 05:57:15 【问题描述】：我想让字体大小响应，但它不适用于 font-awesome。
如何使 xl:fa-3x 在 tailwindcss 上工作？
<i class="fas fa-pencil-alt fa-lg xl:fa-3x"></i>
谢谢
【问题讨论】：
如果你想使用预定义的类，我假设你应该使用与字体大小相关的类，比如text-*。
谢谢。我试图在不删除 fa-lg 的情况下应用它，但没有奏效。
见。您可以通过与字体大小相关的类来控制 fa 图标的大小。
这些答案解决了你的问题吗？
【参考方案1】：
这是我的解决方案，您需要使用tailwindcss responsive design 与tailwindcss font size 混合使用：md:text-6xl，记得正确连接到您的项目fontawesome 和tailwindcss 祝你好运;-)
示例代码sn-p：
<i class="fas fa-pencil-alt text-xs text-black sm:text-3xl md:text-6xl"></i>
<head>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body class="h-full">
<div class="flex items-center justify-center h-screen">
<i class="fas fa-pencil-alt text-xs text-black sm:text-3xl md:text-6xl mr-5"></i>
<i class="fab fa-font-awesome-flag text-xs text-black sm:text-3xl md:text-6xl"></i>
</div>
</body>【讨论】：
以上是关于带有tailwindcss的字体很棒的响应式大小的主要内容，如果未能解决你的问题，请参考以下文章
带有 rem 的响应式排版 - 以 % 或 px 为单位的基线字体大小？