One odd utility not generating, is 'heading' a reserved word in V4?

[rhysmatthew]

Tailwind version V4

Node: 22

I have my utilities from previous versions of Tailwind, and after upgrading I've noticed the word 'heading' doesn't generate or work properly.

I.e. I have several utils like so:

@utility subtitle {
	@apply font-secondary text-3xl md:text-4xl font-var-bold;
}

@utility heading {
	@apply font-secondary text-2xl md:text-3xl font-var-bold;
}

@utility subheading {
	@apply font-secondary text-xl md:text-2xl font-var-bold;
}

However when using in my templates heading does not generate correctly i.e. <p class="heading"> doesn't get any styles applied. Another oddity is that if I introduce a breakpoint it does generate i.e. <p class="md:heading">. Whereas subtitle and subheading work fine, along with the others I have set up.

Any help on what could be happening would be much appreciated. I don't want to simply rename as this was working fine before and would require a pattern change throughout dev and design.

[philipp-spiess]

Hey! Seems to be working fine in the playground: https://play.tailwindcss.com/qDmtZehA0q?file=css mind adding a repro that we can run locally?

[philipp-spiess]

@rhysmatthew

By repro shall I just send the config setup? I can attach items below but let me know if you need anything else.

Ideally you can reproduce your exact setup in a smaller github repository that we can run locally that only contains the code absolutely necessary to reproduce the issue, so we can look into it without having to acquire knowledge about your app.

<p class="display mb-16">Display</p>

<p class="title mb-16">Title</p>

<p class="subtitle mb-16">Subtitle</p>

<p class="heading mb-16">Heading</p>

<p class="subheading mb-16">Subheading</p>

<p class="tagline mb-16">Tagline</p>

Is there anything else in this TWIG file?

[rhysmatthew]

@philipp-spiess I see, I probably won't have the time at this current moment to do so. Instead I'll just keep an eye on this one and if it happens again I'll be sure to provide more detail.

