New Component: streamlit-tailwind, simplify the process of creating user interfaces

Custom Components
1

Streamlit Tailwind

PYPI
GitHub

If you find this project useful, please consider leaving a star <3

This project, Streamlit Tailwind, is designed to simplify the process of creating user interfaces. It provides a straightforward way to incorporate Tailwind CSS into your Streamlit
applications. So, without further ado:

Install

Same as always, good ol’ pip (or equivalents)

pip install st_tailwind

Usage

First way:

Use the tailwind wrapper components.

import st_tailwind as tw

tw.selectbox("test", [], classes="w-fit")

Second way:

Wrap the component yourself. You can add the classes keyword argument either in the wrapper method or on the wrapped method.

import streamlit as st

from st_tailwind import tw_wrap

tw_wrap(st.selectbox, classes="w-fit")("test", [])
tw_wrap(st.selectbox)("test", [], classes="w-fit")

If there are any issues, feel free to add to git, and if you can, leave a contribution :slight_smile:

6 Likes
2

Please share any screenshots or videos how it looks like please for a quick idea of it.

3 Likes
3

share screenshot

1 Like
4

Hey guys, sorry for the delayed response. I’ve been a bit busy.

I made a fix for the current working flow, but didn’t have the time to check all of the components.

Here is an example of what is working locally:

import streamlit as st

import st_tailwind as tw

st.set_page_config("Streamlit Tailwind Examples")


def main():
    tw.initialize_tailwind()

    tw.write("Grid Container", classes="text-blue-500 pb-4")
    with tw.container(classes="grid grid-cols-4"):
        for idx in range(1, 9):
            st.button(f"Button {idx}")

    tw.write("Colored Button", classes="text-purple-500 pb-4")
    tw.button("Button", classes="bg-red-500")


if __name__ == "__main__":
    main()

image
image1251×569 15.6 KB

5

Hey guys!

I hope you are doing great!

I wanted to update you about this library: now it has end-to-end tests and full coverage.

Check this other example:

example

"""
Example Streamlit app demonstrating a KPI dashboard with Tailwind styling.
"""

from typing import Union
import streamlit as st
import st_tailwind as tw

st.set_page_config(layout="wide")


def get_card(label: str, value: Union[str, float, int], help: str):
    with tw.container(classes="w-48 p-4 bg-white rounded-lg shadow"):
        st.metric(label=label, value=value, help=help)


def kpi_header():
    tw.initialize_tailwind()

    with tw.container(
        classes="flex flex-row flex-wrap w-fit justify-between gap-4 mb-6"
    ):
        # R2 Score Card
        get_card(
            label="R²",
            value="50%",
            help="R-squared (R²) measures how well the curve fits the data. Higher is better.",
        )
        # MAPE Card
        get_card(
            label="MAPE",
            value="5%",
            help="Mean Absolute Percentage Error measures prediction accuracy. Lower is better.",
        )
        # Unhealthy Curves Card
        get_card(
            label="Unhealthy Curves",
            value="3",
            help="Number of curves that need attention due to poor performance metrics.",
        )
        # Resolved Curves Card
        get_card(
            label="Resolved Curves",
            value=0.15,
            help="Number of curves that have been successfully optimized and validated.",
        )


if __name__ == "__main__":
    kpi_header()

Special thanks to Jacques Wengler for the provided feedback!

2 Likes