Cl-djula-tailwind Alternatives

cl-djula-tailwind reviews and mentions

• Using TailwindCSS in Common Lisp web apps without Node.js tooling
  4 projects | dev.to | 18 Aug 2022

  Let's see how this thing works. Whenever you request a page in your web application, Djula will try to read your route template and compile it and then send the HTML response to the browser. This is how normally things work in a Caveman application. On top of this what the cl-djula-tailwind package does is, it also parse the Tailwind class names used in your templates, layout templates and partials used in your markup and then construct a minified CSS class definitions list and put them in a placeholder in the default layout template through a tag so that it will be automatically picked up by the browser and your HTML content is properly formatted according to the CSS classes you have used.

  So whenever every route is rendered, you will get a generated custom CSS on the fly injected via internal stylesheets. The beauty of this approach is that you will only get the minimal and required CSS for a particular route instead of getting all the CSS at once for your whole application. From a performance standpoint this is a huge gain from the traditional approach of delivering all your CSS beforehand. Because the critical rendering path can be optimized to a large extent by delivering only the required CSS for a web page.

  Using the CSS Overview extension in Chrome browser, I have collected some stats of the unused CSS. Below is the data of the TailwindCSS website

  

  You can still see some unused CSS with the conventional approach. And using cl-djula-tailwind in our demo app, this is the result

  

  With our new approach of sending only the required CSS, there are no unused CSS at all.

  Source code

  The source code for the package cl-djula-tailwind is hosted in Github here.

  Demo

  There is also a demo app making use the cl-djula-tailwind package to test and improve the package. It is hosted in Github here

  What's next?

  The cl-djula-tailwind package is still in beta stage and not yet ready for production. But you can play around with it. Most of the util classes used in Tailwind are covered, but still there is some work needs to be done to get it production ready.

  Below are some of the things that need to be taken care of:

  • Provide a capability for Tailwind CSS like config
  • Cover all the utilities in Tailwind
  • Handle deeply nested partials in Djula templates (at present it can handle only top-level partials in your route templates)

  If you find anything that is missing from Tailwind, that can be made part of cl-djula-tailwind, please raise an issue at the repository.

  Hope you enjoyed this Common Lisp tooling and the ability to generate CSS util classes on the fly for your web pages. Please let me know for any queries or feedback in the comments section.