Genie Discord forum

Author Avatargrendel
1/18/2024, 12:43:04 AM

I'd like that little bit of extra control over the look and feel of my UI, but you can safely put this in the low priority category. Bootstrap and Quasar will suffice for now.

Author AvatarPere
1/18/2024, 11:38:36 AM

You can add tailwind support by linking to its css in the head. Here's an example:

using GenieFramework

# we define the a toggle function with @methods so that it can be accessed by the Quasar components in the UI
@methods """
    toggletailwind: function() {
    const tailwindStylesheet = document.getElementById('tailwind');
    if (tailwindStylesheet.disabled) {
        tailwindStylesheet.disabled = false;
    } else {
        tailwindStylesheet.disabled = true;

tailwind_head = [
  link(href = "", rel = "stylesheet", id="tailwind" )

ui() = [
        htmldiv(class="bg-blue-500 text-white p-6 rounded-lg", [
            h1(class="text-2xl mb-4", "Hello, TailwindCSS!"),
            p(class="text-lg", "This is a simple box styled with TailwindCSS.")
        btn("Toggle tailwind", @click("toggletailwind"))

# at the moment, the @page macro does not support the head_content argument so we have to use route instead
# @init initializes and returns the reactive model of the app
route("/") do
  page(@init, ui, head_content = join(tailwind_head))

Author Avatargrendel
1/18/2024, 9:16:01 PM

Changed the channel name: SOLVED Feature Request: Tailwind CSS Support