h1, h2, ... broken by font-weight: inherit

[mark-hahn]

My tailwind.css file includes the following ...

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

This obviously breaks h1 etc. What if the proper way for me to fix this? Also, why aren't other people complaining about this? I'm a newbie so maybe I'm missing something obvious.

[danielkoek]

the idea that everything is 'reset' to default, when setting up your tailwind you probably want to set your a, p, html, and all your h's to what you would like, for example my html is sans, text-base, and my p's have a pt-4, all the h are diffrent h1-3 have serif with a size that i think is fit for that h size and 4+ is all sans again with diffrent grades of boldness.

you get the idea, the easiest way is by changing your tailwind.css and adding apply's to them

[adamwathan]

Hey! This is intentional and discussed in the docs here:

https://tailwindcss.com/docs/preflight/#headings-are-unstyled

If you want to add default styles for elements like that you can do so by adding custom base styles:

@tailwind base;

h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
  @apply text-blue-600 underline;
}

@tailwind components;

@tailwind utilities;

[mark-hahn]

I deleted posts that bitched about this (I apologize). Then I RTFM and found out about disabling preflight which is what I guess I want. It is a shame I'll lose some stuff like box-sizing but I have that added anyway.

But I can't seem to be able to disable preflight so I need some help. This code doesn't seem to do anything ...

module.exports = {
  corePlugins: {
    preflight: false,
  },
  plugins: [
    tailwindcss,
    autoprefixer,
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : [],
  ],
};

[adamwathan]

I don't think you want to disable preflight, you probably just want to create some basic typography styles that you can apply to blocks of "document" or "article" style markup.

We're working on an official plugin that provides sensible defaults for these situations but it's not quite ready yet:

https://github.com/tailwindcss/typography

This discussion is probably useful to you though:

tailwindlabs/discuss#243

Generally the reason we reset that stuff is that for UI development, defaults don't make any sense. Here on this GitHub page for example this is an h1:

Here's an h2 (it's invisible and for document structure only):

Here's an h3:

Here's an h4 (it's bigger than the h3):

None of these styles are your typical heading hierarchy typography styles, because they are just using elements semantically based on document structure and then styling them however makes sense for the interface.

Anyways hope that helps.

[mark-hahn]

From the typography repo: "add sensible typographic defaults to any vanilla HTML you don't control (like HTML rendered from Markdown)". This is exactly what I've run up against with markdown converter output. I requested this exact thing in one of my deleted posts.

The second link in your post is also very useful. There is sample css in that post to fix my specific problem. That is also something I suggested in a deleted post.

In my original post I said " why aren't other people complaining about this? ". They are and I'm embarrased about the quality of my google-fu.

Thanks for the great reply.

BTW, I agree that default styling of H1, H2, etc., suck. I've always thought they were useless.

[kendimoraski]

Hey! This is intentional and discussed in the docs here:

https://tailwindcss.com/docs/preflight/#headings-are-unstyled

If you want to add default styles for elements like that you can do so by adding custom base styles:

@tailwind base;

h1 {
  @apply text-2xl;
}
h2 {
  @apply text-xl;
}
h3 {
  @apply text-lg;
}
a {
  @apply text-blue-600 underline;
}

@tailwind components;

@tailwind utilities;

So I tried this in my index.css (I'm using DaisyUI based off of Tailwind CSS), and I'm getting an Syntax Error:

"The text-2xl class does not exist, but text-2xs does. If you're sure that text-2xl exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree"

Did the Tailwind names for font sizes change? The ones I have in my code still match the ones on the current docs. I could be wrong but I don't think DaisyUI messes with this. Perhaps that syntax you posted needs to be in a different (deeply buried?) index.css to overwrite the inherit issue?

[MeikyuuTrader]

Important to do this if you're using a Statamic Bard element and rendering in Blade via {!! $content !!}, otherwise when rendering the content, the h2/h3 doesn't reflect proper font sizes.

[Karthi981]

https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes Here you go just apply those h1,h2 styles for particular components.

@layer components {
  .editorJs h1 {
    @apply text-4xl;
    @apply font-bold;
  }
  .editorJs h2 {
    @apply text-3xl;
    @apply font-bold;
  }
  .editorJs h3 {
    @apply text-2xl;
    @apply font-bold;
  }
  .editorJs h4 {
    @apply text-xl;
    @apply font-semibold;
  }
  .editorJs h5 {
    @apply text-lg;
    @apply font-semibold;
  }
  .editorJs h6 {
    @apply text-sm;
    @apply font-semibold;
  }
  .editorJs a {
    @apply text-blue-600 underline;
  }
}```

[Srinivasan-Akash]

Hello is there any way i can stop the font-size inherit & font-weight inherit from just one file which is navbar.tsx (using next.js)