html blocks from gutenberg are not styled

[zerdotre]

A tailwind component/element that I paste in an html-block doesnt get the tailwind styling. If I paste the same in the theme directly it does get styled. How can I get gutenberg blocks styled?

[sidonaldson]

This is an issue with Tailwind as it uses "JUST IN TIME" method to collect all the classes used and then create the styles for them, if you use the HTML block from Gutenberg that's effectively data not code, tailwind has no idea what classes are there.

You can manually add the component as a template-part which tailwind will find or add the classes in the CSS file using @apply

[zerdotre]

Is there a way to scan the content for classes onSave,
Or maybe onDeploy scan the db (all pages) for classes and extract the classes,
and put the classes in the safelist.txt file?

[zerdotre]

Or is just developing all and everything in themefiles encouraged? instead of the above stated.

[zerdotre]

Here is code for updating safelist.txt. It adds the classes used in the wp editor. It goes into the functions.php file.

`

/**

• Scan post content for Tailwind classes on save and update safelist
  */
  function scan_content_for_tailwind_classes($post_id) {
  // Don't run on autosaves
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;

// Only run on posts and pages
if (!in_array(get_post_type($post_id), ['post', 'page'])) return;

// Get the post content
$content = get_post_field('post_content', $post_id);

// Simple regex to extract class names
preg_match_all('/class="([^"]+)"/', $content, $matches);

$classes = [];
if (!empty($matches[1])) {
foreach ($matches[1] as $class_string) {
// Split multiple classes in the same attribute
$extracted_classes = explode(' ', $class_string);
$classes = array_merge($classes, $extracted_classes);
}
}

// Remove duplicates and empty classes
$classes = array_filter(array_unique($classes));

// Get existing safelist
$safelist_path = get_template_directory() . '/safelist.txt';
$existing_classes = [];

if (file_exists($safelist_path)) {
$existing_content = file_get_contents($safelist_path);
$existing_classes = array_filter(explode("\n", $existing_content));
}

// Merge existing with new classes
$all_classes = array_unique(array_merge($existing_classes, $classes));

// Save the updated safelist
file_put_contents($safelist_path, implode("\n", $all_classes));

// Optional: Trigger Tailwind rebuild if needed
// This depends on your development setup
}
add_action('save_post', 'scan_content_for_tailwind_classes');

`

Running npm run watch, it picks up the classes correctly. But how to do this on a production server, or even a server without node/npm installed?