why do my tailwind css classes set in a ckeditor field not get applied

[froot]

I did something like this:

<div class="grid grid-cols-4 gap-4 border border-green-500">
<div class="col-span-3">
<img src="path/to/image.jpg"/>
</div>
<div class="col-span-1">
<p>Yada yada yada.</p>
</div>
</div>

But the classes don't get applied. Might that have to do with where in which directories  tailwind looks for tw classes? Here's my setup:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "../*.{html,php,js}",
    "../../classes/*.{html,php,js}",
    "./node_modules/tw-elements/dist/js/**/*.js",
    "../../assets/cache/HannaCode/*.{html,php,js}",
    "../../assets/*.{html,php,js}",
    "../../../*.{html,php,js}",
    "./node_modules/flowbite/**/*.js"
  ],

That said, it does work for the hard-coded tw classes anyway, that's why I thought that might be the issue.

 

 

 

 

[bernhard]

Tailwind only adds those classes to the final CSS that it finds in your content files. If you add classes in ckeditor tailwind doesn't know about them and likely will not add them to the final CSS. An easy fix is to add those classes somewhere in your markup (eg on a hidden div) so that tailwind adds it to the CSS and whenever an editor applies the class it will properly render

 

[wbmnfktr]

Another option: Safelisting Classes

[bernhard]

Yeah that might be more elegant in some situations. Actually you don't even need to put it in a hidden div, you can put it in your markup in a latte comment for example. So those classes will not end up being rendered in your sites markup, but still tailwind will catch them for the final css. I prefer to place markup related things in markup files (*.latte) as for example when working on a "text" block for RockPageBuilder then I want it to contain all necessary markup for that block.

So when moving that block into a new project it will still work and I will not have to mess with the tailwind config...

But workflows and preferences are different 🙂