gpt4 book ai didi

使用 tailwindcss 的超棒字体响应大小

转载 作者:行者123 更新时间:2023-12-05 02:37:32 25 4
gpt4 key购买 nike

我想让字体大小响应,但它不适用于 font-awesome。

如何让 xl:fa-3x 在 tailwindcss 上运行?

<i class="fas fa-pencil-alt fa-lg xl:fa-3x"></i>

谢谢

最佳答案

这是我的解决方案,您需要使用 tailwindcss responsive design与 tailwindcss 混合 font size像这样:md:text-6xl,记得正确连接到你的项目 fontawesometailwindcss 祝你好运;-)

示例代码片段:

<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 的超棒字体响应大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69950476/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com