Container queries in CSS?

[vaughn-taylor]

Perhaps this is already possible, but I'd like to be able to use a container query within CSS. For example, when an H2 element originates in a Redactor field from the CMS, I need to style that element.

Of course, I can add a class to the parent container, and key off of that: .cms-container h2 { @apply text-2xl lg:text-4xl }

But, is there a way to do this:

@container/cms h2 {
    @lg:text-4xl;
}

Or am I just making things more complicated?

[wongjn]

Could you elaborate more on what you mean please? The sample code you provided is invalid CSS. For container queries in CSS, consider reading the documentation on MDN. For container queries in Tailwind, you can use the @tailwindcss/container-queries plugin.

[vaughn-taylor]

I'm speaking specifically about TailwindCSS and their implementation. For example:

<div class="@container">
    <div class="@lg:underline">
    <!-- This text will be underlined when the container is larger than `32rem` -->
    </div>
</div>

Now, let's assume that I have something that looks like this:

<div class="@container/cms">
    <!-- ALL CONTENT HERE IS FROM A WYSIWYG FIELD IN THE CMS -->
    <h2>My Big title</h2>
    <p>Blah, blah, blah</p>
</div>

I cannot add a class: @lg/cms:text-4xl to the h2 element above because it's created in the CMS. So, I must add it through my CSS which I could do like this:

h2 { @apply lg:text-4xl; }

But this would apply to every h2 element on the page, not just those in the div which contains CMS content. Currently, I manage these by adding a class to my parent container (eg. 'cms-container') and this is my CSS:

.cms-container h2 { @apply lg:text-4xl; }

I'm asking if there is a way to write my CSS referencing the @container/cms class added to the parent? I know this is not valid, as you pointed out, but I don't know how to write it properly in CSS, or if it's even possible?

@container/cms h2 { @apply text-4xl }

[wongjn]

You can include the @container/cms class in any CSS selector by using a backslash (\) to escape any special characters, like what Tailwind does:

.\@container\/cms h2 {
  …
}

You could also consider the @tailwindcss/typography too, which describes itself as:

The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.

[vaughn-taylor]

Thanks, I'll try that. I'm aware of the typography plugin which is great but it's overkill for my needs.