Font family with size attached?

[lukepighetti]

What's the appropriate way to define both a font family, weight, and size to a class such as font-heading?

[adamwathan]

I would think of that as a "component" class and construct it like this:

https://tailwindcss.com/docs/extracting-components#extracting-css-components-with-apply

[lukepighetti]

@adamwathan That makes sense, but we've been unable to @apply those component classes to other components. It seems like you cannot @apply a class that has @apply in it.

[hacknug]

You definitely should be able to do that. This is what I have on a project of mine where things are working:

/* main.pcss */
@import 'partials/tailwind.pcss';
@import 'partials/gutenberg.pcss';

/* tailwind.pcss */
.text-xl {
  @apply text-44 font-sans leading-105;
  @screen lg { @apply text-110; }
}

.text-lg-serif {
  @apply text-26 font-serif leading-105;
  @screen lg { @apply text-56; }
}

.text-lg-sans {
  @apply text-22 font-sans leading-105;
  @screen lg { @apply text-50; }
}

.text-lg {
  @nest .font-serif & { @apply .text-lg-serif; }
  @nest .font-sans & { @apply .text-lg-sans; }
}

.text-md-serif {
  @apply text-22 font-serif;
  @screen lg { @apply text-44; }
}

.text-md-sans {
  @apply text-18 font-sans;
  @screen lg { @apply text-36; }
}

.text-md {
  @nest .font-serif & { @apply .text-md-serif; }
  @nest .font-sans & { @apply .text-md-sans; }
}

.text-base {
  @apply text-22 font-serif;
  @screen lg { @apply text-18; }
}

.text-sm {
  @apply text-18;
}

.text-xs {
  @apply text-14;
}

/* gutenberg.pcss */
.has-xs-font-size { @apply text-xs; }
.has-sm-font-size { @apply text-sm; }
.has-md-font-size { @apply text-md; }
.has-lg-font-size { @apply text-lg; }
.has-xl-font-size { @apply text-xl; }

EDIT: I've omitted other parts to simplify the example. Just make sure you use the right postcss plugins if you want to have nesting and these kind of things 👍

[lukepighetti]

What are the right postcss plugins if we want to have nesting?

[adamwathan]

That makes sense, but we've been unable to @apply those component classes to other components

Yeah this is correct, @apply is handled in a single pass not recursively so it's not designed to work that way. Personally I think applying a component to another component is a bad idea and apply should be reserved for just utility classes, but it's hard to enforce that in code.

You might want to try postcss-mixins or postcss-extend-rule instead of using @apply if you have more complex needs.

[hacknug]

What are the right postcss plugins if we want to have nesting?

https://preset-env.cssdb.org/features#nesting-rules