Where are my TailwindCSS classes?

Usually, TailwindCSS classes are added to the right HTML element via PHTML templates. However, our aim is that this is always done with the $css() utility as well.

Bad example:

<div class="grid grid-cols-2"></div>

Good example:

<div class="<?= $css('grid grid-cols-2') ?>"></div>

While this adds a lot of flexibility, it also makes analysing the source of TailwindCSS classes a bit harder. To analyse where TailwindCSS classes originate from when they are added to a specific block output, take the following steps:

• Scan the PHTML template. This is what you probably already have done, but it is simple step 1.

• Scan the XML layout for your specific block name with the argument css_class array set.

• Scan the XML layout for blocks that allow to define defaults for other blocks. For instance, the loki-components.css_classes block can be used to redefine CSS classes of any block. And the same applies to loki-components.defaults.form.field when it comes to field.phtml templates.

• Finally, even though it is a bit hard-code, use Xdebug (or some other means of debugging) on the getCssClasses() of the components ViewModel class.