font-weight: inherit not possible?

[jenstornell]

I have a textarea and sometimes I need it to get the style from its parent. Textareas have their own style by default which means I need to override it to get the parent value.

In CSS I can do it like below:

textarea {
  font-weight: inherit;
}

How can I do the same thing in Tailwind?

Class does not work

<textarea class="font-inherit">Text</textarea>

Arbitrary value does not work

<textarea class="font-[inherit]">Text</textarea>

@apply does not work

Because I need a Tailwind class, apply does not work.

Custom CSS works

Yes, custom CSS works, but it's a bit ugly when everything else is Tailwind.

Any ideas? Maybe this would be a good feature request?

[adamwathan]

You can add “inherit” to your font weight scale in your config file, then “font-inherit” will work 👍🏻

[ghost]

no better solution as of 2023?

[mrienstra]

I think this would be a nice addition (feature), along with inherit-italic or italic-inherit for font-style: inherit;

One use case: using <strong/> or <em/> for semantic purposes, but you want <strong/> to inherit font-weight, and <em/> to inherit font-style.

font-style doesn't use createUtilityPlugin (see corePlugins.js#L2083-L2088) so you can't work around it as easily as font-weight:

import { type Config } from "tailwindcss";
import plugin from "tailwindcss/plugin";

export default {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".italic-inherit": { "font-style": "inherit" },
      });
    }),
  ],
  theme: {
    extend: {
      fontWeight: {
        inherit: "inherit",
      },
    },
  },
} satisfies Config;

Docs:

• https://tailwindcss.com/docs/font-weight
• https://tailwindcss.com/docs/font-style

[romanticsoul]

+1

[mybearworld]

font-[weight:inherit] (play)