Alpine.Js - Inner HTML - Tailwind CSS Class

This works without tailwind css

<div x-data="{ title: '<h1>Start Here</h1>' }">
    <div x-html="title"></div>
</div>

Is it possible to do something like this with tailwind css

<div x-data="{ title: '<h1 class="font-bold">Start Here</h1>' }">
    <div x-html="title"></div>
</div>

Declan

5 years ago

Level 1

Utility classes help you work within the constraints of a system instead of littering your stylesheets with arbitrary values. They make it easy to be consistent with color choices, spacing, typography, shadows, and everything else that makes up a well-engineered design system.

https://www.firstcallonline.us/

tykus

5 years ago

Best Answer

Level 104

Use template string:

<div x-data="{ title: `<h1 class='font-bold'>Start Here</h1>` }">
    <div x-html="title"></div>
</div>

Although, I would question why it was necessary to have a h1 tag in the data at all?

zaster

5 years ago

Level 9

@tykus Yes. H1 Tag is not required. I was just going through the documentation

Thank you very much for your answer @tykus

Please or to participate in this conversation.