自定义类字体大小在Tailwind CSS中不起作用。

huangapple
go评论137阅读模式
英文:

Custom class font-size not working in Tailwind CSS

问题

I have defined a custom class called .myclass in the <style> tag with a font-size of 10rem. However, the font size of the h1 element with the .myclass and text-3xl classes is not being set to 10rem as expected. Can someone please explain why this is happening and suggest a solution?

英文:

I have defined a custom class called .myclass in the &lt;style&gt; tag with a font-size of 10rem. However, the font size of the h1 element with the .myclass and text-3xl classes is not being set to 10rem as expected. Can someone please explain why this is happening and suggest a solution?

  1. &lt;!doctype html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.   &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
  7. &lt;/head&gt;
  8. &lt;style&gt;
  9.     .myclass{
  10.         font-size: 10rem;
  11.     }
  12. &lt;/style&gt;
  13. &lt;body&gt;
  14.   &lt;h1 class=&quot;myclass text-3xl font-bold underline&quot;&gt;
  15.     Hello world!
  16.   &lt;/h1&gt;
  17. &lt;/body&gt;
  18. &lt;/html&gt;

I expected the h1 element with both the .myclass and text-3xl classes to have a font size of 10rem. However, the font size of the h1 element was not being set to 10rem as expected, and I was unsure why this was happening.

答案1

得分: 1

选项1： 移除.text-3xl类。文本大小将完全依赖于.myclass类。

选项2： 你可以修改Tailwind的配置，将.text-3xl类设置为10rem。

  1. module.exports = {
  2.   theme: {
  3.     extend: {
  4.       fontSize: {
  5.         '3xl': '10rem',
  6.       },
  7.     },
  8.   },
  9.   variants: {},
  10.   plugins: [],
  11. }
英文:

Option 1: Remove .text-3xl class. The text-size will be fully rely on .myclass class.

Option 2: You can change the configuration of Tailwind to use 10rem for the .text-3xl class.

  1. module.exports = {
  2.   theme: {
  3.     extend: {
  4.       fontSize: {
  5.         &#39;3xl&#39;: &#39;10rem&#39;,
  6.       },
  7.     },
  8.   },
  9.   variants: {},
  10.   plugins: [],
  11. }

答案2

得分: 1

将此脚本添加到Head或Body标签中：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. <script>
  5.     tailwind.config = {
  6.       theme: {
  7.         extend: {
  8.           fontSize: {
  9.             '3xl': '10rem',
  10.           }
  11.         }
  12.       }
  13.     }
  14. </script>
  16. <!-- end snippet -->
英文:

Add this script in Head or Body tag

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. &lt;script&gt;
  2.     tailwind.config = {
  3.       theme: {
  4.         extend: {
  5.           fontSize: {
  6.             &#39;3xl&#39;: &#39;10rem&#39;,
  7.           }
  8.         }
  9.       }
  10.     }
  11. &lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月7日 15:48:23
  • 转载请务必保留本文链接：https://go.coder-hub.com/76192748.html
  • css
  • font-size
  • html
  • javascript
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定