英文:
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 <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?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<style>
.myclass{
font-size: 10rem;
}
</style>
<body>
<h1 class="myclass text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
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。
module.exports = {
theme: {
extend: {
fontSize: {
'3xl': '10rem',
},
},
},
variants: {},
plugins: [],
}
英文:
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.
module.exports = {
theme: {
extend: {
fontSize: {
'3xl': '10rem',
},
},
},
variants: {},
plugins: [],
}
答案2
得分: 1
将此脚本添加到Head或Body标签中：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<script>
tailwind.config = {
theme: {
extend: {
fontSize: {
'3xl': '10rem',
}
}
}
}
</script>
<!-- end snippet -->
英文:
Add this script in Head or Body tag
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<script>
tailwind.config = {
theme: {
extend: {
fontSize: {
'3xl': '10rem',
}
}
}
}
</script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论