Tailwind CSS?

[pablo8itall]

Just wondering how best to style using Tailwind CSS.

I have a flask app with htmx and tailwind and I'd love to port it to your framework.

[paveldedik]

Hi @pablo8itall

I don't really have that much experience with Tailwind CSS, so it would be really helpful if someone would share their experience using Ludic with Tailwind CSS.

Since Tailwind CSS uses it's own styles of course, I'm affraid the whole ludic.catalog might not play well together. So It means you probably want to basically create your own catalog of components. I would start with defining a page component, than you can write your own components, here is a minimal example (I didn't try to run it, it is just an example how I would be building it):

from typing import override

from ludic.attrs import NoAttrs
from ludic.components import Component
from ludic.html import div, html, head, body, nav, script, title
from ludic.types import AnyChildren, JavaScript
from ludic.web import LudicApp


app = LudicApp()


class Page(Component[AnyChildren, NoAttrs]):
    @override
    def render(self) -> html:
        return html(
            head(
                title("My Tailwind CSS App"),
                # CDN for development only, not the best choice for production
                script(src="https://cdn.tailwindcss.com"),
                script(
                    JavaScript(
                        """
                        tailwind.config = { ... }
                        """
                    )
                ),
            ),
            body(*self.children),
        )


class Navigation(Component[str, NoAttrs]):
    classes = ["flex", "items-center", "justify-between", "p-6", "lg:px-8"]

    @override
    def render(self) -> nav:
        return nav(
            *(div(name, classes=["text-sm", "font-semibold"]) for name in self.children)
        )
    

@app.get("/")
async def index() -> Page:
    return Page(
        Navigation("Product", "Pricing", "About"),
        ...
    )

Let me know if you have any further questions :)