I feel like I've had weird anomalies like this before, where there's no (obvious) reason why a class shouldn't generate. Even a restart of vite dev doesn't kick it into gear. Then miraculously (whether it's a system restart or docker restart) it generates and works fine and I move on without thinking much of it.. Sorry I can't be more detailed here but I will let you know if I spot it again and add a repro.

Here's my TWIG file if it helps, that matches the screenshot above.

{% extends "_layouts/default.twig" %}

{% do seomatic.meta.robots('noindex') %}

{% block bodyTag %}
  {{ parent()|attr({
    class: 'bg-white pt-44'
  }) }}
{% endblock %}

{% block content %}

	{# Custom JS/CSS for styleguide #}
	<link href="/dist/styleguide/prism.css" rel="stylesheet" />
	<script src="/dist/styleguide/prism.js"></script>
	<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
	<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
	<script>window.tippy = tippy</script>
	{{ craft.vite.script("src/js/styleguide.js") }}
	<style>p code,pre{background-color:#272822;color:#fff;font-family:monospace;}pre{display:block;border-radius:10px;overflow:auto;width:100%;font-family:monospace;white-space:pre;margin:1em 0}p code{border-radius:.3em;padding:2px 4px}</style>

	<div class="container mb-14">
		<h2 class="text-lg font-var-bold font-secondary">Logo</h2>
		<hr class="border-[#272822]">
	</div>

	<section class="py-10 mb-14">
		<div class="container">
			<div class="grid grid-cols-2 gap-8 lg:gap-12">
				<div class="bg-black p-10 text-center">
					{{ svg('@webroot/dist/images/logo--glevent.svg') | attr({ class: 'max-w-[112px] inline-block' }) }}
				</div>

				<div class="bg-black p-10 text-center">
					{{ svg('@webroot/dist/images/logo--glevent-white.svg') | attr({ class: 'max-w-[112px] inline-block' }) }}
				</div>
			</div>
		</div>
	</section>

	<div class="container mb-14">
		<h2 class="text-lg font-var-bold font-secondary">Colours</h2>
		<hr class="border-[#272822]">
	</div>

	<section class="py-10 mb-14">
		<div class="container">
			<div class="grid grid-cols-6 gap-8 lg:gap-12" id="styleguide-colours">

			</div>
		</div>
	</section>

	<div class="container mb-14">
		<h2 class="text-lg font-var-medium font-secondary">Typography</h2>
		<hr class="border-[#272822]">
	</div>

	<section class="py-10 mb-14 overflow-hidden">
		<div class="container">
			{# 0:Title, 1:Font size class, 2:Font family class, 3: HTML tag #}
			{% set twPrimaryFonts = [
				['text-xs', '', 'p'],
				['text-sm', '', 'p'],
				['text-base', '', 'p'],
				['text-lg', '', 'p'],
				['text-xl', '', 'p'],
				['text-2xl', '', 'p'],
				['text-3xl', '', 'p'],
				['text-4xl', '', 'p'],
				['text-5xl', '', 'p'],
				['text-6xl', '', 'p'],
				['text-7xl', '', 'p'],
				['text-8xl', '', 'p'],
				['text-9xl', '', 'p']
			] | reverse %}

			{% set twPrimaryWeights = [
				{
					title : 'Thin',
					class : 'font-var-light',
				},
				{
					title : 'Normal',
					class : 'font-var-normal',
				},
				{
					title : 'Thick',
					class : 'font-var-semibold',
				},
				{
					title : 'Thicker',
					class : 'font-var-bold',
				}
			]%}

			{# Base font #}
			<div class="xxl:-mx-20 xxxl:-mx-24">
				<p class="font-var-semibold mb-4">Base</p>
			</div>

			{% for fontVariation in twPrimaryFonts %}
				<div class="grid grid-cols-12 gap-8 lg:gap-14 mb-20 xxl:-mx-20 xxxl:-mx-24">
					{% for fontWeight in twPrimaryWeights %}

						<div class="col-span-full md:col-span-3">
						<{{ fontVariation[2] }} class="{{ fontVariation[0] }} {{ fontVariation[1] }} {{ fontWeight.class }}">{{fontVariation[0]}}<br>{{ fontWeight.title }}</{{ fontVariation[2] }}>
						</div>

					{% endfor %}
				</div>
			{% endfor %}

			{# 0:Title, 1:Font size class, 2:Font family class, 3: HTML tag #}
			{% set twSecondaryFonts = [
				['text-xs', '', 'p'],
				['text-sm', '', 'p'],
				['text-base', '', 'p'],
				['text-lg', '', 'p'],
				['text-xl', '', 'p'],
				['text-2xl', '', 'p'],
				['text-3xl', '', 'p'],
				['text-4xl', '', 'p'],
				['text-5xl', '', 'p'],
				['text-6xl', '', 'p'],
				['text-7xl', '', 'p'],
				['text-8xl', '', 'p'],
				['text-9xl', '', 'p']
			] | reverse %}

			{% set twSecondaryWeights = [
				{
					title : 'Thin',
					class : 'font-var-light',
				},
				{
					title : 'Normal',
					class : 'font-var-normal',
				},
				{
					title : 'Thick',
					class : 'font-var-semibold',
				},
				{
					title : 'Thicker',
					class : 'font-var-bold',
				}
			]%}

			{# Secondary/heading font #}
			<div class="xxl:-mx-20 xxxl:-mx-24">
				<p class="font-var-semibold mb-4">Secondary/heading</p>
			</div>

			{% for fontVariation in twSecondaryFonts %}
				<div class="grid grid-cols-12 gap-8 lg:gap-14 mb-20 xxl:-mx-20 xxxl:-mx-24">
					{% for fontWeight in twSecondaryWeights %}

						<div class="col-span-full md:col-span-3">
						<{{ fontVariation[2] }} class="{{ fontVariation[0] }} {{ fontVariation[1] }} {{ fontWeight.class }} font-secondary">{{fontVariation[0]}}<br>{{ fontWeight.title }}</{{ fontVariation[2] }}>
						</div>

					{% endfor %}
				</div>
			{% endfor %}

			{# Base font #}
			<p class="font-var-bold mb-16 mt-32">Predefined</p>

			<p class="display mb-16">Display</p>

			<p class="title mb-16">Title</p>

			<p class="subtitle mb-16">Subtitle</p>

			<p class="heading mb-16">Heading</p>

			<p class="subheading mb-16">Subheading</p>

			<p class="tagline mb-16">Tagline</p>

			<p class="blockquote mb-6">“Blockquote”</p>
			<p class="blockquote mb-16 text-neutral-900/50">“Lorem ipsum dolor sit amet consectetur. Bibendum massa duis aenean nec morbi tincidunt et.”</p>

			<p class="body-intro mb-6">Body Intro</p>
			<p class="body-intro mb-16 text-neutral-900/50">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>

			<p class="mb-6">Body</p>
			<p class="mb-16 text-neutral-900/50">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>

			<p class="body-small mb-6">Body Small</p>
			<p class="body-small mb-16 text-neutral-900/50">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
		</div>
	</section>

	<div class="container mb-14">
		<h2 class="text-lg font-var-bold font-secondary">Icons</h2>
		<hr class="border-[#272822]">
	</div>

	<section class="pb-10 mb-14">
		<div class="container">
			{# {% include '_devNotes/styleguide/icons' %} #}

			<div class="flex flex-wrap gap-4 mt-12" id="styleguide-icons">

			</div>
		</div>
	</section>

	<div class="container mb-14">
		<h2 class="text-lg font-var-bold font-secondary">Buttons</h2>
		<hr class="border-[#272822]">
	</div>

	<section class="py-10 mb-14">
		<div class="container">
			<div class="grid grid-cols-3 gap-8 lg:gap-12">
				<div class="">
					<p class="font-var-bold mb-4">Default button</p>

					{% set btn %}
						<a href="#" class="btn">Button</a>
					{% endset %}

					{{ btn }}

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									{{ btn }}
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Small button</p>

					{% set smallBtn %}
						<a href="#" class="btn btn--small">Button</a>
					{% endset %}

					{{ smallBtn }}

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									{{ smallBtn }}
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Button w/ icon</p>

					<a href="#" class="btn btn--icon">
						Button

						{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}
					</a>

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									<a href="#" class="btn btn--icon">
										Button

										{{ "{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}" }}
									</a>
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Button outline w/ icon</p>

					<a href="#" class="btn btn--outline btn--icon">
						Button

						{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6' }) }}
					</a>

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									<a href="#" class="btn btn--outline btn--icon">
										Button

										{{ "{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}" }}
									</a>
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="col-span-full">
					<p class="font-var-bold text-lg mb-8">Additional colours</p>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Dark Button w/ icon</p>

					<a href="#" class="btn btn--dark btn--icon">
						Button

						{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}
					</a>

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									<a href="#" class="btn btn--dark btn--icon">
										Button

										{{ "{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}" }}
									</a>
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Dark Button Outline w/ icon</p>

					<a href="#" class="btn btn--outline-dark btn--icon">
						Button

						{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}
					</a>

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									<a href="#" class="btn btn--outline-dark btn--icon">
										Button

										{{ "{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}" }}
									</a>
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Primary Button w/ icon</p>

					<a href="#" class="btn btn--primary btn--icon">
						Button

						{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}
					</a>

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									<a href="#" class="btn btn--primary btn--icon">
										Button

										{{ "{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6 h-auto' }) }}" }}
									</a>
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Primary button outline w/ icon</p>

					<div class="bg-[#3660EB] p-4">
						<a href="#" class="btn btn--outline-primary btn--icon">
							Button

							{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6' }) }}
						</a>
					</div>

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									<a href="#" class="btn btn--outline-primary btn--icon">
										Button

										{{ "{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6' }) }}" }}
									</a>
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>

				<div class="">
					<p class="font-var-bold mb-4">Secondary button outline w/ icon</p>

					<a href="#" class="btn btn--outline-secondary btn--icon">
						Button

						{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6' }) }}
					</a>

					<div class="mt-4">
						<pre>
							<code class="language-twig">
								{% apply escape %}
									<a href="#" class="btn btn--outline-secondary btn--icon">
										Button

										{{ "{{ svg('@icons/icon--arrow-r.svg') | attr({ class: 'w-6' }) }}" }}
									</a>
								{% endapply %}
							</code>
						</pre>
					</div>
				</div>
			</div>
		</div>
	</section>

	<div class="container mb-14">
		<h2 class="text-lg font-var-bold font-secondary">Forms</h2>
		<hr class="border-[#272822]">
	</div>

	<section class="py-10 mb-14">
		<div class="container">
			<div class="">
				<p class="font-var-bold mb-12">Default Form</p>

				{# {{ craft.formie.renderForm('demoFormWithAllFieldTypes') }} #}

				<div class="mt-12">
					<pre>
						<code class="language-twig">
							{% apply escape %}
								{{ "{{ craft.formie.renderForm('demoFormWithAllFieldTypes') }}" }}
							{% endapply %}
						</code>
					</pre>
				</div>
			</div>

			<div class="mt-20">
				<p class="font-var-bold mb-6">Dark Form</p>
				<p class="mb-12">Simply pass <code>.form--light</code> into the formie theme config.</p>

				<div class="bg-blue p-4">
					{% set renderOptions = {
						themeConfig: {
							form: {
								attributes: {
									class: 'form--light'
								},
							}
						},
					} %}

					{# {{ craft.formie.renderForm('demoFormWithAllFieldTypes', renderOptions) }} #}
				</div>

				<div class="mt-12">
					<pre>
						<code class="language-twig">
							{% apply escape %}
								<div class="bg-blue p-4 mt-20">
									{{ "{% set renderOptions = {
										themeConfig: {
											form: {
												attributes: {
													class: 'form--light'
												},
											}
										},
									} %}" }}

									{{ "{{ craft.formie.renderForm('demoFormWithAllFieldTypes') }}" }}
								</div>
							{% endapply %}
						</code>
					</pre>
				</div>
			</div>
		</div>
	</section>

	<div class="container mb-14">
		<h2 class="text-lg font-var-bold font-secondary">News Cards</h2>
		<hr class="border-[#272822]">
	</div>

	<section class="py-10 mb-14">
		<div class="container">
			{% set newsEntries = craft.entries.section('newsArticles').limit(3).all() %}

			<div class="grid grid-cols-12 gap-x-6 lg:gap-x-8 gap-y-8 theme--light">
				{% for entry in newsEntries %}
					<div class="col-span-full md:col-span-4">
						{% include "_components/cardNews" %}
					</div>
				{% endfor %}
			</div>
		</div>
	</section>

{% endblock %}

[rhysmatthew]

@philipp-spiess found the issue. Basically inside of my nav.css, I have a block that uses the utility in an @apply (something I try not to do often but was working fine in v3).

@media (width >= theme(--breakpoint-lg)) {
      .header__nav__item {
        @apply flex gap-x-4 py-4 heading text-white pl-0;
      }
}

When it's used in this way, it essentially breaks the whole utility (except when using md: / lg: etc). As mentioned, this pattern was working fine before the upgrade and I'm not too fussed as I can easily inline. But just in case this is related to anything else, I thought I'd mention for your oversight.

Thanks

[philipp-spiess]

@rhysmatthew Awesome find! I tried to get the repro for this working but it seems that a bit more is necessary: https://play.tailwindcss.com/k5t1KfegOR?file=css

Do you have any idea what else it could be in your setup that makes it not work? Is the @apply usage in the same .css file? Otherwise it might be good to understand the import-chain

[rhysmatthew]

@philipp-spiess Yeah that seems a bit odd then, definitely something else causing it.

css-folder.zip

Does it help if I share my entire CSS folder? My main app.css file is imported into my JS and then processed through ViteJS. P.s. I'm aware using excessive amounts of @apply isn't ideal, but I still prefer to work this way with TW. I mostly use inline TW though.

Potentially it's PostCSS related? I've tried disabling postcss-pxtorem and autoprefixer and cancelled those out.

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
		'postcss-pxtorem': {
			rootValue: 16,
			unitPrecision: 5,
			propWhiteList: [
				'*',
				'!border',
				'!border-width',
				'!border-top-width',
				'!border-right-width',
				'!border-bottom-width',
				'!border-left-width',
			],
		},
    'autoprefixer': {}
  },
};