Html Question posted in
Some basic documentation can be found here.

Html – 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?

<!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.

Tags:

2

Answers


  1. 0

    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: [],
}
    Login or Signup to reply.
  2. 0

    Add this script in Head or Body tag

    <script>
    tailwind.config = {
      theme: {
        extend: {
          fontSize: {
            '3xl': '10rem',
          }
        }
      }
    }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search