# TailwindCSS for Prolog - Replies

**URL:** <https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265>\
**Category:** General\
**Created:** [July 9, 2021, 4:00am UTC](https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265 "2021-07-09T04:00:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![swi](https://avatars.discourse-cdn.com/v4/letter/s/51bf81/32.png) [@swi](https://swi-prolog.discourse.group/u/swi)\
**Post date:** [July 9, 2021, 4:00am UTC](https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265/1 "2021-07-09T04:00:00Z")

</div>

Thanks for sharing! Does tailwind need javascript on the frontend or can it be turned into plain CSS?

---

<div class="post-metadata">

**Author:** ![jamesnvc](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jamesnvc/32/14_2.png) [@jamesnvc](https://swi-prolog.discourse.group/u/jamesnvc)\
**Post date:** [July 9, 2021, 4:17am UTC](https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265/2 "2021-07-09T04:17:59Z")

</div>

Nope, no Javascript – just a bunch of particularly-formatted CSS classes, for which the corresponding styles are generated.

---

<div class="post-metadata">

**Author:** ![anniepoo](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/anniepoo/32/12_2.png) [@anniepoo](https://swi-prolog.discourse.group/u/anniepoo)\
**Post date:** [July 9, 2021, 6:24am UTC](https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265/3 "2021-07-09T06:24:41Z")

</div>

Oh neat! I’m likely to have a few cycles soon, ping me if you want help.

---

<div class="post-metadata">

**Author:** ![jamesnvc](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jamesnvc/32/14_2.png) [@jamesnvc](https://swi-prolog.discourse.group/u/jamesnvc)\
**Post date:** [July 9, 2021, 6:46am UTC](https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265/4 "2021-07-09T06:46:42Z")

</div>

I certainly shall! As a bit of a spoiler, my new approach is based on something like Rails’ “Hotwire” or Phoenix’s “LiveView”, where all the HTML stuff is just normal Prolog & there’s a thin bit of client-side JS that replaces content asynchronously. Unlike the “Vuelog” approach, this lets you write all the server-side stuff using just normal Prolog HTML generating predicates, only adding a few extra attributes to indicate what gets replaced with what.

Still some ways to go before it’s generally useful, I think, but I’m hoping to get a little demo app together in the next week or so, at which point I’ll make it public & see what you and other folks make of it 🙂

---

<div class="post-metadata">

**Author:** ![anniepoo](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/anniepoo/32/12_2.png) [@anniepoo](https://swi-prolog.discourse.group/u/anniepoo)\
**Post date:** [July 9, 2021, 7:18am UTC](https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265/5 "2021-07-09T07:18:47Z")

</div>

I got a little demo together at one point of generating HTMX handlers completely automatically.  
You just added the htmx to the termerized html and used htmx//1 il instead of html//1.  
It generated all of the AJAX(H) handlers to send the fragments automatically.

I sort of decided it wasn’t that great an idea - you often need very different pre-html-generation code in the two cases,

---

<div class="post-metadata">

**Author:** ![jamesnvc](https://yyz2.discourse-cdn.com/free1/user_avatar/swi-prolog.discourse.group/jamesnvc/32/14_2.png) [@jamesnvc](https://swi-prolog.discourse.group/u/jamesnvc)\
**Post date:** [July 9, 2021, 8:50am UTC](https://swi-prolog.discourse.group/t/tailwindcss-for-prolog-replies/4265/6 "2021-07-09T08:50:35Z")

</div>

(if you want to have a look, I just made the repo public here: [James Cash / prolog\_web\_experiments · GitLab](https://gitlab.com/jamesnvc/prolog_web_experiments) Still a lot to nail down before I’m ready to really “release” anything yet, but you can kind of see the idea)
