Tailwind CSS

I just wanted to showcase how customizable Panel is. You can in fact build custom components including widgets and templates quite simple.

The below example shows how to create a custom Button using Tailwind CSS.

import panel as pn
import param

pn.extension(sizing_mode="stretch_width")

info = pn.pane.HTML("""
<div class="bg-indigo-900 text-center py-4 lg:px-4">
  <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
    <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xl font-bold mr-3">WOW</span>
    <span class="font-semibold mr-2 text-left flex-auto">Panel supports custom HTML components using Tailwind</span>
  </div>
</div>
""", height=100)
class CustomButton(pn.reactive.ReactiveHTML):
    clicks = param.Integer()
        
    _template = """\
<div id="pn-container" style="height:100%;width:100%">
<button id="button" class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded"
onclick="${_button_click}"
>{{ name }}</button></div>
"""
    
    __javascript__ = ["https://cdn.tailwindcss.com"]

    def _button_click(self, event):
        self.clicks += 1

button1 = CustomButton(name="Click Me", height=38)

@pn.depends(clicks=button1.param.clicks)
def text(clicks=1):
    return f"I've been clicked {clicks} number of times"

pn.Column(
    info, button1, text
).servable()

Resources

6 Likes

Thanks @Marc for the showcase. I have been using TailwindCSS together with ReactiveHTML to build a web app at work for geoscience data analysis and it works great.

Using a local tailwind config file and the JIT mode from tailwind can also output a very lightweight CSS file by automatically only include the css classes actually used in your Panel app.

3 Likes

Hi @Julien

Thanks for sharing. Would it be possible to share a screenshot? And describe in more detail how to output a very lightweight css file? And maybe even the source code?

I’m very curious to understand more.

Hi @Marc,

I cannot share the code unfortunately but I will use your example and setup tailwind as I did in my project. As I have some deadlines to meet for the next two days, I will try to properly answer you by the end of this week.

3 Likes

Hi @Marc

Please find below a repo with a similar tailwind setup as I am using for my project:

Right now there is an outage on PyPi and I could not install the python requirement using poetry. However the code should work once installed.

You can have a look at the src/dist.css file to see that only the soft reset (or preflight in tailwindcss wording) and the classes used in the app are being outputted. This is faster than using the tailwind cdn which uses the same approach and the JIT mode that only includes the class you use.

I hope it helps. Let me know if you need more info.

3 Likes