Размер шрифта пользовательского класса не работает в Tailwind CSS
Я определил пользовательский класс с именем .myclass в теге <style> с font-size из 10rem. Однако размер шрифта элемента h1 с классами .myclass и text-3xl не установлен равным 10rem, как ожидалось. Может кто-нибудь объяснить, почему это происходит, и предложить решение?
<!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>
Я ожидал, что элемент h1 с классами .myclass и text-3xl будет иметь размер шрифта 10rem. Однако размер шрифта элемента h1 не был установлен на 10rem, как ожидалось, и я не был уверен, почему это происходит.
вы можете удалить этот класс попутного ветра text-3xl, если вам нужно 10 rem из вашего пользовательского класса, который называется «.myclass», или либо настроить попутный ветер для 10 rem
Спасибо за ваше предложение, я попытался удалить класс text-3xl из элемента h1, и мне удалось установить размер шрифта 10rem, используя мой собственный класс .myclass. Однако, как вы упомянули, в моем проекте много страниц, и невозможно удалить класс text-3xl из всех соответствующих элементов. Есть ли простой способ изменить размер шрифта всех классов в контейнере.
Конечно, если вы хотите изменить класс text-3xl, указывающий на 10 rem, для этого вам придется настроить или создать новую конфигурацию, например text-10xl. Вы используете простой HTML CSS и JS, поэтому первый ответ, приведенный ниже, не будет работать, вам нужно добавить свою пользовательскую конфигурацию в скрипт.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вариант 1: удалить класс .text-3xl. Размер текста будет полностью зависеть от класса .myclass.
Вариант 2. Вы можете изменить конфигурацию Tailwind, чтобы использовать 10rem для класса .text-3xl.
module.exports = {
theme: {
extend: {
fontSize: {
'3xl': '10rem',
},
},
},
variants: {},
plugins: [],
}
Я добавил в свой скрипт ниже cdn, но он тоже не работает!
Добавьте этот скрипт в тег Head или Body
<script>
tailwind.config = {
theme: {
extend: {
fontSize: {
'3xl': '10rem',
}
}
}
}
</script>
если вы видите в devtools класс tailwind, применяется text-3xl, и он не дает вам размер 10 rem. text-3xl дает вам размер около 1,875 бэр, а не 10 бэр