Script that automatically generates styling classes to apply to NiceGUI elements, using the Tailwind system

!_example.py

from Typography import Typography
from Backgrounds import Backgrounds
from Sizing import Sizing
from nicegui import ui

# STYLE LIB

s_title = (
    Typography()
    .text_color("text-teal-600")
    .font_size("text-6xl")
    .text_transform("uppercase")
    .text_align("text-center")
)

s_full_width = Sizing().width("w-full")

# PROG


@ui.page("/")
async def page():
    with ui.left_drawer() as sidebar:
        page_title = ui.label("Title")

    with ui.card() as main:
        ui.label("Lorem Ipsum")
        ui.separator()

        with ui.row() as btns:
            btn1 = (
                Typography(ui.button("btn1"))
                .text_color("text-amber-700")
                .element.tooltip("btn1")
            )
            btn2 = (
                Typography(ui.button("btn2"))
                .text_color("text-orange-900")
                .element.tooltip("btn2")
            )

    # Aplying styles
    s_title.apply(page_title)

    s_full_width.apply(main)
    s_full_width.apply(btns)

    Backgrounds(main).background_color("bg-lime-300")
    Backgrounds(sidebar).background_color("bg-orange-300")


ui.run()

!_generator.py

import re
import requests
from bs4 import BeautifulSoup


class GroupItem:
    title: str
    desc: str
    members: list

    def __init__(self, title: str, desc: str, members: list):
        self.title = title
        self.desc = desc
        self.members = members


selector_item_title = "#header h1"
selector_item_desc = "#header .mt-2"
selector_item_members = ".mt-10 td[class*=text-sky-400]"


class Group:
    title: str
    itens_raw: list
    itens: list[GroupItem]
    literals: list[str]
    functions: list[str]

    def __init__(self, title: str, itens_raw: list):
        self.title = title
        self.itens_raw = itens_raw
        self.itens = []
        self.literals = []
        self.functions = []


selector_groups = 'li[class="mt-12 lg:mt-8"]'
selector_group_title = "h5"
selector_group_itens_raw = "li a"


req = requests.get("https://tailwindcss.com/docs")
html = req.text
soup = BeautifulSoup(html, "html.parser")

groups: list[Group] = []

groups_html = soup.select(selector_groups)
for g in groups_html:
    group_title = g.select_one(selector_group_title)
    group_itens_raw = g.select(selector_group_itens_raw)

    groups.append(Group(group_title.text, group_itens_raw))

# Clear unwanted groups
unwanted_groups = [
    "Getting Started",
    "Core Concepts",
    "Customization",
    "Base Styles",
    "Official Plugins",
]
groups = [g for g in groups if g.title not in unwanted_groups]

# Get groups items info
for g in groups:
    print(f"{g.title}:")
    for i in g.itens_raw:
        print(f"\t{i.text}")
        _html = requests.get(f'https://tailwindcss.com{i["href"]}')
        _soup = BeautifulSoup(_html.text, "html.parser")

        item_title = _soup.select_one(selector_item_title)
        item_desc = _soup.select_one(selector_item_desc)
        item_members = _soup.select(selector_item_members)

        g.itens.append(
            GroupItem(
                item_title.text,
                item_desc.text,
                [f'"{i.text.split(" ")[0]}"' for i in item_members],
            )
        )
    print()

# Save groups info

for g in groups:
    print(f"{g.title}:")
    for i in g.itens:
        literal_title = i.title.replace(" ", "").replace("/", "").replace("-", "")
        function_title = re.sub(
            r"_{2,}",
            "_",
            i.title.replace(" ", "_").replace("/", "").replace("-", "_").lower(),
        )
        arg = "_" + i.title.split(" ").pop().replace("-", "_").lower()

        g.literals.append(f'{literal_title} = Literal[{",".join(i.members)}]')
        g.functions.append(
            f"""
    def {function_title}(self, {arg}: {literal_title}):
        \"""
        {i.desc}
        \"""
        self.__add({arg})
        return self
        """
        )
    print()

for g in groups:
    title = g.title.replace(" ", "").replace("&", "")
    print(f"{title}:")

    with open(f"{title}.py", "w", encoding="utf-8") as f:
        f.write(
            """
from typing import Literal
from nicegui.element import Element

"""
            + "\n\n".join(g.literals)
            + f"""


class {title}:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        \"""
        Internal
        \"""
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        \"""
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        \"""
        return ex_element.classes(add=" ".join(self.element._classes))

"""
            + "\n".join(g.functions)
        )

Accessibility.py

from typing import Literal
from nicegui.element import Element

ScreenReaders = Literal["sr-only","not-sr-only"]


class Accessibility:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def screen_readers(self, _readers: ScreenReaders):
        """
        Utilities for improving accessibility with screen readers.
        """
        self.__add(_readers)
        return self
        

Backgrounds.py

from typing import Literal
from nicegui.element import Element

BackgroundAttachment = Literal["bg-fixed","bg-local","bg-scroll"]

BackgroundClip = Literal["bg-clip-border","bg-clip-padding","bg-clip-content","bg-clip-text"]

BackgroundColor = Literal["bg-inherit","bg-current","bg-transparent","bg-black","bg-white","bg-slate-50","bg-slate-100","bg-slate-200","bg-slate-300","bg-slate-400","bg-slate-500","bg-slate-600","bg-slate-700","bg-slate-800","bg-slate-900","bg-gray-50","bg-gray-100","bg-gray-200","bg-gray-300","bg-gray-400","bg-gray-500","bg-gray-600","bg-gray-700","bg-gray-800","bg-gray-900","bg-zinc-50","bg-zinc-100","bg-zinc-200","bg-zinc-300","bg-zinc-400","bg-zinc-500","bg-zinc-600","bg-zinc-700","bg-zinc-800","bg-zinc-900","bg-neutral-50","bg-neutral-100","bg-neutral-200","bg-neutral-300","bg-neutral-400","bg-neutral-500","bg-neutral-600","bg-neutral-700","bg-neutral-800","bg-neutral-900","bg-stone-50","bg-stone-100","bg-stone-200","bg-stone-300","bg-stone-400","bg-stone-500","bg-stone-600","bg-stone-700","bg-stone-800","bg-stone-900","bg-red-50","bg-red-100","bg-red-200","bg-red-300","bg-red-400","bg-red-500","bg-red-600","bg-red-700","bg-red-800","bg-red-900","bg-orange-50","bg-orange-100","bg-orange-200","bg-orange-300","bg-orange-400","bg-orange-500","bg-orange-600","bg-orange-700","bg-orange-800","bg-orange-900","bg-amber-50","bg-amber-100","bg-amber-200","bg-amber-300","bg-amber-400","bg-amber-500","bg-amber-600","bg-amber-700","bg-amber-800","bg-amber-900","bg-yellow-50","bg-yellow-100","bg-yellow-200","bg-yellow-300","bg-yellow-400","bg-yellow-500","bg-yellow-600","bg-yellow-700","bg-yellow-800","bg-yellow-900","bg-lime-50","bg-lime-100","bg-lime-200","bg-lime-300","bg-lime-400","bg-lime-500","bg-lime-600","bg-lime-700","bg-lime-800","bg-lime-900","bg-green-50","bg-green-100","bg-green-200","bg-green-300","bg-green-400","bg-green-500","bg-green-600","bg-green-700","bg-green-800","bg-green-900","bg-emerald-50","bg-emerald-100","bg-emerald-200","bg-emerald-300","bg-emerald-400","bg-emerald-500","bg-emerald-600","bg-emerald-700","bg-emerald-800","bg-emerald-900","bg-teal-50","bg-teal-100","bg-teal-200","bg-teal-300","bg-teal-400","bg-teal-500","bg-teal-600","bg-teal-700","bg-teal-800","bg-teal-900","bg-cyan-50","bg-cyan-100","bg-cyan-200","bg-cyan-300","bg-cyan-400","bg-cyan-500","bg-cyan-600","bg-cyan-700","bg-cyan-800","bg-cyan-900","bg-sky-50","bg-sky-100","bg-sky-200","bg-sky-300","bg-sky-400","bg-sky-500","bg-sky-600","bg-sky-700","bg-sky-800","bg-sky-900","bg-blue-50","bg-blue-100","bg-blue-200","bg-blue-300","bg-blue-400","bg-blue-500","bg-blue-600","bg-blue-700","bg-blue-800","bg-blue-900","bg-indigo-50","bg-indigo-100","bg-indigo-200","bg-indigo-300","bg-indigo-400","bg-indigo-500","bg-indigo-600","bg-indigo-700","bg-indigo-800","bg-indigo-900","bg-violet-50","bg-violet-100","bg-violet-200","bg-violet-300","bg-violet-400","bg-violet-500","bg-violet-600","bg-violet-700","bg-violet-800","bg-violet-900","bg-purple-50","bg-purple-100","bg-purple-200","bg-purple-300","bg-purple-400","bg-purple-500","bg-purple-600","bg-purple-700","bg-purple-800","bg-purple-900","bg-fuchsia-50","bg-fuchsia-100","bg-fuchsia-200","bg-fuchsia-300","bg-fuchsia-400","bg-fuchsia-500","bg-fuchsia-600","bg-fuchsia-700","bg-fuchsia-800","bg-fuchsia-900","bg-pink-50","bg-pink-100","bg-pink-200","bg-pink-300","bg-pink-400","bg-pink-500","bg-pink-600","bg-pink-700","bg-pink-800","bg-pink-900","bg-rose-50","bg-rose-100","bg-rose-200","bg-rose-300","bg-rose-400","bg-rose-500","bg-rose-600","bg-rose-700","bg-rose-800","bg-rose-900"]

BackgroundOrigin = Literal["bg-origin-border","bg-origin-padding","bg-origin-content"]

BackgroundPosition = Literal["bg-bottom","bg-center","bg-left","bg-left-bottom","bg-left-top","bg-right","bg-right-bottom","bg-right-top","bg-top"]

BackgroundRepeat = Literal["bg-repeat","bg-no-repeat","bg-repeat-x","bg-repeat-y","bg-repeat-round","bg-repeat-space"]

BackgroundSize = Literal["bg-auto","bg-cover","bg-contain"]

BackgroundImage = Literal["bg-none","bg-gradient-to-t","bg-gradient-to-tr","bg-gradient-to-r","bg-gradient-to-br","bg-gradient-to-b","bg-gradient-to-bl","bg-gradient-to-l","bg-gradient-to-tl"]

GradientColorStops = Literal["from-inherit","from-current","from-transparent","from-black","from-white","from-slate-50","from-slate-100","from-slate-200","from-slate-300","from-slate-400","from-slate-500","from-slate-600","from-slate-700","from-slate-800","from-slate-900","from-gray-50","from-gray-100","from-gray-200","from-gray-300","from-gray-400","from-gray-500","from-gray-600","from-gray-700","from-gray-800","from-gray-900","from-zinc-50","from-zinc-100","from-zinc-200","from-zinc-300","from-zinc-400","from-zinc-500","from-zinc-600","from-zinc-700","from-zinc-800","from-zinc-900","from-neutral-50","from-neutral-100","from-neutral-200","from-neutral-300","from-neutral-400","from-neutral-500","from-neutral-600","from-neutral-700","from-neutral-800","from-neutral-900","from-stone-50","from-stone-100","from-stone-200","from-stone-300","from-stone-400","from-stone-500","from-stone-600","from-stone-700","from-stone-800","from-stone-900","from-red-50","from-red-100","from-red-200","from-red-300","from-red-400","from-red-500","from-red-600","from-red-700","from-red-800","from-red-900","from-orange-50","from-orange-100","from-orange-200","from-orange-300","from-orange-400","from-orange-500","from-orange-600","from-orange-700","from-orange-800","from-orange-900","from-amber-50","from-amber-100","from-amber-200","from-amber-300","from-amber-400","from-amber-500","from-amber-600","from-amber-700","from-amber-800","from-amber-900","from-yellow-50","from-yellow-100","from-yellow-200","from-yellow-300","from-yellow-400","from-yellow-500","from-yellow-600","from-yellow-700","from-yellow-800","from-yellow-900","from-lime-50","from-lime-100","from-lime-200","from-lime-300","from-lime-400","from-lime-500","from-lime-600","from-lime-700","from-lime-800","from-lime-900","from-green-50","from-green-100","from-green-200","from-green-300","from-green-400","from-green-500","from-green-600","from-green-700","from-green-800","from-green-900","from-emerald-50","from-emerald-100","from-emerald-200","from-emerald-300","from-emerald-400","from-emerald-500","from-emerald-600","from-emerald-700","from-emerald-800","from-emerald-900","from-teal-50","from-teal-100","from-teal-200","from-teal-300","from-teal-400","from-teal-500","from-teal-600","from-teal-700","from-teal-800","from-teal-900","from-cyan-50","from-cyan-100","from-cyan-200","from-cyan-300","from-cyan-400","from-cyan-500","from-cyan-600","from-cyan-700","from-cyan-800","from-cyan-900","from-sky-50","from-sky-100","from-sky-200","from-sky-300","from-sky-400","from-sky-500","from-sky-600","from-sky-700","from-sky-800","from-sky-900","from-blue-50","from-blue-100","from-blue-200","from-blue-300","from-blue-400","from-blue-500","from-blue-600","from-blue-700","from-blue-800","from-blue-900","from-indigo-50","from-indigo-100","from-indigo-200","from-indigo-300","from-indigo-400","from-indigo-500","from-indigo-600","from-indigo-700","from-indigo-800","from-indigo-900","from-violet-50","from-violet-100","from-violet-200","from-violet-300","from-violet-400","from-violet-500","from-violet-600","from-violet-700","from-violet-800","from-violet-900","from-purple-50","from-purple-100","from-purple-200","from-purple-300","from-purple-400","from-purple-500","from-purple-600","from-purple-700","from-purple-800","from-purple-900","from-fuchsia-50","from-fuchsia-100","from-fuchsia-200","from-fuchsia-300","from-fuchsia-400","from-fuchsia-500","from-fuchsia-600","from-fuchsia-700","from-fuchsia-800","from-fuchsia-900","from-pink-50","from-pink-100","from-pink-200","from-pink-300","from-pink-400","from-pink-500","from-pink-600","from-pink-700","from-pink-800","from-pink-900","from-rose-50","from-rose-100","from-rose-200","from-rose-300","from-rose-400","from-rose-500","from-rose-600","from-rose-700","from-rose-800","from-rose-900","via-inherit","via-current","via-transparent","via-black","via-white","via-slate-50","via-slate-100","via-slate-200","via-slate-300","via-slate-400","via-slate-500","via-slate-600","via-slate-700","via-slate-800","via-slate-900","via-gray-50","via-gray-100","via-gray-200","via-gray-300","via-gray-400","via-gray-500","via-gray-600","via-gray-700","via-gray-800","via-gray-900","via-zinc-50","via-zinc-100","via-zinc-200","via-zinc-300","via-zinc-400","via-zinc-500","via-zinc-600","via-zinc-700","via-zinc-800","via-zinc-900","via-neutral-50","via-neutral-100","via-neutral-200","via-neutral-300","via-neutral-400","via-neutral-500","via-neutral-600","via-neutral-700","via-neutral-800","via-neutral-900","via-stone-50","via-stone-100","via-stone-200","via-stone-300","via-stone-400","via-stone-500","via-stone-600","via-stone-700","via-stone-800","via-stone-900","via-red-50","via-red-100","via-red-200","via-red-300","via-red-400","via-red-500","via-red-600","via-red-700","via-red-800","via-red-900","via-orange-50","via-orange-100","via-orange-200","via-orange-300","via-orange-400","via-orange-500","via-orange-600","via-orange-700","via-orange-800","via-orange-900","via-amber-50","via-amber-100","via-amber-200","via-amber-300","via-amber-400","via-amber-500","via-amber-600","via-amber-700","via-amber-800","via-amber-900","via-yellow-50","via-yellow-100","via-yellow-200","via-yellow-300","via-yellow-400","via-yellow-500","via-yellow-600","via-yellow-700","via-yellow-800","via-yellow-900","via-lime-50","via-lime-100","via-lime-200","via-lime-300","via-lime-400","via-lime-500","via-lime-600","via-lime-700","via-lime-800","via-lime-900","via-green-50","via-green-100","via-green-200","via-green-300","via-green-400","via-green-500","via-green-600","via-green-700","via-green-800","via-green-900","via-emerald-50","via-emerald-100","via-emerald-200","via-emerald-300","via-emerald-400","via-emerald-500","via-emerald-600","via-emerald-700","via-emerald-800","via-emerald-900","via-teal-50","via-teal-100","via-teal-200","via-teal-300","via-teal-400","via-teal-500","via-teal-600","via-teal-700","via-teal-800","via-teal-900","via-cyan-50","via-cyan-100","via-cyan-200","via-cyan-300","via-cyan-400","via-cyan-500","via-cyan-600","via-cyan-700","via-cyan-800","via-cyan-900","via-sky-50","via-sky-100","via-sky-200","via-sky-300","via-sky-400","via-sky-500","via-sky-600","via-sky-700","via-sky-800","via-sky-900","via-blue-50","via-blue-100","via-blue-200","via-blue-300","via-blue-400","via-blue-500","via-blue-600","via-blue-700","via-blue-800","via-blue-900","via-indigo-50","via-indigo-100","via-indigo-200","via-indigo-300","via-indigo-400","via-indigo-500","via-indigo-600","via-indigo-700","via-indigo-800","via-indigo-900","via-violet-50","via-violet-100","via-violet-200","via-violet-300","via-violet-400","via-violet-500","via-violet-600","via-violet-700","via-violet-800","via-violet-900","via-purple-50","via-purple-100","via-purple-200","via-purple-300","via-purple-400","via-purple-500","via-purple-600","via-purple-700","via-purple-800","via-purple-900","via-fuchsia-50","via-fuchsia-100","via-fuchsia-200","via-fuchsia-300","via-fuchsia-400","via-fuchsia-500","via-fuchsia-600","via-fuchsia-700","via-fuchsia-800","via-fuchsia-900","via-pink-50","via-pink-100","via-pink-200","via-pink-300","via-pink-400","via-pink-500","via-pink-600","via-pink-700","via-pink-800","via-pink-900","via-rose-50","via-rose-100","via-rose-200","via-rose-300","via-rose-400","via-rose-500","via-rose-600","via-rose-700","via-rose-800","via-rose-900","to-inherit","to-current","to-transparent","to-black","to-white","to-slate-50","to-slate-100","to-slate-200","to-slate-300","to-slate-400","to-slate-500","to-slate-600","to-slate-700","to-slate-800","to-slate-900","to-gray-50","to-gray-100","to-gray-200","to-gray-300","to-gray-400","to-gray-500","to-gray-600","to-gray-700","to-gray-800","to-gray-900","to-zinc-50","to-zinc-100","to-zinc-200","to-zinc-300","to-zinc-400","to-zinc-500","to-zinc-600","to-zinc-700","to-zinc-800","to-zinc-900","to-neutral-50","to-neutral-100","to-neutral-200","to-neutral-300","to-neutral-400","to-neutral-500","to-neutral-600","to-neutral-700","to-neutral-800","to-neutral-900","to-stone-50","to-stone-100","to-stone-200","to-stone-300","to-stone-400","to-stone-500","to-stone-600","to-stone-700","to-stone-800","to-stone-900","to-red-50","to-red-100","to-red-200","to-red-300","to-red-400","to-red-500","to-red-600","to-red-700","to-red-800","to-red-900","to-orange-50","to-orange-100","to-orange-200","to-orange-300","to-orange-400","to-orange-500","to-orange-600","to-orange-700","to-orange-800","to-orange-900","to-amber-50","to-amber-100","to-amber-200","to-amber-300","to-amber-400","to-amber-500","to-amber-600","to-amber-700","to-amber-800","to-amber-900","to-yellow-50","to-yellow-100","to-yellow-200","to-yellow-300","to-yellow-400","to-yellow-500","to-yellow-600","to-yellow-700","to-yellow-800","to-yellow-900","to-lime-50","to-lime-100","to-lime-200","to-lime-300","to-lime-400","to-lime-500","to-lime-600","to-lime-700","to-lime-800","to-lime-900","to-green-50","to-green-100","to-green-200","to-green-300","to-green-400","to-green-500","to-green-600","to-green-700","to-green-800","to-green-900","to-emerald-50","to-emerald-100","to-emerald-200","to-emerald-300","to-emerald-400","to-emerald-500","to-emerald-600","to-emerald-700","to-emerald-800","to-emerald-900","to-teal-50","to-teal-100","to-teal-200","to-teal-300","to-teal-400","to-teal-500","to-teal-600","to-teal-700","to-teal-800","to-teal-900","to-cyan-50","to-cyan-100","to-cyan-200","to-cyan-300","to-cyan-400","to-cyan-500","to-cyan-600","to-cyan-700","to-cyan-800","to-cyan-900","to-sky-50","to-sky-100","to-sky-200","to-sky-300","to-sky-400","to-sky-500","to-sky-600","to-sky-700","to-sky-800","to-sky-900","to-blue-50","to-blue-100","to-blue-200","to-blue-300","to-blue-400","to-blue-500","to-blue-600","to-blue-700","to-blue-800","to-blue-900","to-indigo-50","to-indigo-100","to-indigo-200","to-indigo-300","to-indigo-400","to-indigo-500","to-indigo-600","to-indigo-700","to-indigo-800","to-indigo-900","to-violet-50","to-violet-100","to-violet-200","to-violet-300","to-violet-400","to-violet-500","to-violet-600","to-violet-700","to-violet-800","to-violet-900","to-purple-50","to-purple-100","to-purple-200","to-purple-300","to-purple-400","to-purple-500","to-purple-600","to-purple-700","to-purple-800","to-purple-900","to-fuchsia-50","to-fuchsia-100","to-fuchsia-200","to-fuchsia-300","to-fuchsia-400","to-fuchsia-500","to-fuchsia-600","to-fuchsia-700","to-fuchsia-800","to-fuchsia-900","to-pink-50","to-pink-100","to-pink-200","to-pink-300","to-pink-400","to-pink-500","to-pink-600","to-pink-700","to-pink-800","to-pink-900","to-rose-50","to-rose-100","to-rose-200","to-rose-300","to-rose-400","to-rose-500","to-rose-600","to-rose-700","to-rose-800","to-rose-900"]


class Backgrounds:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def background_attachment(self, _attachment: BackgroundAttachment):
        """
        Utilities for controlling how a background image behaves when scrolling.
        """
        self.__add(_attachment)
        return self
        

    def background_clip(self, _clip: BackgroundClip):
        """
        Utilities for controlling the bounding box of an element's background.
        """
        self.__add(_clip)
        return self
        

    def background_color(self, _color: BackgroundColor):
        """
        Utilities for controlling an element's background color.
        """
        self.__add(_color)
        return self
        

    def background_origin(self, _origin: BackgroundOrigin):
        """
        Utilities for controlling how an element's background is positioned relative to borders, padding, and content.
        """
        self.__add(_origin)
        return self
        

    def background_position(self, _position: BackgroundPosition):
        """
        Utilities for controlling the position of an element's background image.
        """
        self.__add(_position)
        return self
        

    def background_repeat(self, _repeat: BackgroundRepeat):
        """
        Utilities for controlling the repetition of an element's background image.
        """
        self.__add(_repeat)
        return self
        

    def background_size(self, _size: BackgroundSize):
        """
        Utilities for controlling the background size of an element's background image.
        """
        self.__add(_size)
        return self
        

    def background_image(self, _image: BackgroundImage):
        """
        Utilities for controlling an element's background image.
        """
        self.__add(_image)
        return self
        

    def gradient_color_stops(self, _stops: GradientColorStops):
        """
        Utilities for controlling the color stops in background gradients.
        """
        self.__add(_stops)
        return self
        

Borders.py

from typing import Literal
from nicegui.element import Element

BorderRadius = Literal["rounded-none","rounded-sm","rounded","rounded-md","rounded-lg","rounded-xl","rounded-2xl","rounded-3xl","rounded-full","rounded-t-none","rounded-t-sm","rounded-t","rounded-t-md","rounded-t-lg","rounded-t-xl","rounded-t-2xl","rounded-t-3xl","rounded-t-full","rounded-r-none","rounded-r-sm","rounded-r","rounded-r-md","rounded-r-lg","rounded-r-xl","rounded-r-2xl","rounded-r-3xl","rounded-r-full","rounded-b-none","rounded-b-sm","rounded-b","rounded-b-md","rounded-b-lg","rounded-b-xl","rounded-b-2xl","rounded-b-3xl","rounded-b-full","rounded-l-none","rounded-l-sm","rounded-l","rounded-l-md","rounded-l-lg","rounded-l-xl","rounded-l-2xl","rounded-l-3xl","rounded-l-full","rounded-tl-none","rounded-tl-sm","rounded-tl","rounded-tl-md","rounded-tl-lg","rounded-tl-xl","rounded-tl-2xl","rounded-tl-3xl","rounded-tl-full","rounded-tr-none","rounded-tr-sm","rounded-tr","rounded-tr-md","rounded-tr-lg","rounded-tr-xl","rounded-tr-2xl","rounded-tr-3xl","rounded-tr-full","rounded-br-none","rounded-br-sm","rounded-br","rounded-br-md","rounded-br-lg","rounded-br-xl","rounded-br-2xl","rounded-br-3xl","rounded-br-full","rounded-bl-none","rounded-bl-sm","rounded-bl","rounded-bl-md","rounded-bl-lg","rounded-bl-xl","rounded-bl-2xl","rounded-bl-3xl","rounded-bl-full"]

BorderWidth = Literal["border-0","border-2","border-4","border-8","border","border-x-0","border-x-2","border-x-4","border-x-8","border-x","border-y-0","border-y-2","border-y-4","border-y-8","border-y","border-t-0","border-t-2","border-t-4","border-t-8","border-t","border-r-0","border-r-2","border-r-4","border-r-8","border-r","border-b-0","border-b-2","border-b-4","border-b-8","border-b","border-l-0","border-l-2","border-l-4","border-l-8","border-l"]

BorderColor = Literal["border-inherit","border-current","border-transparent","border-black","border-white","border-slate-50","border-slate-100","border-slate-200","border-slate-300","border-slate-400","border-slate-500","border-slate-600","border-slate-700","border-slate-800","border-slate-900","border-gray-50","border-gray-100","border-gray-200","border-gray-300","border-gray-400","border-gray-500","border-gray-600","border-gray-700","border-gray-800","border-gray-900","border-zinc-50","border-zinc-100","border-zinc-200","border-zinc-300","border-zinc-400","border-zinc-500","border-zinc-600","border-zinc-700","border-zinc-800","border-zinc-900","border-neutral-50","border-neutral-100","border-neutral-200","border-neutral-300","border-neutral-400","border-neutral-500","border-neutral-600","border-neutral-700","border-neutral-800","border-neutral-900","border-stone-50","border-stone-100","border-stone-200","border-stone-300","border-stone-400","border-stone-500","border-stone-600","border-stone-700","border-stone-800","border-stone-900","border-red-50","border-red-100","border-red-200","border-red-300","border-red-400","border-red-500","border-red-600","border-red-700","border-red-800","border-red-900","border-orange-50","border-orange-100","border-orange-200","border-orange-300","border-orange-400","border-orange-500","border-orange-600","border-orange-700","border-orange-800","border-orange-900","border-amber-50","border-amber-100","border-amber-200","border-amber-300","border-amber-400","border-amber-500","border-amber-600","border-amber-700","border-amber-800","border-amber-900","border-yellow-50","border-yellow-100","border-yellow-200","border-yellow-300","border-yellow-400","border-yellow-500","border-yellow-600","border-yellow-700","border-yellow-800","border-yellow-900","border-lime-50","border-lime-100","border-lime-200","border-lime-300","border-lime-400","border-lime-500","border-lime-600","border-lime-700","border-lime-800","border-lime-900","border-green-50","border-green-100","border-green-200","border-green-300","border-green-400","border-green-500","border-green-600","border-green-700","border-green-800","border-green-900","border-emerald-50","border-emerald-100","border-emerald-200","border-emerald-300","border-emerald-400","border-emerald-500","border-emerald-600","border-emerald-700","border-emerald-800","border-emerald-900","border-teal-50","border-teal-100","border-teal-200","border-teal-300","border-teal-400","border-teal-500","border-teal-600","border-teal-700","border-teal-800","border-teal-900","border-cyan-50","border-cyan-100","border-cyan-200","border-cyan-300","border-cyan-400","border-cyan-500","border-cyan-600","border-cyan-700","border-cyan-800","border-cyan-900","border-sky-50","border-sky-100","border-sky-200","border-sky-300","border-sky-400","border-sky-500","border-sky-600","border-sky-700","border-sky-800","border-sky-900","border-blue-50","border-blue-100","border-blue-200","border-blue-300","border-blue-400","border-blue-500","border-blue-600","border-blue-700","border-blue-800","border-blue-900","border-indigo-50","border-indigo-100","border-indigo-200","border-indigo-300","border-indigo-400","border-indigo-500","border-indigo-600","border-indigo-700","border-indigo-800","border-indigo-900","border-violet-50","border-violet-100","border-violet-200","border-violet-300","border-violet-400","border-violet-500","border-violet-600","border-violet-700","border-violet-800","border-violet-900","border-purple-50","border-purple-100","border-purple-200","border-purple-300","border-purple-400","border-purple-500","border-purple-600","border-purple-700","border-purple-800","border-purple-900","border-fuchsia-50","border-fuchsia-100","border-fuchsia-200","border-fuchsia-300","border-fuchsia-400","border-fuchsia-500","border-fuchsia-600","border-fuchsia-700","border-fuchsia-800","border-fuchsia-900","border-pink-50","border-pink-100","border-pink-200","border-pink-300","border-pink-400","border-pink-500","border-pink-600","border-pink-700","border-pink-800","border-pink-900","border-rose-50","border-rose-100","border-rose-200","border-rose-300","border-rose-400","border-rose-500","border-rose-600","border-rose-700","border-rose-800","border-rose-900","border-x-inherit","border-x-current","border-x-transparent","border-x-black","border-x-white","border-x-slate-50","border-x-slate-100","border-x-slate-200","border-x-slate-300","border-x-slate-400","border-x-slate-500","border-x-slate-600","border-x-slate-700","border-x-slate-800","border-x-slate-900","border-x-gray-50","border-x-gray-100","border-x-gray-200","border-x-gray-300","border-x-gray-400","border-x-gray-500","border-x-gray-600","border-x-gray-700","border-x-gray-800","border-x-gray-900","border-x-zinc-50","border-x-zinc-100","border-x-zinc-200","border-x-zinc-300","border-x-zinc-400","border-x-zinc-500","border-x-zinc-600","border-x-zinc-700","border-x-zinc-800","border-x-zinc-900","border-x-neutral-50","border-x-neutral-100","border-x-neutral-200","border-x-neutral-300","border-x-neutral-400","border-x-neutral-500","border-x-neutral-600","border-x-neutral-700","border-x-neutral-800","border-x-neutral-900","border-x-stone-50","border-x-stone-100","border-x-stone-200","border-x-stone-300","border-x-stone-400","border-x-stone-500","border-x-stone-600","border-x-stone-700","border-x-stone-800","border-x-stone-900","border-x-red-50","border-x-red-100","border-x-red-200","border-x-red-300","border-x-red-400","border-x-red-500","border-x-red-600","border-x-red-700","border-x-red-800","border-x-red-900","border-x-orange-50","border-x-orange-100","border-x-orange-200","border-x-orange-300","border-x-orange-400","border-x-orange-500","border-x-orange-600","border-x-orange-700","border-x-orange-800","border-x-orange-900","border-x-amber-50","border-x-amber-100","border-x-amber-200","border-x-amber-300","border-x-amber-400","border-x-amber-500","border-x-amber-600","border-x-amber-700","border-x-amber-800","border-x-amber-900","border-x-yellow-50","border-x-yellow-100","border-x-yellow-200","border-x-yellow-300","border-x-yellow-400","border-x-yellow-500","border-x-yellow-600","border-x-yellow-700","border-x-yellow-800","border-x-yellow-900","border-x-lime-50","border-x-lime-100","border-x-lime-200","border-x-lime-300","border-x-lime-400","border-x-lime-500","border-x-lime-600","border-x-lime-700","border-x-lime-800","border-x-lime-900","border-x-green-50","border-x-green-100","border-x-green-200","border-x-green-300","border-x-green-400","border-x-green-500","border-x-green-600","border-x-green-700","border-x-green-800","border-x-green-900","border-x-emerald-50","border-x-emerald-100","border-x-emerald-200","border-x-emerald-300","border-x-emerald-400","border-x-emerald-500","border-x-emerald-600","border-x-emerald-700","border-x-emerald-800","border-x-emerald-900","border-x-teal-50","border-x-teal-100","border-x-teal-200","border-x-teal-300","border-x-teal-400","border-x-teal-500","border-x-teal-600","border-x-teal-700","border-x-teal-800","border-x-teal-900","border-x-cyan-50","border-x-cyan-100","border-x-cyan-200","border-x-cyan-300","border-x-cyan-400","border-x-cyan-500","border-x-cyan-600","border-x-cyan-700","border-x-cyan-800","border-x-cyan-900","border-x-sky-50","border-x-sky-100","border-x-sky-200","border-x-sky-300","border-x-sky-400","border-x-sky-500","border-x-sky-600","border-x-sky-700","border-x-sky-800","border-x-sky-900","border-x-blue-50","border-x-blue-100","border-x-blue-200","border-x-blue-300","border-x-blue-400","border-x-blue-500","border-x-blue-600","border-x-blue-700","border-x-blue-800","border-x-blue-900","border-x-indigo-50","border-x-indigo-100","border-x-indigo-200","border-x-indigo-300","border-x-indigo-400","border-x-indigo-500","border-x-indigo-600","border-x-indigo-700","border-x-indigo-800","border-x-indigo-900","border-x-violet-50","border-x-violet-100","border-x-violet-200","border-x-violet-300","border-x-violet-400","border-x-violet-500","border-x-violet-600","border-x-violet-700","border-x-violet-800","border-x-violet-900","border-x-purple-50","border-x-purple-100","border-x-purple-200","border-x-purple-300","border-x-purple-400","border-x-purple-500","border-x-purple-600","border-x-purple-700","border-x-purple-800","border-x-purple-900","border-x-fuchsia-50","border-x-fuchsia-100","border-x-fuchsia-200","border-x-fuchsia-300","border-x-fuchsia-400","border-x-fuchsia-500","border-x-fuchsia-600","border-x-fuchsia-700","border-x-fuchsia-800","border-x-fuchsia-900","border-x-pink-50","border-x-pink-100","border-x-pink-200","border-x-pink-300","border-x-pink-400","border-x-pink-500","border-x-pink-600","border-x-pink-700","border-x-pink-800","border-x-pink-900","border-x-rose-50","border-x-rose-100","border-x-rose-200","border-x-rose-300","border-x-rose-400","border-x-rose-500","border-x-rose-600","border-x-rose-700","border-x-rose-800","border-x-rose-900","border-y-inherit","border-y-current","border-y-transparent","border-y-black","border-y-white","border-y-slate-50","border-y-slate-100","border-y-slate-200","border-y-slate-300","border-y-slate-400","border-y-slate-500","border-y-slate-600","border-y-slate-700","border-y-slate-800","border-y-slate-900","border-y-gray-50","border-y-gray-100","border-y-gray-200","border-y-gray-300","border-y-gray-400","border-y-gray-500","border-y-gray-600","border-y-gray-700","border-y-gray-800","border-y-gray-900","border-y-zinc-50","border-y-zinc-100","border-y-zinc-200","border-y-zinc-300","border-y-zinc-400","border-y-zinc-500","border-y-zinc-600","border-y-zinc-700","border-y-zinc-800","border-y-zinc-900","border-y-neutral-50","border-y-neutral-100","border-y-neutral-200","border-y-neutral-300","border-y-neutral-400","border-y-neutral-500","border-y-neutral-600","border-y-neutral-700","border-y-neutral-800","border-y-neutral-900","border-y-stone-50","border-y-stone-100","border-y-stone-200","border-y-stone-300","border-y-stone-400","border-y-stone-500","border-y-stone-600","border-y-stone-700","border-y-stone-800","border-y-stone-900","border-y-red-50","border-y-red-100","border-y-red-200","border-y-red-300","border-y-red-400","border-y-red-500","border-y-red-600","border-y-red-700","border-y-red-800","border-y-red-900","border-y-orange-50","border-y-orange-100","border-y-orange-200","border-y-orange-300","border-y-orange-400","border-y-orange-500","border-y-orange-600","border-y-orange-700","border-y-orange-800","border-y-orange-900","border-y-amber-50","border-y-amber-100","border-y-amber-200","border-y-amber-300","border-y-amber-400","border-y-amber-500","border-y-amber-600","border-y-amber-700","border-y-amber-800","border-y-amber-900","border-y-yellow-50","border-y-yellow-100","border-y-yellow-200","border-y-yellow-300","border-y-yellow-400","border-y-yellow-500","border-y-yellow-600","border-y-yellow-700","border-y-yellow-800","border-y-yellow-900","border-y-lime-50","border-y-lime-100","border-y-lime-200","border-y-lime-300","border-y-lime-400","border-y-lime-500","border-y-lime-600","border-y-lime-700","border-y-lime-800","border-y-lime-900","border-y-green-50","border-y-green-100","border-y-green-200","border-y-green-300","border-y-green-400","border-y-green-500","border-y-green-600","border-y-green-700","border-y-green-800","border-y-green-900","border-y-emerald-50","border-y-emerald-100","border-y-emerald-200","border-y-emerald-300","border-y-emerald-400","border-y-emerald-500","border-y-emerald-600","border-y-emerald-700","border-y-emerald-800","border-y-emerald-900","border-y-teal-50","border-y-teal-100","border-y-teal-200","border-y-teal-300","border-y-teal-400","border-y-teal-500","border-y-teal-600","border-y-teal-700","border-y-teal-800","border-y-teal-900","border-y-cyan-50","border-y-cyan-100","border-y-cyan-200","border-y-cyan-300","border-y-cyan-400","border-y-cyan-500","border-y-cyan-600","border-y-cyan-700","border-y-cyan-800","border-y-cyan-900","border-y-sky-50","border-y-sky-100","border-y-sky-200","border-y-sky-300","border-y-sky-400","border-y-sky-500","border-y-sky-600","border-y-sky-700","border-y-sky-800","border-y-sky-900","border-y-blue-50","border-y-blue-100","border-y-blue-200","border-y-blue-300","border-y-blue-400","border-y-blue-500","border-y-blue-600","border-y-blue-700","border-y-blue-800","border-y-blue-900","border-y-indigo-50","border-y-indigo-100","border-y-indigo-200","border-y-indigo-300","border-y-indigo-400","border-y-indigo-500","border-y-indigo-600","border-y-indigo-700","border-y-indigo-800","border-y-indigo-900","border-y-violet-50","border-y-violet-100","border-y-violet-200","border-y-violet-300","border-y-violet-400","border-y-violet-500","border-y-violet-600","border-y-violet-700","border-y-violet-800","border-y-violet-900","border-y-purple-50","border-y-purple-100","border-y-purple-200","border-y-purple-300","border-y-purple-400","border-y-purple-500","border-y-purple-600","border-y-purple-700","border-y-purple-800","border-y-purple-900","border-y-fuchsia-50","border-y-fuchsia-100","border-y-fuchsia-200","border-y-fuchsia-300","border-y-fuchsia-400","border-y-fuchsia-500","border-y-fuchsia-600","border-y-fuchsia-700","border-y-fuchsia-800","border-y-fuchsia-900","border-y-pink-50","border-y-pink-100","border-y-pink-200","border-y-pink-300","border-y-pink-400","border-y-pink-500","border-y-pink-600","border-y-pink-700","border-y-pink-800","border-y-pink-900","border-y-rose-50","border-y-rose-100","border-y-rose-200","border-y-rose-300","border-y-rose-400","border-y-rose-500","border-y-rose-600","border-y-rose-700","border-y-rose-800","border-y-rose-900","border-t-inherit","border-t-current","border-t-transparent","border-t-black","border-t-white","border-t-slate-50","border-t-slate-100","border-t-slate-200","border-t-slate-300","border-t-slate-400","border-t-slate-500","border-t-slate-600","border-t-slate-700","border-t-slate-800","border-t-slate-900","border-t-gray-50","border-t-gray-100","border-t-gray-200","border-t-gray-300","border-t-gray-400","border-t-gray-500","border-t-gray-600","border-t-gray-700","border-t-gray-800","border-t-gray-900","border-t-zinc-50","border-t-zinc-100","border-t-zinc-200","border-t-zinc-300","border-t-zinc-400","border-t-zinc-500","border-t-zinc-600","border-t-zinc-700","border-t-zinc-800","border-t-zinc-900","border-t-neutral-50","border-t-neutral-100","border-t-neutral-200","border-t-neutral-300","border-t-neutral-400","border-t-neutral-500","border-t-neutral-600","border-t-neutral-700","border-t-neutral-800","border-t-neutral-900","border-t-stone-50","border-t-stone-100","border-t-stone-200","border-t-stone-300","border-t-stone-400","border-t-stone-500","border-t-stone-600","border-t-stone-700","border-t-stone-800","border-t-stone-900","border-t-red-50","border-t-red-100","border-t-red-200","border-t-red-300","border-t-red-400","border-t-red-500","border-t-red-600","border-t-red-700","border-t-red-800","border-t-red-900","border-t-orange-50","border-t-orange-100","border-t-orange-200","border-t-orange-300","border-t-orange-400","border-t-orange-500","border-t-orange-600","border-t-orange-700","border-t-orange-800","border-t-orange-900","border-t-amber-50","border-t-amber-100","border-t-amber-200","border-t-amber-300","border-t-amber-400","border-t-amber-500","border-t-amber-600","border-t-amber-700","border-t-amber-800","border-t-amber-900","border-t-yellow-50","border-t-yellow-100","border-t-yellow-200","border-t-yellow-300","border-t-yellow-400","border-t-yellow-500","border-t-yellow-600","border-t-yellow-700","border-t-yellow-800","border-t-yellow-900","border-t-lime-50","border-t-lime-100","border-t-lime-200","border-t-lime-300","border-t-lime-400","border-t-lime-500","border-t-lime-600","border-t-lime-700","border-t-lime-800","border-t-lime-900","border-t-green-50","border-t-green-100","border-t-green-200","border-t-green-300","border-t-green-400","border-t-green-500","border-t-green-600","border-t-green-700","border-t-green-800","border-t-green-900","border-t-emerald-50","border-t-emerald-100","border-t-emerald-200","border-t-emerald-300","border-t-emerald-400","border-t-emerald-500","border-t-emerald-600","border-t-emerald-700","border-t-emerald-800","border-t-emerald-900","border-t-teal-50","border-t-teal-100","border-t-teal-200","border-t-teal-300","border-t-teal-400","border-t-teal-500","border-t-teal-600","border-t-teal-700","border-t-teal-800","border-t-teal-900","border-t-cyan-50","border-t-cyan-100","border-t-cyan-200","border-t-cyan-300","border-t-cyan-400","border-t-cyan-500","border-t-cyan-600","border-t-cyan-700","border-t-cyan-800","border-t-cyan-900","border-t-sky-50","border-t-sky-100","border-t-sky-200","border-t-sky-300","border-t-sky-400","border-t-sky-500","border-t-sky-600","border-t-sky-700","border-t-sky-800","border-t-sky-900","border-t-blue-50","border-t-blue-100","border-t-blue-200","border-t-blue-300","border-t-blue-400","border-t-blue-500","border-t-blue-600","border-t-blue-700","border-t-blue-800","border-t-blue-900","border-t-indigo-50","border-t-indigo-100","border-t-indigo-200","border-t-indigo-300","border-t-indigo-400","border-t-indigo-500","border-t-indigo-600","border-t-indigo-700","border-t-indigo-800","border-t-indigo-900","border-t-violet-50","border-t-violet-100","border-t-violet-200","border-t-violet-300","border-t-violet-400","border-t-violet-500","border-t-violet-600","border-t-violet-700","border-t-violet-800","border-t-violet-900","border-t-purple-50","border-t-purple-100","border-t-purple-200","border-t-purple-300","border-t-purple-400","border-t-purple-500","border-t-purple-600","border-t-purple-700","border-t-purple-800","border-t-purple-900","border-t-fuchsia-50","border-t-fuchsia-100","border-t-fuchsia-200","border-t-fuchsia-300","border-t-fuchsia-400","border-t-fuchsia-500","border-t-fuchsia-600","border-t-fuchsia-700","border-t-fuchsia-800","border-t-fuchsia-900","border-t-pink-50","border-t-pink-100","border-t-pink-200","border-t-pink-300","border-t-pink-400","border-t-pink-500","border-t-pink-600","border-t-pink-700","border-t-pink-800","border-t-pink-900","border-t-rose-50","border-t-rose-100","border-t-rose-200","border-t-rose-300","border-t-rose-400","border-t-rose-500","border-t-rose-600","border-t-rose-700","border-t-rose-800","border-t-rose-900","border-r-inherit","border-r-current","border-r-transparent","border-r-black","border-r-white","border-r-slate-50","border-r-slate-100","border-r-slate-200","border-r-slate-300","border-r-slate-400","border-r-slate-500","border-r-slate-600","border-r-slate-700","border-r-slate-800","border-r-slate-900","border-r-gray-50","border-r-gray-100","border-r-gray-200","border-r-gray-300","border-r-gray-400","border-r-gray-500","border-r-gray-600","border-r-gray-700","border-r-gray-800","border-r-gray-900","border-r-zinc-50","border-r-zinc-100","border-r-zinc-200","border-r-zinc-300","border-r-zinc-400","border-r-zinc-500","border-r-zinc-600","border-r-zinc-700","border-r-zinc-800","border-r-zinc-900","border-r-neutral-50","border-r-neutral-100","border-r-neutral-200","border-r-neutral-300","border-r-neutral-400","border-r-neutral-500","border-r-neutral-600","border-r-neutral-700","border-r-neutral-800","border-r-neutral-900","border-r-stone-50","border-r-stone-100","border-r-stone-200","border-r-stone-300","border-r-stone-400","border-r-stone-500","border-r-stone-600","border-r-stone-700","border-r-stone-800","border-r-stone-900","border-r-red-50","border-r-red-100","border-r-red-200","border-r-red-300","border-r-red-400","border-r-red-500","border-r-red-600","border-r-red-700","border-r-red-800","border-r-red-900","border-r-orange-50","border-r-orange-100","border-r-orange-200","border-r-orange-300","border-r-orange-400","border-r-orange-500","border-r-orange-600","border-r-orange-700","border-r-orange-800","border-r-orange-900","border-r-amber-50","border-r-amber-100","border-r-amber-200","border-r-amber-300","border-r-amber-400","border-r-amber-500","border-r-amber-600","border-r-amber-700","border-r-amber-800","border-r-amber-900","border-r-yellow-50","border-r-yellow-100","border-r-yellow-200","border-r-yellow-300","border-r-yellow-400","border-r-yellow-500","border-r-yellow-600","border-r-yellow-700","border-r-yellow-800","border-r-yellow-900","border-r-lime-50","border-r-lime-100","border-r-lime-200","border-r-lime-300","border-r-lime-400","border-r-lime-500","border-r-lime-600","border-r-lime-700","border-r-lime-800","border-r-lime-900","border-r-green-50","border-r-green-100","border-r-green-200","border-r-green-300","border-r-green-400","border-r-green-500","border-r-green-600","border-r-green-700","border-r-green-800","border-r-green-900","border-r-emerald-50","border-r-emerald-100","border-r-emerald-200","border-r-emerald-300","border-r-emerald-400","border-r-emerald-500","border-r-emerald-600","border-r-emerald-700","border-r-emerald-800","border-r-emerald-900","border-r-teal-50","border-r-teal-100","border-r-teal-200","border-r-teal-300","border-r-teal-400","border-r-teal-500","border-r-teal-600","border-r-teal-700","border-r-teal-800","border-r-teal-900","border-r-cyan-50","border-r-cyan-100","border-r-cyan-200","border-r-cyan-300","border-r-cyan-400","border-r-cyan-500","border-r-cyan-600","border-r-cyan-700","border-r-cyan-800","border-r-cyan-900","border-r-sky-50","border-r-sky-100","border-r-sky-200","border-r-sky-300","border-r-sky-400","border-r-sky-500","border-r-sky-600","border-r-sky-700","border-r-sky-800","border-r-sky-900","border-r-blue-50","border-r-blue-100","border-r-blue-200","border-r-blue-300","border-r-blue-400","border-r-blue-500","border-r-blue-600","border-r-blue-700","border-r-blue-800","border-r-blue-900","border-r-indigo-50","border-r-indigo-100","border-r-indigo-200","border-r-indigo-300","border-r-indigo-400","border-r-indigo-500","border-r-indigo-600","border-r-indigo-700","border-r-indigo-800","border-r-indigo-900","border-r-violet-50","border-r-violet-100","border-r-violet-200","border-r-violet-300","border-r-violet-400","border-r-violet-500","border-r-violet-600","border-r-violet-700","border-r-violet-800","border-r-violet-900","border-r-purple-50","border-r-purple-100","border-r-purple-200","border-r-purple-300","border-r-purple-400","border-r-purple-500","border-r-purple-600","border-r-purple-700","border-r-purple-800","border-r-purple-900","border-r-fuchsia-50","border-r-fuchsia-100","border-r-fuchsia-200","border-r-fuchsia-300","border-r-fuchsia-400","border-r-fuchsia-500","border-r-fuchsia-600","border-r-fuchsia-700","border-r-fuchsia-800","border-r-fuchsia-900","border-r-pink-50","border-r-pink-100","border-r-pink-200","border-r-pink-300","border-r-pink-400","border-r-pink-500","border-r-pink-600","border-r-pink-700","border-r-pink-800","border-r-pink-900","border-r-rose-50","border-r-rose-100","border-r-rose-200","border-r-rose-300","border-r-rose-400","border-r-rose-500","border-r-rose-600","border-r-rose-700","border-r-rose-800","border-r-rose-900","border-b-inherit","border-b-current","border-b-transparent","border-b-black","border-b-white","border-b-slate-50","border-b-slate-100","border-b-slate-200","border-b-slate-300","border-b-slate-400","border-b-slate-500","border-b-slate-600","border-b-slate-700","border-b-slate-800","border-b-slate-900","border-b-gray-50","border-b-gray-100","border-b-gray-200","border-b-gray-300","border-b-gray-400","border-b-gray-500","border-b-gray-600","border-b-gray-700","border-b-gray-800","border-b-gray-900","border-b-zinc-50","border-b-zinc-100","border-b-zinc-200","border-b-zinc-300","border-b-zinc-400","border-b-zinc-500","border-b-zinc-600","border-b-zinc-700","border-b-zinc-800","border-b-zinc-900","border-b-neutral-50","border-b-neutral-100","border-b-neutral-200","border-b-neutral-300","border-b-neutral-400","border-b-neutral-500","border-b-neutral-600","border-b-neutral-700","border-b-neutral-800","border-b-neutral-900","border-b-stone-50","border-b-stone-100","border-b-stone-200","border-b-stone-300","border-b-stone-400","border-b-stone-500","border-b-stone-600","border-b-stone-700","border-b-stone-800","border-b-stone-900","border-b-red-50","border-b-red-100","border-b-red-200","border-b-red-300","border-b-red-400","border-b-red-500","border-b-red-600","border-b-red-700","border-b-red-800","border-b-red-900","border-b-orange-50","border-b-orange-100","border-b-orange-200","border-b-orange-300","border-b-orange-400","border-b-orange-500","border-b-orange-600","border-b-orange-700","border-b-orange-800","border-b-orange-900","border-b-amber-50","border-b-amber-100","border-b-amber-200","border-b-amber-300","border-b-amber-400","border-b-amber-500","border-b-amber-600","border-b-amber-700","border-b-amber-800","border-b-amber-900","border-b-yellow-50","border-b-yellow-100","border-b-yellow-200","border-b-yellow-300","border-b-yellow-400","border-b-yellow-500","border-b-yellow-600","border-b-yellow-700","border-b-yellow-800","border-b-yellow-900","border-b-lime-50","border-b-lime-100","border-b-lime-200","border-b-lime-300","border-b-lime-400","border-b-lime-500","border-b-lime-600","border-b-lime-700","border-b-lime-800","border-b-lime-900","border-b-green-50","border-b-green-100","border-b-green-200","border-b-green-300","border-b-green-400","border-b-green-500","border-b-green-600","border-b-green-700","border-b-green-800","border-b-green-900","border-b-emerald-50","border-b-emerald-100","border-b-emerald-200","border-b-emerald-300","border-b-emerald-400","border-b-emerald-500","border-b-emerald-600","border-b-emerald-700","border-b-emerald-800","border-b-emerald-900","border-b-teal-50","border-b-teal-100","border-b-teal-200","border-b-teal-300","border-b-teal-400","border-b-teal-500","border-b-teal-600","border-b-teal-700","border-b-teal-800","border-b-teal-900","border-b-cyan-50","border-b-cyan-100","border-b-cyan-200","border-b-cyan-300","border-b-cyan-400","border-b-cyan-500","border-b-cyan-600","border-b-cyan-700","border-b-cyan-800","border-b-cyan-900","border-b-sky-50","border-b-sky-100","border-b-sky-200","border-b-sky-300","border-b-sky-400","border-b-sky-500","border-b-sky-600","border-b-sky-700","border-b-sky-800","border-b-sky-900","border-b-blue-50","border-b-blue-100","border-b-blue-200","border-b-blue-300","border-b-blue-400","border-b-blue-500","border-b-blue-600","border-b-blue-700","border-b-blue-800","border-b-blue-900","border-b-indigo-50","border-b-indigo-100","border-b-indigo-200","border-b-indigo-300","border-b-indigo-400","border-b-indigo-500","border-b-indigo-600","border-b-indigo-700","border-b-indigo-800","border-b-indigo-900","border-b-violet-50","border-b-violet-100","border-b-violet-200","border-b-violet-300","border-b-violet-400","border-b-violet-500","border-b-violet-600","border-b-violet-700","border-b-violet-800","border-b-violet-900","border-b-purple-50","border-b-purple-100","border-b-purple-200","border-b-purple-300","border-b-purple-400","border-b-purple-500","border-b-purple-600","border-b-purple-700","border-b-purple-800","border-b-purple-900","border-b-fuchsia-50","border-b-fuchsia-100","border-b-fuchsia-200","border-b-fuchsia-300","border-b-fuchsia-400","border-b-fuchsia-500","border-b-fuchsia-600","border-b-fuchsia-700","border-b-fuchsia-800","border-b-fuchsia-900","border-b-pink-50","border-b-pink-100","border-b-pink-200","border-b-pink-300","border-b-pink-400","border-b-pink-500","border-b-pink-600","border-b-pink-700","border-b-pink-800","border-b-pink-900","border-b-rose-50","border-b-rose-100","border-b-rose-200","border-b-rose-300","border-b-rose-400","border-b-rose-500","border-b-rose-600","border-b-rose-700","border-b-rose-800","border-b-rose-900","border-l-inherit","border-l-current","border-l-transparent","border-l-black","border-l-white","border-l-slate-50","border-l-slate-100","border-l-slate-200","border-l-slate-300","border-l-slate-400","border-l-slate-500","border-l-slate-600","border-l-slate-700","border-l-slate-800","border-l-slate-900","border-l-gray-50","border-l-gray-100","border-l-gray-200","border-l-gray-300","border-l-gray-400","border-l-gray-500","border-l-gray-600","border-l-gray-700","border-l-gray-800","border-l-gray-900","border-l-zinc-50","border-l-zinc-100","border-l-zinc-200","border-l-zinc-300","border-l-zinc-400","border-l-zinc-500","border-l-zinc-600","border-l-zinc-700","border-l-zinc-800","border-l-zinc-900","border-l-neutral-50","border-l-neutral-100","border-l-neutral-200","border-l-neutral-300","border-l-neutral-400","border-l-neutral-500","border-l-neutral-600","border-l-neutral-700","border-l-neutral-800","border-l-neutral-900","border-l-stone-50","border-l-stone-100","border-l-stone-200","border-l-stone-300","border-l-stone-400","border-l-stone-500","border-l-stone-600","border-l-stone-700","border-l-stone-800","border-l-stone-900","border-l-red-50","border-l-red-100","border-l-red-200","border-l-red-300","border-l-red-400","border-l-red-500","border-l-red-600","border-l-red-700","border-l-red-800","border-l-red-900","border-l-orange-50","border-l-orange-100","border-l-orange-200","border-l-orange-300","border-l-orange-400","border-l-orange-500","border-l-orange-600","border-l-orange-700","border-l-orange-800","border-l-orange-900","border-l-amber-50","border-l-amber-100","border-l-amber-200","border-l-amber-300","border-l-amber-400","border-l-amber-500","border-l-amber-600","border-l-amber-700","border-l-amber-800","border-l-amber-900","border-l-yellow-50","border-l-yellow-100","border-l-yellow-200","border-l-yellow-300","border-l-yellow-400","border-l-yellow-500","border-l-yellow-600","border-l-yellow-700","border-l-yellow-800","border-l-yellow-900","border-l-lime-50","border-l-lime-100","border-l-lime-200","border-l-lime-300","border-l-lime-400","border-l-lime-500","border-l-lime-600","border-l-lime-700","border-l-lime-800","border-l-lime-900","border-l-green-50","border-l-green-100","border-l-green-200","border-l-green-300","border-l-green-400","border-l-green-500","border-l-green-600","border-l-green-700","border-l-green-800","border-l-green-900","border-l-emerald-50","border-l-emerald-100","border-l-emerald-200","border-l-emerald-300","border-l-emerald-400","border-l-emerald-500","border-l-emerald-600","border-l-emerald-700","border-l-emerald-800","border-l-emerald-900","border-l-teal-50","border-l-teal-100","border-l-teal-200","border-l-teal-300","border-l-teal-400","border-l-teal-500","border-l-teal-600","border-l-teal-700","border-l-teal-800","border-l-teal-900","border-l-cyan-50","border-l-cyan-100","border-l-cyan-200","border-l-cyan-300","border-l-cyan-400","border-l-cyan-500","border-l-cyan-600","border-l-cyan-700","border-l-cyan-800","border-l-cyan-900","border-l-sky-50","border-l-sky-100","border-l-sky-200","border-l-sky-300","border-l-sky-400","border-l-sky-500","border-l-sky-600","border-l-sky-700","border-l-sky-800","border-l-sky-900","border-l-blue-50","border-l-blue-100","border-l-blue-200","border-l-blue-300","border-l-blue-400","border-l-blue-500","border-l-blue-600","border-l-blue-700","border-l-blue-800","border-l-blue-900","border-l-indigo-50","border-l-indigo-100","border-l-indigo-200","border-l-indigo-300","border-l-indigo-400","border-l-indigo-500","border-l-indigo-600","border-l-indigo-700","border-l-indigo-800","border-l-indigo-900","border-l-violet-50","border-l-violet-100","border-l-violet-200","border-l-violet-300","border-l-violet-400","border-l-violet-500","border-l-violet-600","border-l-violet-700","border-l-violet-800","border-l-violet-900","border-l-purple-50","border-l-purple-100","border-l-purple-200","border-l-purple-300","border-l-purple-400","border-l-purple-500","border-l-purple-600","border-l-purple-700","border-l-purple-800","border-l-purple-900","border-l-fuchsia-50","border-l-fuchsia-100","border-l-fuchsia-200","border-l-fuchsia-300","border-l-fuchsia-400","border-l-fuchsia-500","border-l-fuchsia-600","border-l-fuchsia-700","border-l-fuchsia-800","border-l-fuchsia-900","border-l-pink-50","border-l-pink-100","border-l-pink-200","border-l-pink-300","border-l-pink-400","border-l-pink-500","border-l-pink-600","border-l-pink-700","border-l-pink-800","border-l-pink-900","border-l-rose-50","border-l-rose-100","border-l-rose-200","border-l-rose-300","border-l-rose-400","border-l-rose-500","border-l-rose-600","border-l-rose-700","border-l-rose-800","border-l-rose-900"]

BorderStyle = Literal["border-solid","border-dashed","border-dotted","border-double","border-hidden","border-none"]

DivideWidth = Literal["divide-x-0","divide-x-2","divide-x-4","divide-x-8","divide-x","divide-y-0","divide-y-2","divide-y-4","divide-y-8","divide-y","divide-y-reverse","divide-x-reverse"]

DivideColor = Literal["divide-inherit","divide-current","divide-transparent","divide-black","divide-white","divide-slate-50","divide-slate-100","divide-slate-200","divide-slate-300","divide-slate-400","divide-slate-500","divide-slate-600","divide-slate-700","divide-slate-800","divide-slate-900","divide-gray-50","divide-gray-100","divide-gray-200","divide-gray-300","divide-gray-400","divide-gray-500","divide-gray-600","divide-gray-700","divide-gray-800","divide-gray-900","divide-zinc-50","divide-zinc-100","divide-zinc-200","divide-zinc-300","divide-zinc-400","divide-zinc-500","divide-zinc-600","divide-zinc-700","divide-zinc-800","divide-zinc-900","divide-neutral-50","divide-neutral-100","divide-neutral-200","divide-neutral-300","divide-neutral-400","divide-neutral-500","divide-neutral-600","divide-neutral-700","divide-neutral-800","divide-neutral-900","divide-stone-50","divide-stone-100","divide-stone-200","divide-stone-300","divide-stone-400","divide-stone-500","divide-stone-600","divide-stone-700","divide-stone-800","divide-stone-900","divide-red-50","divide-red-100","divide-red-200","divide-red-300","divide-red-400","divide-red-500","divide-red-600","divide-red-700","divide-red-800","divide-red-900","divide-orange-50","divide-orange-100","divide-orange-200","divide-orange-300","divide-orange-400","divide-orange-500","divide-orange-600","divide-orange-700","divide-orange-800","divide-orange-900","divide-amber-50","divide-amber-100","divide-amber-200","divide-amber-300","divide-amber-400","divide-amber-500","divide-amber-600","divide-amber-700","divide-amber-800","divide-amber-900","divide-yellow-50","divide-yellow-100","divide-yellow-200","divide-yellow-300","divide-yellow-400","divide-yellow-500","divide-yellow-600","divide-yellow-700","divide-yellow-800","divide-yellow-900","divide-lime-50","divide-lime-100","divide-lime-200","divide-lime-300","divide-lime-400","divide-lime-500","divide-lime-600","divide-lime-700","divide-lime-800","divide-lime-900","divide-green-50","divide-green-100","divide-green-200","divide-green-300","divide-green-400","divide-green-500","divide-green-600","divide-green-700","divide-green-800","divide-green-900","divide-emerald-50","divide-emerald-100","divide-emerald-200","divide-emerald-300","divide-emerald-400","divide-emerald-500","divide-emerald-600","divide-emerald-700","divide-emerald-800","divide-emerald-900","divide-teal-50","divide-teal-100","divide-teal-200","divide-teal-300","divide-teal-400","divide-teal-500","divide-teal-600","divide-teal-700","divide-teal-800","divide-teal-900","divide-cyan-50","divide-cyan-100","divide-cyan-200","divide-cyan-300","divide-cyan-400","divide-cyan-500","divide-cyan-600","divide-cyan-700","divide-cyan-800","divide-cyan-900","divide-sky-50","divide-sky-100","divide-sky-200","divide-sky-300","divide-sky-400","divide-sky-500","divide-sky-600","divide-sky-700","divide-sky-800","divide-sky-900","divide-blue-50","divide-blue-100","divide-blue-200","divide-blue-300","divide-blue-400","divide-blue-500","divide-blue-600","divide-blue-700","divide-blue-800","divide-blue-900","divide-indigo-50","divide-indigo-100","divide-indigo-200","divide-indigo-300","divide-indigo-400","divide-indigo-500","divide-indigo-600","divide-indigo-700","divide-indigo-800","divide-indigo-900","divide-violet-50","divide-violet-100","divide-violet-200","divide-violet-300","divide-violet-400","divide-violet-500","divide-violet-600","divide-violet-700","divide-violet-800","divide-violet-900","divide-purple-50","divide-purple-100","divide-purple-200","divide-purple-300","divide-purple-400","divide-purple-500","divide-purple-600","divide-purple-700","divide-purple-800","divide-purple-900","divide-fuchsia-50","divide-fuchsia-100","divide-fuchsia-200","divide-fuchsia-300","divide-fuchsia-400","divide-fuchsia-500","divide-fuchsia-600","divide-fuchsia-700","divide-fuchsia-800","divide-fuchsia-900","divide-pink-50","divide-pink-100","divide-pink-200","divide-pink-300","divide-pink-400","divide-pink-500","divide-pink-600","divide-pink-700","divide-pink-800","divide-pink-900","divide-rose-50","divide-rose-100","divide-rose-200","divide-rose-300","divide-rose-400","divide-rose-500","divide-rose-600","divide-rose-700","divide-rose-800","divide-rose-900"]

DivideStyle = Literal["divide-solid","divide-dashed","divide-dotted","divide-double","divide-none"]

OutlineWidth = Literal["outline-0","outline-1","outline-2","outline-4","outline-8"]

OutlineColor = Literal["outline-inherit","outline-current","outline-transparent","outline-black","outline-white","outline-slate-50","outline-slate-100","outline-slate-200","outline-slate-300","outline-slate-400","outline-slate-500","outline-slate-600","outline-slate-700","outline-slate-800","outline-slate-900","outline-gray-50","outline-gray-100","outline-gray-200","outline-gray-300","outline-gray-400","outline-gray-500","outline-gray-600","outline-gray-700","outline-gray-800","outline-gray-900","outline-zinc-50","outline-zinc-100","outline-zinc-200","outline-zinc-300","outline-zinc-400","outline-zinc-500","outline-zinc-600","outline-zinc-700","outline-zinc-800","outline-zinc-900","outline-neutral-50","outline-neutral-100","outline-neutral-200","outline-neutral-300","outline-neutral-400","outline-neutral-500","outline-neutral-600","outline-neutral-700","outline-neutral-800","outline-neutral-900","outline-stone-50","outline-stone-100","outline-stone-200","outline-stone-300","outline-stone-400","outline-stone-500","outline-stone-600","outline-stone-700","outline-stone-800","outline-stone-900","outline-red-50","outline-red-100","outline-red-200","outline-red-300","outline-red-400","outline-red-500","outline-red-600","outline-red-700","outline-red-800","outline-red-900","outline-orange-50","outline-orange-100","outline-orange-200","outline-orange-300","outline-orange-400","outline-orange-500","outline-orange-600","outline-orange-700","outline-orange-800","outline-orange-900","outline-amber-50","outline-amber-100","outline-amber-200","outline-amber-300","outline-amber-400","outline-amber-500","outline-amber-600","outline-amber-700","outline-amber-800","outline-amber-900","outline-yellow-50","outline-yellow-100","outline-yellow-200","outline-yellow-300","outline-yellow-400","outline-yellow-500","outline-yellow-600","outline-yellow-700","outline-yellow-800","outline-yellow-900","outline-lime-50","outline-lime-100","outline-lime-200","outline-lime-300","outline-lime-400","outline-lime-500","outline-lime-600","outline-lime-700","outline-lime-800","outline-lime-900","outline-green-50","outline-green-100","outline-green-200","outline-green-300","outline-green-400","outline-green-500","outline-green-600","outline-green-700","outline-green-800","outline-green-900","outline-emerald-50","outline-emerald-100","outline-emerald-200","outline-emerald-300","outline-emerald-400","outline-emerald-500","outline-emerald-600","outline-emerald-700","outline-emerald-800","outline-emerald-900","outline-teal-50","outline-teal-100","outline-teal-200","outline-teal-300","outline-teal-400","outline-teal-500","outline-teal-600","outline-teal-700","outline-teal-800","outline-teal-900","outline-cyan-50","outline-cyan-100","outline-cyan-200","outline-cyan-300","outline-cyan-400","outline-cyan-500","outline-cyan-600","outline-cyan-700","outline-cyan-800","outline-cyan-900","outline-sky-50","outline-sky-100","outline-sky-200","outline-sky-300","outline-sky-400","outline-sky-500","outline-sky-600","outline-sky-700","outline-sky-800","outline-sky-900","outline-blue-50","outline-blue-100","outline-blue-200","outline-blue-300","outline-blue-400","outline-blue-500","outline-blue-600","outline-blue-700","outline-blue-800","outline-blue-900","outline-indigo-50","outline-indigo-100","outline-indigo-200","outline-indigo-300","outline-indigo-400","outline-indigo-500","outline-indigo-600","outline-indigo-700","outline-indigo-800","outline-indigo-900","outline-violet-50","outline-violet-100","outline-violet-200","outline-violet-300","outline-violet-400","outline-violet-500","outline-violet-600","outline-violet-700","outline-violet-800","outline-violet-900","outline-purple-50","outline-purple-100","outline-purple-200","outline-purple-300","outline-purple-400","outline-purple-500","outline-purple-600","outline-purple-700","outline-purple-800","outline-purple-900","outline-fuchsia-50","outline-fuchsia-100","outline-fuchsia-200","outline-fuchsia-300","outline-fuchsia-400","outline-fuchsia-500","outline-fuchsia-600","outline-fuchsia-700","outline-fuchsia-800","outline-fuchsia-900","outline-pink-50","outline-pink-100","outline-pink-200","outline-pink-300","outline-pink-400","outline-pink-500","outline-pink-600","outline-pink-700","outline-pink-800","outline-pink-900","outline-rose-50","outline-rose-100","outline-rose-200","outline-rose-300","outline-rose-400","outline-rose-500","outline-rose-600","outline-rose-700","outline-rose-800","outline-rose-900"]

OutlineStyle = Literal["outline-none","outline","outline-dashed","outline-dotted","outline-double"]

OutlineOffset = Literal["outline-offset-0","outline-offset-1","outline-offset-2","outline-offset-4","outline-offset-8"]

RingWidth = Literal["ring-0","ring-1","ring-2","ring","ring-4","ring-8","ring-inset"]

RingColor = Literal["ring-inherit","ring-current","ring-transparent","ring-black","ring-white","ring-slate-50","ring-slate-100","ring-slate-200","ring-slate-300","ring-slate-400","ring-slate-500","ring-slate-600","ring-slate-700","ring-slate-800","ring-slate-900","ring-gray-50","ring-gray-100","ring-gray-200","ring-gray-300","ring-gray-400","ring-gray-500","ring-gray-600","ring-gray-700","ring-gray-800","ring-gray-900","ring-zinc-50","ring-zinc-100","ring-zinc-200","ring-zinc-300","ring-zinc-400","ring-zinc-500","ring-zinc-600","ring-zinc-700","ring-zinc-800","ring-zinc-900","ring-neutral-50","ring-neutral-100","ring-neutral-200","ring-neutral-300","ring-neutral-400","ring-neutral-500","ring-neutral-600","ring-neutral-700","ring-neutral-800","ring-neutral-900","ring-stone-50","ring-stone-100","ring-stone-200","ring-stone-300","ring-stone-400","ring-stone-500","ring-stone-600","ring-stone-700","ring-stone-800","ring-stone-900","ring-red-50","ring-red-100","ring-red-200","ring-red-300","ring-red-400","ring-red-500","ring-red-600","ring-red-700","ring-red-800","ring-red-900","ring-orange-50","ring-orange-100","ring-orange-200","ring-orange-300","ring-orange-400","ring-orange-500","ring-orange-600","ring-orange-700","ring-orange-800","ring-orange-900","ring-amber-50","ring-amber-100","ring-amber-200","ring-amber-300","ring-amber-400","ring-amber-500","ring-amber-600","ring-amber-700","ring-amber-800","ring-amber-900","ring-yellow-50","ring-yellow-100","ring-yellow-200","ring-yellow-300","ring-yellow-400","ring-yellow-500","ring-yellow-600","ring-yellow-700","ring-yellow-800","ring-yellow-900","ring-lime-50","ring-lime-100","ring-lime-200","ring-lime-300","ring-lime-400","ring-lime-500","ring-lime-600","ring-lime-700","ring-lime-800","ring-lime-900","ring-green-50","ring-green-100","ring-green-200","ring-green-300","ring-green-400","ring-green-500","ring-green-600","ring-green-700","ring-green-800","ring-green-900","ring-emerald-50","ring-emerald-100","ring-emerald-200","ring-emerald-300","ring-emerald-400","ring-emerald-500","ring-emerald-600","ring-emerald-700","ring-emerald-800","ring-emerald-900","ring-teal-50","ring-teal-100","ring-teal-200","ring-teal-300","ring-teal-400","ring-teal-500","ring-teal-600","ring-teal-700","ring-teal-800","ring-teal-900","ring-cyan-50","ring-cyan-100","ring-cyan-200","ring-cyan-300","ring-cyan-400","ring-cyan-500","ring-cyan-600","ring-cyan-700","ring-cyan-800","ring-cyan-900","ring-sky-50","ring-sky-100","ring-sky-200","ring-sky-300","ring-sky-400","ring-sky-500","ring-sky-600","ring-sky-700","ring-sky-800","ring-sky-900","ring-blue-50","ring-blue-100","ring-blue-200","ring-blue-300","ring-blue-400","ring-blue-500","ring-blue-600","ring-blue-700","ring-blue-800","ring-blue-900","ring-indigo-50","ring-indigo-100","ring-indigo-200","ring-indigo-300","ring-indigo-400","ring-indigo-500","ring-indigo-600","ring-indigo-700","ring-indigo-800","ring-indigo-900","ring-violet-50","ring-violet-100","ring-violet-200","ring-violet-300","ring-violet-400","ring-violet-500","ring-violet-600","ring-violet-700","ring-violet-800","ring-violet-900","ring-purple-50","ring-purple-100","ring-purple-200","ring-purple-300","ring-purple-400","ring-purple-500","ring-purple-600","ring-purple-700","ring-purple-800","ring-purple-900","ring-fuchsia-50","ring-fuchsia-100","ring-fuchsia-200","ring-fuchsia-300","ring-fuchsia-400","ring-fuchsia-500","ring-fuchsia-600","ring-fuchsia-700","ring-fuchsia-800","ring-fuchsia-900","ring-pink-50","ring-pink-100","ring-pink-200","ring-pink-300","ring-pink-400","ring-pink-500","ring-pink-600","ring-pink-700","ring-pink-800","ring-pink-900","ring-rose-50","ring-rose-100","ring-rose-200","ring-rose-300","ring-rose-400","ring-rose-500","ring-rose-600","ring-rose-700","ring-rose-800","ring-rose-900"]

RingOffsetWidth = Literal["ring-offset-0","ring-offset-1","ring-offset-2","ring-offset-4","ring-offset-8"]

RingOffsetColor = Literal["ring-offset-inherit","ring-offset-current","ring-offset-transparent","ring-offset-black","ring-offset-white","ring-offset-slate-50","ring-offset-slate-100","ring-offset-slate-200","ring-offset-slate-300","ring-offset-slate-400","ring-offset-slate-500","ring-offset-slate-600","ring-offset-slate-700","ring-offset-slate-800","ring-offset-slate-900","ring-offset-gray-50","ring-offset-gray-100","ring-offset-gray-200","ring-offset-gray-300","ring-offset-gray-400","ring-offset-gray-500","ring-offset-gray-600","ring-offset-gray-700","ring-offset-gray-800","ring-offset-gray-900","ring-offset-zinc-50","ring-offset-zinc-100","ring-offset-zinc-200","ring-offset-zinc-300","ring-offset-zinc-400","ring-offset-zinc-500","ring-offset-zinc-600","ring-offset-zinc-700","ring-offset-zinc-800","ring-offset-zinc-900","ring-offset-neutral-50","ring-offset-neutral-100","ring-offset-neutral-200","ring-offset-neutral-300","ring-offset-neutral-400","ring-offset-neutral-500","ring-offset-neutral-600","ring-offset-neutral-700","ring-offset-neutral-800","ring-offset-neutral-900","ring-offset-stone-50","ring-offset-stone-100","ring-offset-stone-200","ring-offset-stone-300","ring-offset-stone-400","ring-offset-stone-500","ring-offset-stone-600","ring-offset-stone-700","ring-offset-stone-800","ring-offset-stone-900","ring-offset-red-50","ring-offset-red-100","ring-offset-red-200","ring-offset-red-300","ring-offset-red-400","ring-offset-red-500","ring-offset-red-600","ring-offset-red-700","ring-offset-red-800","ring-offset-red-900","ring-offset-orange-50","ring-offset-orange-100","ring-offset-orange-200","ring-offset-orange-300","ring-offset-orange-400","ring-offset-orange-500","ring-offset-orange-600","ring-offset-orange-700","ring-offset-orange-800","ring-offset-orange-900","ring-offset-amber-50","ring-offset-amber-100","ring-offset-amber-200","ring-offset-amber-300","ring-offset-amber-400","ring-offset-amber-500","ring-offset-amber-600","ring-offset-amber-700","ring-offset-amber-800","ring-offset-amber-900","ring-offset-yellow-50","ring-offset-yellow-100","ring-offset-yellow-200","ring-offset-yellow-300","ring-offset-yellow-400","ring-offset-yellow-500","ring-offset-yellow-600","ring-offset-yellow-700","ring-offset-yellow-800","ring-offset-yellow-900","ring-offset-lime-50","ring-offset-lime-100","ring-offset-lime-200","ring-offset-lime-300","ring-offset-lime-400","ring-offset-lime-500","ring-offset-lime-600","ring-offset-lime-700","ring-offset-lime-800","ring-offset-lime-900","ring-offset-green-50","ring-offset-green-100","ring-offset-green-200","ring-offset-green-300","ring-offset-green-400","ring-offset-green-500","ring-offset-green-600","ring-offset-green-700","ring-offset-green-800","ring-offset-green-900","ring-offset-emerald-50","ring-offset-emerald-100","ring-offset-emerald-200","ring-offset-emerald-300","ring-offset-emerald-400","ring-offset-emerald-500","ring-offset-emerald-600","ring-offset-emerald-700","ring-offset-emerald-800","ring-offset-emerald-900","ring-offset-teal-50","ring-offset-teal-100","ring-offset-teal-200","ring-offset-teal-300","ring-offset-teal-400","ring-offset-teal-500","ring-offset-teal-600","ring-offset-teal-700","ring-offset-teal-800","ring-offset-teal-900","ring-offset-cyan-50","ring-offset-cyan-100","ring-offset-cyan-200","ring-offset-cyan-300","ring-offset-cyan-400","ring-offset-cyan-500","ring-offset-cyan-600","ring-offset-cyan-700","ring-offset-cyan-800","ring-offset-cyan-900","ring-offset-sky-50","ring-offset-sky-100","ring-offset-sky-200","ring-offset-sky-300","ring-offset-sky-400","ring-offset-sky-500","ring-offset-sky-600","ring-offset-sky-700","ring-offset-sky-800","ring-offset-sky-900","ring-offset-blue-50","ring-offset-blue-100","ring-offset-blue-200","ring-offset-blue-300","ring-offset-blue-400","ring-offset-blue-500","ring-offset-blue-600","ring-offset-blue-700","ring-offset-blue-800","ring-offset-blue-900","ring-offset-indigo-50","ring-offset-indigo-100","ring-offset-indigo-200","ring-offset-indigo-300","ring-offset-indigo-400","ring-offset-indigo-500","ring-offset-indigo-600","ring-offset-indigo-700","ring-offset-indigo-800","ring-offset-indigo-900","ring-offset-violet-50","ring-offset-violet-100","ring-offset-violet-200","ring-offset-violet-300","ring-offset-violet-400","ring-offset-violet-500","ring-offset-violet-600","ring-offset-violet-700","ring-offset-violet-800","ring-offset-violet-900","ring-offset-purple-50","ring-offset-purple-100","ring-offset-purple-200","ring-offset-purple-300","ring-offset-purple-400","ring-offset-purple-500","ring-offset-purple-600","ring-offset-purple-700","ring-offset-purple-800","ring-offset-purple-900","ring-offset-fuchsia-50","ring-offset-fuchsia-100","ring-offset-fuchsia-200","ring-offset-fuchsia-300","ring-offset-fuchsia-400","ring-offset-fuchsia-500","ring-offset-fuchsia-600","ring-offset-fuchsia-700","ring-offset-fuchsia-800","ring-offset-fuchsia-900","ring-offset-pink-50","ring-offset-pink-100","ring-offset-pink-200","ring-offset-pink-300","ring-offset-pink-400","ring-offset-pink-500","ring-offset-pink-600","ring-offset-pink-700","ring-offset-pink-800","ring-offset-pink-900","ring-offset-rose-50","ring-offset-rose-100","ring-offset-rose-200","ring-offset-rose-300","ring-offset-rose-400","ring-offset-rose-500","ring-offset-rose-600","ring-offset-rose-700","ring-offset-rose-800","ring-offset-rose-900"]


class Borders:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def border_radius(self, _radius: BorderRadius):
        """
        Utilities for controlling the border radius of an element.
        """
        self.__add(_radius)
        return self
        

    def border_width(self, _width: BorderWidth):
        """
        Utilities for controlling the width of an element's borders.
        """
        self.__add(_width)
        return self
        

    def border_color(self, _color: BorderColor):
        """
        Utilities for controlling the color of an element's borders.
        """
        self.__add(_color)
        return self
        

    def border_style(self, _style: BorderStyle):
        """
        Utilities for controlling the style of an element's borders.
        """
        self.__add(_style)
        return self
        

    def divide_width(self, _width: DivideWidth):
        """
        Utilities for controlling the border width between elements.
        """
        self.__add(_width)
        return self
        

    def divide_color(self, _color: DivideColor):
        """
        Utilities for controlling the border color between elements.
        """
        self.__add(_color)
        return self
        

    def divide_style(self, _style: DivideStyle):
        """
        Utilities for controlling the border style between elements.
        """
        self.__add(_style)
        return self
        

    def outline_width(self, _width: OutlineWidth):
        """
        Utilities for controlling the width of an element's outline.
        """
        self.__add(_width)
        return self
        

    def outline_color(self, _color: OutlineColor):
        """
        Utilities for controlling the color of an element's outline.
        """
        self.__add(_color)
        return self
        

    def outline_style(self, _style: OutlineStyle):
        """
        Utilities for controlling the style of an element's outline.
        """
        self.__add(_style)
        return self
        

    def outline_offset(self, _offset: OutlineOffset):
        """
        Utilities for controlling the offset of an element's outline.
        """
        self.__add(_offset)
        return self
        

    def ring_width(self, _width: RingWidth):
        """
        Utilities for creating outline rings with box-shadows.
        """
        self.__add(_width)
        return self
        

    def ring_color(self, _color: RingColor):
        """
        Utilities for setting the color of outline rings.
        """
        self.__add(_color)
        return self
        

    def ring_offset_width(self, _width: RingOffsetWidth):
        """
        Utilities for simulating an offset when adding outline rings.
        """
        self.__add(_width)
        return self
        

    def ring_offset_color(self, _color: RingOffsetColor):
        """
        Utilities for setting the color of outline ring offsets.
        """
        self.__add(_color)
        return self
        

Effects.py

from typing import Literal
from nicegui.element import Element

BoxShadow = Literal["shadow-sm","shadow","shadow-md","shadow-lg","shadow-xl","shadow-2xl","shadow-inner","shadow-none"]

BoxShadowColor = Literal["shadow-inherit","shadow-current","shadow-transparent","shadow-black","shadow-white","shadow-slate-50","shadow-slate-100","shadow-slate-200","shadow-slate-300","shadow-slate-400","shadow-slate-500","shadow-slate-600","shadow-slate-700","shadow-slate-800","shadow-slate-900","shadow-gray-50","shadow-gray-100","shadow-gray-200","shadow-gray-300","shadow-gray-400","shadow-gray-500","shadow-gray-600","shadow-gray-700","shadow-gray-800","shadow-gray-900","shadow-zinc-50","shadow-zinc-100","shadow-zinc-200","shadow-zinc-300","shadow-zinc-400","shadow-zinc-500","shadow-zinc-600","shadow-zinc-700","shadow-zinc-800","shadow-zinc-900","shadow-neutral-50","shadow-neutral-100","shadow-neutral-200","shadow-neutral-300","shadow-neutral-400","shadow-neutral-500","shadow-neutral-600","shadow-neutral-700","shadow-neutral-800","shadow-neutral-900","shadow-stone-50","shadow-stone-100","shadow-stone-200","shadow-stone-300","shadow-stone-400","shadow-stone-500","shadow-stone-600","shadow-stone-700","shadow-stone-800","shadow-stone-900","shadow-red-50","shadow-red-100","shadow-red-200","shadow-red-300","shadow-red-400","shadow-red-500","shadow-red-600","shadow-red-700","shadow-red-800","shadow-red-900","shadow-orange-50","shadow-orange-100","shadow-orange-200","shadow-orange-300","shadow-orange-400","shadow-orange-500","shadow-orange-600","shadow-orange-700","shadow-orange-800","shadow-orange-900","shadow-amber-50","shadow-amber-100","shadow-amber-200","shadow-amber-300","shadow-amber-400","shadow-amber-500","shadow-amber-600","shadow-amber-700","shadow-amber-800","shadow-amber-900","shadow-yellow-50","shadow-yellow-100","shadow-yellow-200","shadow-yellow-300","shadow-yellow-400","shadow-yellow-500","shadow-yellow-600","shadow-yellow-700","shadow-yellow-800","shadow-yellow-900","shadow-lime-50","shadow-lime-100","shadow-lime-200","shadow-lime-300","shadow-lime-400","shadow-lime-500","shadow-lime-600","shadow-lime-700","shadow-lime-800","shadow-lime-900","shadow-green-50","shadow-green-100","shadow-green-200","shadow-green-300","shadow-green-400","shadow-green-500","shadow-green-600","shadow-green-700","shadow-green-800","shadow-green-900","shadow-emerald-50","shadow-emerald-100","shadow-emerald-200","shadow-emerald-300","shadow-emerald-400","shadow-emerald-500","shadow-emerald-600","shadow-emerald-700","shadow-emerald-800","shadow-emerald-900","shadow-teal-50","shadow-teal-100","shadow-teal-200","shadow-teal-300","shadow-teal-400","shadow-teal-500","shadow-teal-600","shadow-teal-700","shadow-teal-800","shadow-teal-900","shadow-cyan-50","shadow-cyan-100","shadow-cyan-200","shadow-cyan-300","shadow-cyan-400","shadow-cyan-500","shadow-cyan-600","shadow-cyan-700","shadow-cyan-800","shadow-cyan-900","shadow-sky-50","shadow-sky-100","shadow-sky-200","shadow-sky-300","shadow-sky-400","shadow-sky-500","shadow-sky-600","shadow-sky-700","shadow-sky-800","shadow-sky-900","shadow-blue-50","shadow-blue-100","shadow-blue-200","shadow-blue-300","shadow-blue-400","shadow-blue-500","shadow-blue-600","shadow-blue-700","shadow-blue-800","shadow-blue-900","shadow-indigo-50","shadow-indigo-100","shadow-indigo-200","shadow-indigo-300","shadow-indigo-400","shadow-indigo-500","shadow-indigo-600","shadow-indigo-700","shadow-indigo-800","shadow-indigo-900","shadow-violet-50","shadow-violet-100","shadow-violet-200","shadow-violet-300","shadow-violet-400","shadow-violet-500","shadow-violet-600","shadow-violet-700","shadow-violet-800","shadow-violet-900","shadow-purple-50","shadow-purple-100","shadow-purple-200","shadow-purple-300","shadow-purple-400","shadow-purple-500","shadow-purple-600","shadow-purple-700","shadow-purple-800","shadow-purple-900","shadow-fuchsia-50","shadow-fuchsia-100","shadow-fuchsia-200","shadow-fuchsia-300","shadow-fuchsia-400","shadow-fuchsia-500","shadow-fuchsia-600","shadow-fuchsia-700","shadow-fuchsia-800","shadow-fuchsia-900","shadow-pink-50","shadow-pink-100","shadow-pink-200","shadow-pink-300","shadow-pink-400","shadow-pink-500","shadow-pink-600","shadow-pink-700","shadow-pink-800","shadow-pink-900","shadow-rose-50","shadow-rose-100","shadow-rose-200","shadow-rose-300","shadow-rose-400","shadow-rose-500","shadow-rose-600","shadow-rose-700","shadow-rose-800","shadow-rose-900"]

Opacity = Literal["opacity-0","opacity-5","opacity-10","opacity-20","opacity-25","opacity-30","opacity-40","opacity-50","opacity-60","opacity-70","opacity-75","opacity-80","opacity-90","opacity-95","opacity-100"]

MixBlendMode = Literal["mix-blend-normal","mix-blend-multiply","mix-blend-screen","mix-blend-overlay","mix-blend-darken","mix-blend-lighten","mix-blend-color-dodge","mix-blend-color-burn","mix-blend-hard-light","mix-blend-soft-light","mix-blend-difference","mix-blend-exclusion","mix-blend-hue","mix-blend-saturation","mix-blend-color","mix-blend-luminosity","mix-blend-plus-lighter"]

BackgroundBlendMode = Literal["bg-blend-normal","bg-blend-multiply","bg-blend-screen","bg-blend-overlay","bg-blend-darken","bg-blend-lighten","bg-blend-color-dodge","bg-blend-color-burn","bg-blend-hard-light","bg-blend-soft-light","bg-blend-difference","bg-blend-exclusion","bg-blend-hue","bg-blend-saturation","bg-blend-color","bg-blend-luminosity"]


class Effects:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def box_shadow(self, _shadow: BoxShadow):
        """
        Utilities for controlling the box shadow of an element.
        """
        self.__add(_shadow)
        return self
        

    def box_shadow_color(self, _color: BoxShadowColor):
        """
        Utilities for controlling the color of a box shadow.
        """
        self.__add(_color)
        return self
        

    def opacity(self, _opacity: Opacity):
        """
        Utilities for controlling the opacity of an element.
        """
        self.__add(_opacity)
        return self
        

    def mix_blend_mode(self, _mode: MixBlendMode):
        """
        Utilities for controlling how an element should blend with the background.
        """
        self.__add(_mode)
        return self
        

    def background_blend_mode(self, _mode: BackgroundBlendMode):
        """
        Utilities for controlling how an element's background image should blend with its background color.
        """
        self.__add(_mode)
        return self
        

Filters.py

from typing import Literal
from nicegui.element import Element

Blur = Literal["blur-none","blur-sm","blur","blur-md","blur-lg","blur-xl","blur-2xl","blur-3xl"]

Brightness = Literal["brightness-0","brightness-50","brightness-75","brightness-90","brightness-95","brightness-100","brightness-105","brightness-110","brightness-125","brightness-150","brightness-200"]

Contrast = Literal["contrast-0","contrast-50","contrast-75","contrast-100","contrast-125","contrast-150","contrast-200"]

DropShadow = Literal["drop-shadow-sm","drop-shadow","drop-shadow-md","drop-shadow-lg","drop-shadow-xl","drop-shadow-2xl","drop-shadow-none"]

Grayscale = Literal["grayscale-0","grayscale"]

HueRotate = Literal["hue-rotate-0","hue-rotate-15","hue-rotate-30","hue-rotate-60","hue-rotate-90","hue-rotate-180"]

Invert = Literal["invert-0","invert"]

Saturate = Literal["saturate-0","saturate-50","saturate-100","saturate-150","saturate-200"]

Sepia = Literal["sepia-0","sepia"]

BackdropBlur = Literal["backdrop-blur-none","backdrop-blur-sm","backdrop-blur","backdrop-blur-md","backdrop-blur-lg","backdrop-blur-xl","backdrop-blur-2xl","backdrop-blur-3xl"]

BackdropBrightness = Literal["backdrop-brightness-0","backdrop-brightness-50","backdrop-brightness-75","backdrop-brightness-90","backdrop-brightness-95","backdrop-brightness-100","backdrop-brightness-105","backdrop-brightness-110","backdrop-brightness-125","backdrop-brightness-150","backdrop-brightness-200"]

BackdropContrast = Literal["backdrop-contrast-0","backdrop-contrast-50","backdrop-contrast-75","backdrop-contrast-100","backdrop-contrast-125","backdrop-contrast-150","backdrop-contrast-200"]

BackdropGrayscale = Literal["backdrop-grayscale-0","backdrop-grayscale"]

BackdropHueRotate = Literal["backdrop-hue-rotate-0","backdrop-hue-rotate-15","backdrop-hue-rotate-30","backdrop-hue-rotate-60","backdrop-hue-rotate-90","backdrop-hue-rotate-180"]

BackdropInvert = Literal["backdrop-invert-0","backdrop-invert"]

BackdropOpacity = Literal["backdrop-opacity-0","backdrop-opacity-5","backdrop-opacity-10","backdrop-opacity-20","backdrop-opacity-25","backdrop-opacity-30","backdrop-opacity-40","backdrop-opacity-50","backdrop-opacity-60","backdrop-opacity-70","backdrop-opacity-75","backdrop-opacity-80","backdrop-opacity-90","backdrop-opacity-95","backdrop-opacity-100"]

BackdropSaturate = Literal["backdrop-saturate-0","backdrop-saturate-50","backdrop-saturate-100","backdrop-saturate-150","backdrop-saturate-200"]

BackdropSepia = Literal["backdrop-sepia-0","backdrop-sepia"]


class Filters:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def blur(self, _blur: Blur):
        """
        Utilities for applying blur filters to an element.
        """
        self.__add(_blur)
        return self
        

    def brightness(self, _brightness: Brightness):
        """
        Utilities for applying brightness filters to an element.
        """
        self.__add(_brightness)
        return self
        

    def contrast(self, _contrast: Contrast):
        """
        Utilities for applying contrast filters to an element.
        """
        self.__add(_contrast)
        return self
        

    def drop_shadow(self, _shadow: DropShadow):
        """
        Utilities for applying drop-shadow filters to an element.
        """
        self.__add(_shadow)
        return self
        

    def grayscale(self, _grayscale: Grayscale):
        """
        Utilities for applying grayscale filters to an element.
        """
        self.__add(_grayscale)
        return self
        

    def hue_rotate(self, _rotate: HueRotate):
        """
        Utilities for applying hue-rotate filters to an element.
        """
        self.__add(_rotate)
        return self
        

    def invert(self, _invert: Invert):
        """
        Utilities for applying invert filters to an element.
        """
        self.__add(_invert)
        return self
        

    def saturate(self, _saturate: Saturate):
        """
        Utilities for applying saturation filters to an element.
        """
        self.__add(_saturate)
        return self
        

    def sepia(self, _sepia: Sepia):
        """
        Utilities for applying sepia filters to an element.
        """
        self.__add(_sepia)
        return self
        

    def backdrop_blur(self, _blur: BackdropBlur):
        """
        Utilities for applying backdrop blur filters to an element.
        """
        self.__add(_blur)
        return self
        

    def backdrop_brightness(self, _brightness: BackdropBrightness):
        """
        Utilities for applying backdrop brightness filters to an element.
        """
        self.__add(_brightness)
        return self
        

    def backdrop_contrast(self, _contrast: BackdropContrast):
        """
        Utilities for applying backdrop contrast filters to an element.
        """
        self.__add(_contrast)
        return self
        

    def backdrop_grayscale(self, _grayscale: BackdropGrayscale):
        """
        Utilities for applying backdrop grayscale filters to an element.
        """
        self.__add(_grayscale)
        return self
        

    def backdrop_hue_rotate(self, _rotate: BackdropHueRotate):
        """
        Utilities for applying backdrop hue-rotate filters to an element.
        """
        self.__add(_rotate)
        return self
        

    def backdrop_invert(self, _invert: BackdropInvert):
        """
        Utilities for applying backdrop invert filters to an element.
        """
        self.__add(_invert)
        return self
        

    def backdrop_opacity(self, _opacity: BackdropOpacity):
        """
        Utilities for applying backdrop opacity filters to an element.
        """
        self.__add(_opacity)
        return self
        

    def backdrop_saturate(self, _saturate: BackdropSaturate):
        """
        Utilities for applying backdrop saturation filters to an element.
        """
        self.__add(_saturate)
        return self
        

    def backdrop_sepia(self, _sepia: BackdropSepia):
        """
        Utilities for applying backdrop sepia filters to an element.
        """
        self.__add(_sepia)
        return self
        

FlexboxGrid.py

from typing import Literal
from nicegui.element import Element

FlexBasis = Literal["basis-0","basis-1","basis-2","basis-3","basis-4","basis-5","basis-6","basis-7","basis-8","basis-9","basis-10","basis-11","basis-12","basis-14","basis-16","basis-20","basis-24","basis-28","basis-32","basis-36","basis-40","basis-44","basis-48","basis-52","basis-56","basis-60","basis-64","basis-72","basis-80","basis-96","basis-auto","basis-px","basis-0.5","basis-1.5","basis-2.5","basis-3.5","basis-1/2","basis-1/3","basis-2/3","basis-1/4","basis-2/4","basis-3/4","basis-1/5","basis-2/5","basis-3/5","basis-4/5","basis-1/6","basis-2/6","basis-3/6","basis-4/6","basis-5/6","basis-1/12","basis-2/12","basis-3/12","basis-4/12","basis-5/12","basis-6/12","basis-7/12","basis-8/12","basis-9/12","basis-10/12","basis-11/12","basis-full"]

FlexDirection = Literal["flex-row","flex-row-reverse","flex-col","flex-col-reverse"]

FlexWrap = Literal["flex-wrap","flex-wrap-reverse","flex-nowrap"]

Flex = Literal["flex-1","flex-auto","flex-initial","flex-none"]

FlexGrow = Literal["grow","grow-0"]

FlexShrink = Literal["shrink","shrink-0"]

Order = Literal["order-1","order-2","order-3","order-4","order-5","order-6","order-7","order-8","order-9","order-10","order-11","order-12","order-first","order-last","order-none"]

GridTemplateColumns = Literal["grid-cols-1","grid-cols-2","grid-cols-3","grid-cols-4","grid-cols-5","grid-cols-6","grid-cols-7","grid-cols-8","grid-cols-9","grid-cols-10","grid-cols-11","grid-cols-12","grid-cols-none"]

GridColumnStartEnd = Literal["col-auto","col-span-1","col-span-2","col-span-3","col-span-4","col-span-5","col-span-6","col-span-7","col-span-8","col-span-9","col-span-10","col-span-11","col-span-12","col-span-full","col-start-1","col-start-2","col-start-3","col-start-4","col-start-5","col-start-6","col-start-7","col-start-8","col-start-9","col-start-10","col-start-11","col-start-12","col-start-13","col-start-auto","col-end-1","col-end-2","col-end-3","col-end-4","col-end-5","col-end-6","col-end-7","col-end-8","col-end-9","col-end-10","col-end-11","col-end-12","col-end-13","col-end-auto"]

GridTemplateRows = Literal["grid-rows-1","grid-rows-2","grid-rows-3","grid-rows-4","grid-rows-5","grid-rows-6","grid-rows-none"]

GridRowStartEnd = Literal["row-auto","row-span-1","row-span-2","row-span-3","row-span-4","row-span-5","row-span-6","row-span-full","row-start-1","row-start-2","row-start-3","row-start-4","row-start-5","row-start-6","row-start-7","row-start-auto","row-end-1","row-end-2","row-end-3","row-end-4","row-end-5","row-end-6","row-end-7","row-end-auto"]

GridAutoFlow = Literal["grid-flow-row","grid-flow-col","grid-flow-dense","grid-flow-row-dense","grid-flow-col-dense"]

GridAutoColumns = Literal["auto-cols-auto","auto-cols-min","auto-cols-max","auto-cols-fr"]

GridAutoRows = Literal["auto-rows-auto","auto-rows-min","auto-rows-max","auto-rows-fr"]

Gap = Literal["gap-0","gap-x-0","gap-y-0","gap-px","gap-x-px","gap-y-px","gap-0.5","gap-x-0.5","gap-y-0.5","gap-1","gap-x-1","gap-y-1","gap-1.5","gap-x-1.5","gap-y-1.5","gap-2","gap-x-2","gap-y-2","gap-2.5","gap-x-2.5","gap-y-2.5","gap-3","gap-x-3","gap-y-3","gap-3.5","gap-x-3.5","gap-y-3.5","gap-4","gap-x-4","gap-y-4","gap-5","gap-x-5","gap-y-5","gap-6","gap-x-6","gap-y-6","gap-7","gap-x-7","gap-y-7","gap-8","gap-x-8","gap-y-8","gap-9","gap-x-9","gap-y-9","gap-10","gap-x-10","gap-y-10","gap-11","gap-x-11","gap-y-11","gap-12","gap-x-12","gap-y-12","gap-14","gap-x-14","gap-y-14","gap-16","gap-x-16","gap-y-16","gap-20","gap-x-20","gap-y-20","gap-24","gap-x-24","gap-y-24","gap-28","gap-x-28","gap-y-28","gap-32","gap-x-32","gap-y-32","gap-36","gap-x-36","gap-y-36","gap-40","gap-x-40","gap-y-40","gap-44","gap-x-44","gap-y-44","gap-48","gap-x-48","gap-y-48","gap-52","gap-x-52","gap-y-52","gap-56","gap-x-56","gap-y-56","gap-60","gap-x-60","gap-y-60","gap-64","gap-x-64","gap-y-64","gap-72","gap-x-72","gap-y-72","gap-80","gap-x-80","gap-y-80","gap-96","gap-x-96","gap-y-96"]

JustifyContent = Literal["justify-start","justify-end","justify-center","justify-between","justify-around","justify-evenly"]

JustifyItems = Literal["justify-items-start","justify-items-end","justify-items-center","justify-items-stretch"]

JustifySelf = Literal["justify-self-auto","justify-self-start","justify-self-end","justify-self-center","justify-self-stretch"]

AlignContent = Literal["content-center","content-start","content-end","content-between","content-around","content-evenly","content-baseline"]

AlignItems = Literal["items-start","items-end","items-center","items-baseline","items-stretch"]

AlignSelf = Literal["self-auto","self-start","self-end","self-center","self-stretch","self-baseline"]

PlaceContent = Literal["place-content-center","place-content-start","place-content-end","place-content-between","place-content-around","place-content-evenly","place-content-baseline","place-content-stretch"]

PlaceItems = Literal["place-items-start","place-items-end","place-items-center","place-items-baseline","place-items-stretch"]

PlaceSelf = Literal["place-self-auto","place-self-start","place-self-end","place-self-center","place-self-stretch"]


class FlexboxGrid:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def flex_basis(self, _basis: FlexBasis):
        """
        Utilities for controlling the initial size of flex items.
        """
        self.__add(_basis)
        return self
        

    def flex_direction(self, _direction: FlexDirection):
        """
        Utilities for controlling the direction of flex items.
        """
        self.__add(_direction)
        return self
        

    def flex_wrap(self, _wrap: FlexWrap):
        """
        Utilities for controlling how flex items wrap.
        """
        self.__add(_wrap)
        return self
        

    def flex(self, _flex: Flex):
        """
        Utilities for controlling how flex items both grow and shrink.
        """
        self.__add(_flex)
        return self
        

    def flex_grow(self, _grow: FlexGrow):
        """
        Utilities for controlling how flex items grow.
        """
        self.__add(_grow)
        return self
        

    def flex_shrink(self, _shrink: FlexShrink):
        """
        Utilities for controlling how flex items shrink.
        """
        self.__add(_shrink)
        return self
        

    def order(self, _order: Order):
        """
        Utilities for controlling the order of flex and grid items.
        """
        self.__add(_order)
        return self
        

    def grid_template_columns(self, _columns: GridTemplateColumns):
        """
        Utilities for specifying the columns in a grid layout.
        """
        self.__add(_columns)
        return self
        

    def grid_column_startend(self, _end: GridColumnStartEnd):
        """
        Utilities for controlling how elements are sized and placed across grid columns.
        """
        self.__add(_end)
        return self
        

    def grid_template_rows(self, _rows: GridTemplateRows):
        """
        Utilities for specifying the rows in a grid layout.
        """
        self.__add(_rows)
        return self
        

    def grid_row_startend(self, _end: GridRowStartEnd):
        """
        Utilities for controlling how elements are sized and placed across grid rows.
        """
        self.__add(_end)
        return self
        

    def grid_auto_flow(self, _flow: GridAutoFlow):
        """
        Utilities for controlling how elements in a grid are auto-placed.
        """
        self.__add(_flow)
        return self
        

    def grid_auto_columns(self, _columns: GridAutoColumns):
        """
        Utilities for controlling the size of implicitly-created grid columns.
        """
        self.__add(_columns)
        return self
        

    def grid_auto_rows(self, _rows: GridAutoRows):
        """
        Utilities for controlling the size of implicitly-created grid rows.
        """
        self.__add(_rows)
        return self
        

    def gap(self, _gap: Gap):
        """
        Utilities for controlling gutters between grid and flexbox items.
        """
        self.__add(_gap)
        return self
        

    def justify_content(self, _content: JustifyContent):
        """
        Utilities for controlling how flex and grid items are positioned along a container's main axis.
        """
        self.__add(_content)
        return self
        

    def justify_items(self, _items: JustifyItems):
        """
        Utilities for controlling how grid items are aligned along their inline axis.
        """
        self.__add(_items)
        return self
        

    def justify_self(self, _self: JustifySelf):
        """
        Utilities for controlling how an individual grid item is aligned along its inline axis.
        """
        self.__add(_self)
        return self
        

    def align_content(self, _content: AlignContent):
        """
        Utilities for controlling how rows are positioned in multi-row flex and grid containers.
        """
        self.__add(_content)
        return self
        

    def align_items(self, _items: AlignItems):
        """
        Utilities for controlling how flex and grid items are positioned along a container's cross axis.
        """
        self.__add(_items)
        return self
        

    def align_self(self, _self: AlignSelf):
        """
        Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.
        """
        self.__add(_self)
        return self
        

    def place_content(self, _content: PlaceContent):
        """
        Utilities for controlling how content is justified and aligned at the same time.
        """
        self.__add(_content)
        return self
        

    def place_items(self, _items: PlaceItems):
        """
        Utilities for controlling how items are justified and aligned at the same time.
        """
        self.__add(_items)
        return self
        

    def place_self(self, _self: PlaceSelf):
        """
        Utilities for controlling how an individual item is justified and aligned at the same time.
        """
        self.__add(_self)
        return self
        

Interactivity.py

from typing import Literal
from nicegui.element import Element

AccentColor = Literal["accent-inherit","accent-current","accent-transparent","accent-black","accent-white","accent-slate-50","accent-slate-100","accent-slate-200","accent-slate-300","accent-slate-400","accent-slate-500","accent-slate-600","accent-slate-700","accent-slate-800","accent-slate-900","accent-gray-50","accent-gray-100","accent-gray-200","accent-gray-300","accent-gray-400","accent-gray-500","accent-gray-600","accent-gray-700","accent-gray-800","accent-gray-900","accent-zinc-50","accent-zinc-100","accent-zinc-200","accent-zinc-300","accent-zinc-400","accent-zinc-500","accent-zinc-600","accent-zinc-700","accent-zinc-800","accent-zinc-900","accent-neutral-50","accent-neutral-100","accent-neutral-200","accent-neutral-300","accent-neutral-400","accent-neutral-500","accent-neutral-600","accent-neutral-700","accent-neutral-800","accent-neutral-900","accent-stone-50","accent-stone-100","accent-stone-200","accent-stone-300","accent-stone-400","accent-stone-500","accent-stone-600","accent-stone-700","accent-stone-800","accent-stone-900","accent-red-50","accent-red-100","accent-red-200","accent-red-300","accent-red-400","accent-red-500","accent-red-600","accent-red-700","accent-red-800","accent-red-900","accent-orange-50","accent-orange-100","accent-orange-200","accent-orange-300","accent-orange-400","accent-orange-500","accent-orange-600","accent-orange-700","accent-orange-800","accent-orange-900","accent-amber-50","accent-amber-100","accent-amber-200","accent-amber-300","accent-amber-400","accent-amber-500","accent-amber-600","accent-amber-700","accent-amber-800","accent-amber-900","accent-yellow-50","accent-yellow-100","accent-yellow-200","accent-yellow-300","accent-yellow-400","accent-yellow-500","accent-yellow-600","accent-yellow-700","accent-yellow-800","accent-yellow-900","accent-lime-50","accent-lime-100","accent-lime-200","accent-lime-300","accent-lime-400","accent-lime-500","accent-lime-600","accent-lime-700","accent-lime-800","accent-lime-900","accent-green-50","accent-green-100","accent-green-200","accent-green-300","accent-green-400","accent-green-500","accent-green-600","accent-green-700","accent-green-800","accent-green-900","accent-emerald-50","accent-emerald-100","accent-emerald-200","accent-emerald-300","accent-emerald-400","accent-emerald-500","accent-emerald-600","accent-emerald-700","accent-emerald-800","accent-emerald-900","accent-teal-50","accent-teal-100","accent-teal-200","accent-teal-300","accent-teal-400","accent-teal-500","accent-teal-600","accent-teal-700","accent-teal-800","accent-teal-900","accent-cyan-50","accent-cyan-100","accent-cyan-200","accent-cyan-300","accent-cyan-400","accent-cyan-500","accent-cyan-600","accent-cyan-700","accent-cyan-800","accent-cyan-900","accent-sky-50","accent-sky-100","accent-sky-200","accent-sky-300","accent-sky-400","accent-sky-500","accent-sky-600","accent-sky-700","accent-sky-800","accent-sky-900","accent-blue-50","accent-blue-100","accent-blue-200","accent-blue-300","accent-blue-400","accent-blue-500","accent-blue-600","accent-blue-700","accent-blue-800","accent-blue-900","accent-indigo-50","accent-indigo-100","accent-indigo-200","accent-indigo-300","accent-indigo-400","accent-indigo-500","accent-indigo-600","accent-indigo-700","accent-indigo-800","accent-indigo-900","accent-violet-50","accent-violet-100","accent-violet-200","accent-violet-300","accent-violet-400","accent-violet-500","accent-violet-600","accent-violet-700","accent-violet-800","accent-violet-900","accent-purple-50","accent-purple-100","accent-purple-200","accent-purple-300","accent-purple-400","accent-purple-500","accent-purple-600","accent-purple-700","accent-purple-800","accent-purple-900","accent-fuchsia-50","accent-fuchsia-100","accent-fuchsia-200","accent-fuchsia-300","accent-fuchsia-400","accent-fuchsia-500","accent-fuchsia-600","accent-fuchsia-700","accent-fuchsia-800","accent-fuchsia-900","accent-pink-50","accent-pink-100","accent-pink-200","accent-pink-300","accent-pink-400","accent-pink-500","accent-pink-600","accent-pink-700","accent-pink-800","accent-pink-900","accent-rose-50","accent-rose-100","accent-rose-200","accent-rose-300","accent-rose-400","accent-rose-500","accent-rose-600","accent-rose-700","accent-rose-800","accent-rose-900","accent-auto"]

Appearance = Literal["appearance-none"]

Cursor = Literal["cursor-auto","cursor-default","cursor-pointer","cursor-wait","cursor-text","cursor-move","cursor-help","cursor-not-allowed","cursor-none","cursor-context-menu","cursor-progress","cursor-cell","cursor-crosshair","cursor-vertical-text","cursor-alias","cursor-copy","cursor-no-drop","cursor-grab","cursor-grabbing","cursor-all-scroll","cursor-col-resize","cursor-row-resize","cursor-n-resize","cursor-e-resize","cursor-s-resize","cursor-w-resize","cursor-ne-resize","cursor-nw-resize","cursor-se-resize","cursor-sw-resize","cursor-ew-resize","cursor-ns-resize","cursor-nesw-resize","cursor-nwse-resize","cursor-zoom-in","cursor-zoom-out"]

CaretColor = Literal["caret-inherit","caret-current","caret-transparent","caret-black","caret-white","caret-slate-50","caret-slate-100","caret-slate-200","caret-slate-300","caret-slate-400","caret-slate-500","caret-slate-600","caret-slate-700","caret-slate-800","caret-slate-900","caret-gray-50","caret-gray-100","caret-gray-200","caret-gray-300","caret-gray-400","caret-gray-500","caret-gray-600","caret-gray-700","caret-gray-800","caret-gray-900","caret-zinc-50","caret-zinc-100","caret-zinc-200","caret-zinc-300","caret-zinc-400","caret-zinc-500","caret-zinc-600","caret-zinc-700","caret-zinc-800","caret-zinc-900","caret-neutral-50","caret-neutral-100","caret-neutral-200","caret-neutral-300","caret-neutral-400","caret-neutral-500","caret-neutral-600","caret-neutral-700","caret-neutral-800","caret-neutral-900","caret-stone-50","caret-stone-100","caret-stone-200","caret-stone-300","caret-stone-400","caret-stone-500","caret-stone-600","caret-stone-700","caret-stone-800","caret-stone-900","caret-red-50","caret-red-100","caret-red-200","caret-red-300","caret-red-400","caret-red-500","caret-red-600","caret-red-700","caret-red-800","caret-red-900","caret-orange-50","caret-orange-100","caret-orange-200","caret-orange-300","caret-orange-400","caret-orange-500","caret-orange-600","caret-orange-700","caret-orange-800","caret-orange-900","caret-amber-50","caret-amber-100","caret-amber-200","caret-amber-300","caret-amber-400","caret-amber-500","caret-amber-600","caret-amber-700","caret-amber-800","caret-amber-900","caret-yellow-50","caret-yellow-100","caret-yellow-200","caret-yellow-300","caret-yellow-400","caret-yellow-500","caret-yellow-600","caret-yellow-700","caret-yellow-800","caret-yellow-900","caret-lime-50","caret-lime-100","caret-lime-200","caret-lime-300","caret-lime-400","caret-lime-500","caret-lime-600","caret-lime-700","caret-lime-800","caret-lime-900","caret-green-50","caret-green-100","caret-green-200","caret-green-300","caret-green-400","caret-green-500","caret-green-600","caret-green-700","caret-green-800","caret-green-900","caret-emerald-50","caret-emerald-100","caret-emerald-200","caret-emerald-300","caret-emerald-400","caret-emerald-500","caret-emerald-600","caret-emerald-700","caret-emerald-800","caret-emerald-900","caret-teal-50","caret-teal-100","caret-teal-200","caret-teal-300","caret-teal-400","caret-teal-500","caret-teal-600","caret-teal-700","caret-teal-800","caret-teal-900","caret-cyan-50","caret-cyan-100","caret-cyan-200","caret-cyan-300","caret-cyan-400","caret-cyan-500","caret-cyan-600","caret-cyan-700","caret-cyan-800","caret-cyan-900","caret-sky-50","caret-sky-100","caret-sky-200","caret-sky-300","caret-sky-400","caret-sky-500","caret-sky-600","caret-sky-700","caret-sky-800","caret-sky-900","caret-blue-50","caret-blue-100","caret-blue-200","caret-blue-300","caret-blue-400","caret-blue-500","caret-blue-600","caret-blue-700","caret-blue-800","caret-blue-900","caret-indigo-50","caret-indigo-100","caret-indigo-200","caret-indigo-300","caret-indigo-400","caret-indigo-500","caret-indigo-600","caret-indigo-700","caret-indigo-800","caret-indigo-900","caret-violet-50","caret-violet-100","caret-violet-200","caret-violet-300","caret-violet-400","caret-violet-500","caret-violet-600","caret-violet-700","caret-violet-800","caret-violet-900","caret-purple-50","caret-purple-100","caret-purple-200","caret-purple-300","caret-purple-400","caret-purple-500","caret-purple-600","caret-purple-700","caret-purple-800","caret-purple-900","caret-fuchsia-50","caret-fuchsia-100","caret-fuchsia-200","caret-fuchsia-300","caret-fuchsia-400","caret-fuchsia-500","caret-fuchsia-600","caret-fuchsia-700","caret-fuchsia-800","caret-fuchsia-900","caret-pink-50","caret-pink-100","caret-pink-200","caret-pink-300","caret-pink-400","caret-pink-500","caret-pink-600","caret-pink-700","caret-pink-800","caret-pink-900","caret-rose-50","caret-rose-100","caret-rose-200","caret-rose-300","caret-rose-400","caret-rose-500","caret-rose-600","caret-rose-700","caret-rose-800","caret-rose-900"]

PointerEvents = Literal["pointer-events-none","pointer-events-auto"]

Resize = Literal["resize-none","resize-y","resize-x","resize"]

ScrollBehavior = Literal["scroll-auto","scroll-smooth"]

ScrollMargin = Literal["scroll-m-0","scroll-mx-0","scroll-my-0","scroll-mt-0","scroll-mr-0","scroll-mb-0","scroll-ml-0","scroll-m-px","scroll-mx-px","scroll-my-px","scroll-mt-px","scroll-mr-px","scroll-mb-px","scroll-ml-px","scroll-m-0.5","scroll-mx-0.5","scroll-my-0.5","scroll-mt-0.5","scroll-mr-0.5","scroll-mb-0.5","scroll-ml-0.5","scroll-m-1","scroll-mx-1","scroll-my-1","scroll-mt-1","scroll-mr-1","scroll-mb-1","scroll-ml-1","scroll-m-1.5","scroll-mx-1.5","scroll-my-1.5","scroll-mt-1.5","scroll-mr-1.5","scroll-mb-1.5","scroll-ml-1.5","scroll-m-2","scroll-mx-2","scroll-my-2","scroll-mt-2","scroll-mr-2","scroll-mb-2","scroll-ml-2","scroll-m-2.5","scroll-mx-2.5","scroll-my-2.5","scroll-mt-2.5","scroll-mr-2.5","scroll-mb-2.5","scroll-ml-2.5","scroll-m-3","scroll-mx-3","scroll-my-3","scroll-mt-3","scroll-mr-3","scroll-mb-3","scroll-ml-3","scroll-m-3.5","scroll-mx-3.5","scroll-my-3.5","scroll-mt-3.5","scroll-mr-3.5","scroll-mb-3.5","scroll-ml-3.5","scroll-m-4","scroll-mx-4","scroll-my-4","scroll-mt-4","scroll-mr-4","scroll-mb-4","scroll-ml-4","scroll-m-5","scroll-mx-5","scroll-my-5","scroll-mt-5","scroll-mr-5","scroll-mb-5","scroll-ml-5","scroll-m-6","scroll-mx-6","scroll-my-6","scroll-mt-6","scroll-mr-6","scroll-mb-6","scroll-ml-6","scroll-m-7","scroll-mx-7","scroll-my-7","scroll-mt-7","scroll-mr-7","scroll-mb-7","scroll-ml-7","scroll-m-8","scroll-mx-8","scroll-my-8","scroll-mt-8","scroll-mr-8","scroll-mb-8","scroll-ml-8","scroll-m-9","scroll-mx-9","scroll-my-9","scroll-mt-9","scroll-mr-9","scroll-mb-9","scroll-ml-9","scroll-m-10","scroll-mx-10","scroll-my-10","scroll-mt-10","scroll-mr-10","scroll-mb-10","scroll-ml-10","scroll-m-11","scroll-mx-11","scroll-my-11","scroll-mt-11","scroll-mr-11","scroll-mb-11","scroll-ml-11","scroll-m-12","scroll-mx-12","scroll-my-12","scroll-mt-12","scroll-mr-12","scroll-mb-12","scroll-ml-12","scroll-m-14","scroll-mx-14","scroll-my-14","scroll-mt-14","scroll-mr-14","scroll-mb-14","scroll-ml-14","scroll-m-16","scroll-mx-16","scroll-my-16","scroll-mt-16","scroll-mr-16","scroll-mb-16","scroll-ml-16","scroll-m-20","scroll-mx-20","scroll-my-20","scroll-mt-20","scroll-mr-20","scroll-mb-20","scroll-ml-20","scroll-m-24","scroll-mx-24","scroll-my-24","scroll-mt-24","scroll-mr-24","scroll-mb-24","scroll-ml-24","scroll-m-28","scroll-mx-28","scroll-my-28","scroll-mt-28","scroll-mr-28","scroll-mb-28","scroll-ml-28","scroll-m-32","scroll-mx-32","scroll-my-32","scroll-mt-32","scroll-mr-32","scroll-mb-32","scroll-ml-32","scroll-m-36","scroll-mx-36","scroll-my-36","scroll-mt-36","scroll-mr-36","scroll-mb-36","scroll-ml-36","scroll-m-40","scroll-mx-40","scroll-my-40","scroll-mt-40","scroll-mr-40","scroll-mb-40","scroll-ml-40","scroll-m-44","scroll-mx-44","scroll-my-44","scroll-mt-44","scroll-mr-44","scroll-mb-44","scroll-ml-44","scroll-m-48","scroll-mx-48","scroll-my-48","scroll-mt-48","scroll-mr-48","scroll-mb-48","scroll-ml-48","scroll-m-52","scroll-mx-52","scroll-my-52","scroll-mt-52","scroll-mr-52","scroll-mb-52","scroll-ml-52","scroll-m-56","scroll-mx-56","scroll-my-56","scroll-mt-56","scroll-mr-56","scroll-mb-56","scroll-ml-56","scroll-m-60","scroll-mx-60","scroll-my-60","scroll-mt-60","scroll-mr-60","scroll-mb-60","scroll-ml-60","scroll-m-64","scroll-mx-64","scroll-my-64","scroll-mt-64","scroll-mr-64","scroll-mb-64","scroll-ml-64","scroll-m-72","scroll-mx-72","scroll-my-72","scroll-mt-72","scroll-mr-72","scroll-mb-72","scroll-ml-72","scroll-m-80","scroll-mx-80","scroll-my-80","scroll-mt-80","scroll-mr-80","scroll-mb-80","scroll-ml-80","scroll-m-96","scroll-mx-96","scroll-my-96","scroll-mt-96","scroll-mr-96","scroll-mb-96","scroll-ml-96"]

ScrollPadding = Literal["scroll-p-0","scroll-px-0","scroll-py-0","scroll-pt-0","scroll-pr-0","scroll-pb-0","scroll-pl-0","scroll-p-px","scroll-px-px","scroll-py-px","scroll-pt-px","scroll-pr-px","scroll-pb-px","scroll-pl-px","scroll-p-0.5","scroll-px-0.5","scroll-py-0.5","scroll-pt-0.5","scroll-pr-0.5","scroll-pb-0.5","scroll-pl-0.5","scroll-p-1","scroll-px-1","scroll-py-1","scroll-pt-1","scroll-pr-1","scroll-pb-1","scroll-pl-1","scroll-p-1.5","scroll-px-1.5","scroll-py-1.5","scroll-pt-1.5","scroll-pr-1.5","scroll-pb-1.5","scroll-pl-1.5","scroll-p-2","scroll-px-2","scroll-py-2","scroll-pt-2","scroll-pr-2","scroll-pb-2","scroll-pl-2","scroll-p-2.5","scroll-px-2.5","scroll-py-2.5","scroll-pt-2.5","scroll-pr-2.5","scroll-pb-2.5","scroll-pl-2.5","scroll-p-3","scroll-px-3","scroll-py-3","scroll-pt-3","scroll-pr-3","scroll-pb-3","scroll-pl-3","scroll-p-3.5","scroll-px-3.5","scroll-py-3.5","scroll-pt-3.5","scroll-pr-3.5","scroll-pb-3.5","scroll-pl-3.5","scroll-p-4","scroll-px-4","scroll-py-4","scroll-pt-4","scroll-pr-4","scroll-pb-4","scroll-pl-4","scroll-p-5","scroll-px-5","scroll-py-5","scroll-pt-5","scroll-pr-5","scroll-pb-5","scroll-pl-5","scroll-p-6","scroll-px-6","scroll-py-6","scroll-pt-6","scroll-pr-6","scroll-pb-6","scroll-pl-6","scroll-p-7","scroll-px-7","scroll-py-7","scroll-pt-7","scroll-pr-7","scroll-pb-7","scroll-pl-7","scroll-p-8","scroll-px-8","scroll-py-8","scroll-pt-8","scroll-pr-8","scroll-pb-8","scroll-pl-8","scroll-p-9","scroll-px-9","scroll-py-9","scroll-pt-9","scroll-pr-9","scroll-pb-9","scroll-pl-9","scroll-p-10","scroll-px-10","scroll-py-10","scroll-pt-10","scroll-pr-10","scroll-pb-10","scroll-pl-10","scroll-p-11","scroll-px-11","scroll-py-11","scroll-pt-11","scroll-pr-11","scroll-pb-11","scroll-pl-11","scroll-p-12","scroll-px-12","scroll-py-12","scroll-pt-12","scroll-pr-12","scroll-pb-12","scroll-pl-12","scroll-p-14","scroll-px-14","scroll-py-14","scroll-pt-14","scroll-pr-14","scroll-pb-14","scroll-pl-14","scroll-p-16","scroll-px-16","scroll-py-16","scroll-pt-16","scroll-pr-16","scroll-pb-16","scroll-pl-16","scroll-p-20","scroll-px-20","scroll-py-20","scroll-pt-20","scroll-pr-20","scroll-pb-20","scroll-pl-20","scroll-p-24","scroll-px-24","scroll-py-24","scroll-pt-24","scroll-pr-24","scroll-pb-24","scroll-pl-24","scroll-p-28","scroll-px-28","scroll-py-28","scroll-pt-28","scroll-pr-28","scroll-pb-28","scroll-pl-28","scroll-p-32","scroll-px-32","scroll-py-32","scroll-pt-32","scroll-pr-32","scroll-pb-32","scroll-pl-32","scroll-p-36","scroll-px-36","scroll-py-36","scroll-pt-36","scroll-pr-36","scroll-pb-36","scroll-pl-36","scroll-p-40","scroll-px-40","scroll-py-40","scroll-pt-40","scroll-pr-40","scroll-pb-40","scroll-pl-40","scroll-p-44","scroll-px-44","scroll-py-44","scroll-pt-44","scroll-pr-44","scroll-pb-44","scroll-pl-44","scroll-p-48","scroll-px-48","scroll-py-48","scroll-pt-48","scroll-pr-48","scroll-pb-48","scroll-pl-48","scroll-p-52","scroll-px-52","scroll-py-52","scroll-pt-52","scroll-pr-52","scroll-pb-52","scroll-pl-52","scroll-p-56","scroll-px-56","scroll-py-56","scroll-pt-56","scroll-pr-56","scroll-pb-56","scroll-pl-56","scroll-p-60","scroll-px-60","scroll-py-60","scroll-pt-60","scroll-pr-60","scroll-pb-60","scroll-pl-60","scroll-p-64","scroll-px-64","scroll-py-64","scroll-pt-64","scroll-pr-64","scroll-pb-64","scroll-pl-64","scroll-p-72","scroll-px-72","scroll-py-72","scroll-pt-72","scroll-pr-72","scroll-pb-72","scroll-pl-72","scroll-p-80","scroll-px-80","scroll-py-80","scroll-pt-80","scroll-pr-80","scroll-pb-80","scroll-pl-80","scroll-p-96","scroll-px-96","scroll-py-96","scroll-pt-96","scroll-pr-96","scroll-pb-96","scroll-pl-96"]

ScrollSnapAlign = Literal["snap-start","snap-end","snap-center","snap-align-none"]

ScrollSnapStop = Literal["snap-normal","snap-always"]

ScrollSnapType = Literal["snap-none","snap-x","snap-y","snap-both","snap-mandatory","snap-proximity"]

TouchAction = Literal["touch-auto","touch-none","touch-pan-x","touch-pan-left","touch-pan-right","touch-pan-y","touch-pan-up","touch-pan-down","touch-pinch-zoom","touch-manipulation"]

UserSelect = Literal["select-none","select-text","select-all","select-auto"]

WillChange = Literal["will-change-auto","will-change-scroll","will-change-contents","will-change-transform"]


class Interactivity:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def accent_color(self, _color: AccentColor):
        """
        Utilities for controlling the accented color of a form control.
        """
        self.__add(_color)
        return self
        

    def appearance(self, _appearance: Appearance):
        """
        Utilities for suppressing native form control styling.
        """
        self.__add(_appearance)
        return self
        

    def cursor(self, _cursor: Cursor):
        """
        Utilities for controlling the cursor style when hovering over an element.
        """
        self.__add(_cursor)
        return self
        

    def caret_color(self, _color: CaretColor):
        """
        Utilities for controlling the color of the text input cursor.
        """
        self.__add(_color)
        return self
        

    def pointer_events(self, _events: PointerEvents):
        """
        Utilities for controlling whether an element responds to pointer events.
        """
        self.__add(_events)
        return self
        

    def resize(self, _resize: Resize):
        """
        Utilities for controlling how an element can be resized.
        """
        self.__add(_resize)
        return self
        

    def scroll_behavior(self, _behavior: ScrollBehavior):
        """
        Utilities for controlling the scroll behavior of an element.
        """
        self.__add(_behavior)
        return self
        

    def scroll_margin(self, _margin: ScrollMargin):
        """
        Utilities for controlling the scroll offset around items in a snap container.
        """
        self.__add(_margin)
        return self
        

    def scroll_padding(self, _padding: ScrollPadding):
        """
        Utilities for controlling an element's scroll offset within a snap container.
        """
        self.__add(_padding)
        return self
        

    def scroll_snap_align(self, _align: ScrollSnapAlign):
        """
        Utilities for controlling the scroll snap alignment of an element.
        """
        self.__add(_align)
        return self
        

    def scroll_snap_stop(self, _stop: ScrollSnapStop):
        """
        Utilities for controlling whether you can skip past possible snap positions.
        """
        self.__add(_stop)
        return self
        

    def scroll_snap_type(self, _type: ScrollSnapType):
        """
        Utilities for controlling how strictly snap points are enforced in a snap container.
        """
        self.__add(_type)
        return self
        

    def touch_action(self, _action: TouchAction):
        """
        Utilities for controlling how an element can be scrolled and zoomed on touchscreens.
        """
        self.__add(_action)
        return self
        

    def user_select(self, _select: UserSelect):
        """
        Utilities for controlling whether the user can select text in an element.
        """
        self.__add(_select)
        return self
        

    def will_change(self, _change: WillChange):
        """
        Utilities for optimizing upcoming animations of elements that are expected to change.
        """
        self.__add(_change)
        return self
        

Layout.py

from typing import Literal
from nicegui.element import Element

AspectRatio = Literal["aspect-auto","aspect-square","aspect-video"]

Container = Literal["container"]

Columns = Literal["columns-1","columns-2","columns-3","columns-4","columns-5","columns-6","columns-7","columns-8","columns-9","columns-10","columns-11","columns-12","columns-auto","columns-3xs","columns-2xs","columns-xs","columns-sm","columns-md","columns-lg","columns-xl","columns-2xl","columns-3xl","columns-4xl","columns-5xl","columns-6xl","columns-7xl"]

BreakAfter = Literal["break-after-auto","break-after-avoid","break-after-all","break-after-avoid-page","break-after-page","break-after-left","break-after-right","break-after-column"]

BreakBefore = Literal["break-before-auto","break-before-avoid","break-before-all","break-before-avoid-page","break-before-page","break-before-left","break-before-right","break-before-column"]

BreakInside = Literal["break-inside-auto","break-inside-avoid","break-inside-avoid-page","break-inside-avoid-column"]

BoxDecorationBreak = Literal["box-decoration-clone","box-decoration-slice"]

BoxSizing = Literal["box-border","box-content"]

Display = Literal["block","inline-block","inline","flex","inline-flex","table","inline-table","table-caption","table-cell","table-column","table-column-group","table-footer-group","table-header-group","table-row-group","table-row","flow-root","grid","inline-grid","contents","list-item","hidden"]

Floats = Literal["float-right","float-left","float-none"]

Clear = Literal["clear-left","clear-right","clear-both","clear-none"]

Isolation = Literal["isolate","isolation-auto"]

ObjectFit = Literal["object-contain","object-cover","object-fill","object-none","object-scale-down"]

ObjectPosition = Literal["object-bottom","object-center","object-left","object-left-bottom","object-left-top","object-right","object-right-bottom","object-right-top","object-top"]

Overflow = Literal["overflow-auto","overflow-hidden","overflow-clip","overflow-visible","overflow-scroll","overflow-x-auto","overflow-y-auto","overflow-x-hidden","overflow-y-hidden","overflow-x-clip","overflow-y-clip","overflow-x-visible","overflow-y-visible","overflow-x-scroll","overflow-y-scroll"]

OverscrollBehavior = Literal["overscroll-auto","overscroll-contain","overscroll-none","overscroll-y-auto","overscroll-y-contain","overscroll-y-none","overscroll-x-auto","overscroll-x-contain","overscroll-x-none"]

Position = Literal["static","fixed","absolute","relative","sticky"]

TopRightBottomLeft = Literal["inset-0","inset-x-0","inset-y-0","top-0","right-0","bottom-0","left-0","inset-px","inset-x-px","inset-y-px","top-px","right-px","bottom-px","left-px","inset-0.5","inset-x-0.5","inset-y-0.5","top-0.5","right-0.5","bottom-0.5","left-0.5","inset-1","inset-x-1","inset-y-1","top-1","right-1","bottom-1","left-1","inset-1.5","inset-x-1.5","inset-y-1.5","top-1.5","right-1.5","bottom-1.5","left-1.5","inset-2","inset-x-2","inset-y-2","top-2","right-2","bottom-2","left-2","inset-2.5","inset-x-2.5","inset-y-2.5","top-2.5","right-2.5","bottom-2.5","left-2.5","inset-3","inset-x-3","inset-y-3","top-3","right-3","bottom-3","left-3","inset-3.5","inset-x-3.5","inset-y-3.5","top-3.5","right-3.5","bottom-3.5","left-3.5","inset-4","inset-x-4","inset-y-4","top-4","right-4","bottom-4","left-4","inset-5","inset-x-5","inset-y-5","top-5","right-5","bottom-5","left-5","inset-6","inset-x-6","inset-y-6","top-6","right-6","bottom-6","left-6","inset-7","inset-x-7","inset-y-7","top-7","right-7","bottom-7","left-7","inset-8","inset-x-8","inset-y-8","top-8","right-8","bottom-8","left-8","inset-9","inset-x-9","inset-y-9","top-9","right-9","bottom-9","left-9","inset-10","inset-x-10","inset-y-10","top-10","right-10","bottom-10","left-10","inset-11","inset-x-11","inset-y-11","top-11","right-11","bottom-11","left-11","inset-12","inset-x-12","inset-y-12","top-12","right-12","bottom-12","left-12","inset-14","inset-x-14","inset-y-14","top-14","right-14","bottom-14","left-14","inset-16","inset-x-16","inset-y-16","top-16","right-16","bottom-16","left-16","inset-20","inset-x-20","inset-y-20","top-20","right-20","bottom-20","left-20","inset-24","inset-x-24","inset-y-24","top-24","right-24","bottom-24","left-24","inset-28","inset-x-28","inset-y-28","top-28","right-28","bottom-28","left-28","inset-32","inset-x-32","inset-y-32","top-32","right-32","bottom-32","left-32","inset-36","inset-x-36","inset-y-36","top-36","right-36","bottom-36","left-36","inset-40","inset-x-40","inset-y-40","top-40","right-40","bottom-40","left-40","inset-44","inset-x-44","inset-y-44","top-44","right-44","bottom-44","left-44","inset-48","inset-x-48","inset-y-48","top-48","right-48","bottom-48","left-48","inset-52","inset-x-52","inset-y-52","top-52","right-52","bottom-52","left-52","inset-56","inset-x-56","inset-y-56","top-56","right-56","bottom-56","left-56","inset-60","inset-x-60","inset-y-60","top-60","right-60","bottom-60","left-60","inset-64","inset-x-64","inset-y-64","top-64","right-64","bottom-64","left-64","inset-72","inset-x-72","inset-y-72","top-72","right-72","bottom-72","left-72","inset-80","inset-x-80","inset-y-80","top-80","right-80","bottom-80","left-80","inset-96","inset-x-96","inset-y-96","top-96","right-96","bottom-96","left-96","inset-auto","inset-1/2","inset-1/3","inset-2/3","inset-1/4","inset-2/4","inset-3/4","inset-full","inset-x-auto","inset-x-1/2","inset-x-1/3","inset-x-2/3","inset-x-1/4","inset-x-2/4","inset-x-3/4","inset-x-full","inset-y-auto","inset-y-1/2","inset-y-1/3","inset-y-2/3","inset-y-1/4","inset-y-2/4","inset-y-3/4","inset-y-full","top-auto","top-1/2","top-1/3","top-2/3","top-1/4","top-2/4","top-3/4","top-full","right-auto","right-1/2","right-1/3","right-2/3","right-1/4","right-2/4","right-3/4","right-full","bottom-auto","bottom-1/2","bottom-1/3","bottom-2/3","bottom-1/4","bottom-2/4","bottom-3/4","bottom-full","left-auto","left-1/2","left-1/3","left-2/3","left-1/4","left-2/4","left-3/4","left-full"]

Visibility = Literal["visible","invisible","collapse"]

ZIndex = Literal["z-0","z-10","z-20","z-30","z-40","z-50","z-auto"]


class Layout:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def aspect_ratio(self, _ratio: AspectRatio):
        """
        Utilities for controlling the aspect ratio of an element.
        """
        self.__add(_ratio)
        return self
        

    def container(self, _container: Container):
        """
        A component for fixing an element's width to the current breakpoint.
        """
        self.__add(_container)
        return self
        

    def columns(self, _columns: Columns):
        """
        Utilities for controlling the number of columns within an element.
        """
        self.__add(_columns)
        return self
        

    def break_after(self, _after: BreakAfter):
        """
        Utilities for controlling how a column or page should break after an element.
        """
        self.__add(_after)
        return self
        

    def break_before(self, _before: BreakBefore):
        """
        Utilities for controlling how a column or page should break before an element.
        """
        self.__add(_before)
        return self
        

    def break_inside(self, _inside: BreakInside):
        """
        Utilities for controlling how a column or page should break within an element.
        """
        self.__add(_inside)
        return self
        

    def box_decoration_break(self, _break: BoxDecorationBreak):
        """
        Utilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.
        """
        self.__add(_break)
        return self
        

    def box_sizing(self, _sizing: BoxSizing):
        """
        Utilities for controlling how the browser should calculate an element's total size.
        """
        self.__add(_sizing)
        return self
        

    def display(self, _display: Display):
        """
        Utilities for controlling the display box type of an element.
        """
        self.__add(_display)
        return self
        

    def floats(self, _floats: Floats):
        """
        Utilities for controlling the wrapping of content around an element.
        """
        self.__add(_floats)
        return self
        

    def clear(self, _clear: Clear):
        """
        Utilities for controlling the wrapping of content around an element.
        """
        self.__add(_clear)
        return self
        

    def isolation(self, _isolation: Isolation):
        """
        Utilities for controlling whether an element should explicitly create a new stacking context.
        """
        self.__add(_isolation)
        return self
        

    def object_fit(self, _fit: ObjectFit):
        """
        Utilities for controlling how a replaced element's content should be resized.
        """
        self.__add(_fit)
        return self
        

    def object_position(self, _position: ObjectPosition):
        """
        Utilities for controlling how a replaced element's content should be positioned within its container.
        """
        self.__add(_position)
        return self
        

    def overflow(self, _overflow: Overflow):
        """
        Utilities for controlling how an element handles content that is too large for the container.
        """
        self.__add(_overflow)
        return self
        

    def overscroll_behavior(self, _behavior: OverscrollBehavior):
        """
        Utilities for controlling how the browser behaves when reaching the boundary of a scrolling area.
        """
        self.__add(_behavior)
        return self
        

    def position(self, _position: Position):
        """
        Utilities for controlling how an element is positioned in the DOM.
        """
        self.__add(_position)
        return self
        

    def toprightbottomleft(self, _left: TopRightBottomLeft):
        """
        Utilities for controlling the placement of positioned elements.
        """
        self.__add(_left)
        return self
        

    def visibility(self, _visibility: Visibility):
        """
        Utilities for controlling the visibility of an element.
        """
        self.__add(_visibility)
        return self
        

    def z_index(self, _z_index: ZIndex):
        """
        Utilities for controlling the stack order of an element.
        """
        self.__add(_z_index)
        return self
        

Sizing.py

from typing import Literal
from nicegui.element import Element

Width = Literal["w-0","w-px","w-0.5","w-1","w-1.5","w-2","w-2.5","w-3","w-3.5","w-4","w-5","w-6","w-7","w-8","w-9","w-10","w-11","w-12","w-14","w-16","w-20","w-24","w-28","w-32","w-36","w-40","w-44","w-48","w-52","w-56","w-60","w-64","w-72","w-80","w-96","w-auto","w-1/2","w-1/3","w-2/3","w-1/4","w-2/4","w-3/4","w-1/5","w-2/5","w-3/5","w-4/5","w-1/6","w-2/6","w-3/6","w-4/6","w-5/6","w-1/12","w-2/12","w-3/12","w-4/12","w-5/12","w-6/12","w-7/12","w-8/12","w-9/12","w-10/12","w-11/12","w-full","w-screen","w-min","w-max","w-fit"]

MinWidth = Literal["min-w-0","min-w-full","min-w-min","min-w-max","min-w-fit"]

MaxWidth = Literal["max-w-0","max-w-none","max-w-xs","max-w-sm","max-w-md","max-w-lg","max-w-xl","max-w-2xl","max-w-3xl","max-w-4xl","max-w-5xl","max-w-6xl","max-w-7xl","max-w-full","max-w-min","max-w-max","max-w-fit","max-w-prose","max-w-screen-sm","max-w-screen-md","max-w-screen-lg","max-w-screen-xl","max-w-screen-2xl"]

Height = Literal["h-0","h-px","h-0.5","h-1","h-1.5","h-2","h-2.5","h-3","h-3.5","h-4","h-5","h-6","h-7","h-8","h-9","h-10","h-11","h-12","h-14","h-16","h-20","h-24","h-28","h-32","h-36","h-40","h-44","h-48","h-52","h-56","h-60","h-64","h-72","h-80","h-96","h-auto","h-1/2","h-1/3","h-2/3","h-1/4","h-2/4","h-3/4","h-1/5","h-2/5","h-3/5","h-4/5","h-1/6","h-2/6","h-3/6","h-4/6","h-5/6","h-full","h-screen","h-min","h-max","h-fit"]

MinHeight = Literal["min-h-0","min-h-full","min-h-screen","min-h-min","min-h-max","min-h-fit"]

MaxHeight = Literal["max-h-0","max-h-px","max-h-0.5","max-h-1","max-h-1.5","max-h-2","max-h-2.5","max-h-3","max-h-3.5","max-h-4","max-h-5","max-h-6","max-h-7","max-h-8","max-h-9","max-h-10","max-h-11","max-h-12","max-h-14","max-h-16","max-h-20","max-h-24","max-h-28","max-h-32","max-h-36","max-h-40","max-h-44","max-h-48","max-h-52","max-h-56","max-h-60","max-h-64","max-h-72","max-h-80","max-h-96","max-h-full","max-h-screen","max-h-min","max-h-max","max-h-fit"]


class Sizing:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def width(self, _width: Width):
        """
        Utilities for setting the width of an element.
        """
        self.__add(_width)
        return self
        

    def min_width(self, _min_width: MinWidth):
        """
        Utilities for setting the minimum width of an element.
        """
        self.__add(_min_width)
        return self
        

    def max_width(self, _max_width: MaxWidth):
        """
        Utilities for setting the maximum width of an element.
        """
        self.__add(_max_width)
        return self
        

    def height(self, _height: Height):
        """
        Utilities for setting the height of an element.
        """
        self.__add(_height)
        return self
        

    def min_height(self, _min_height: MinHeight):
        """
        Utilities for setting the minimum height of an element.
        """
        self.__add(_min_height)
        return self
        

    def max_height(self, _max_height: MaxHeight):
        """
        Utilities for setting the maximum height of an element.
        """
        self.__add(_max_height)
        return self
        

Spacing.py

from typing import Literal
from nicegui.element import Element

Padding = Literal["p-0","px-0","py-0","pt-0","pr-0","pb-0","pl-0","p-px","px-px","py-px","pt-px","pr-px","pb-px","pl-px","p-0.5","px-0.5","py-0.5","pt-0.5","pr-0.5","pb-0.5","pl-0.5","p-1","px-1","py-1","pt-1","pr-1","pb-1","pl-1","p-1.5","px-1.5","py-1.5","pt-1.5","pr-1.5","pb-1.5","pl-1.5","p-2","px-2","py-2","pt-2","pr-2","pb-2","pl-2","p-2.5","px-2.5","py-2.5","pt-2.5","pr-2.5","pb-2.5","pl-2.5","p-3","px-3","py-3","pt-3","pr-3","pb-3","pl-3","p-3.5","px-3.5","py-3.5","pt-3.5","pr-3.5","pb-3.5","pl-3.5","p-4","px-4","py-4","pt-4","pr-4","pb-4","pl-4","p-5","px-5","py-5","pt-5","pr-5","pb-5","pl-5","p-6","px-6","py-6","pt-6","pr-6","pb-6","pl-6","p-7","px-7","py-7","pt-7","pr-7","pb-7","pl-7","p-8","px-8","py-8","pt-8","pr-8","pb-8","pl-8","p-9","px-9","py-9","pt-9","pr-9","pb-9","pl-9","p-10","px-10","py-10","pt-10","pr-10","pb-10","pl-10","p-11","px-11","py-11","pt-11","pr-11","pb-11","pl-11","p-12","px-12","py-12","pt-12","pr-12","pb-12","pl-12","p-14","px-14","py-14","pt-14","pr-14","pb-14","pl-14","p-16","px-16","py-16","pt-16","pr-16","pb-16","pl-16","p-20","px-20","py-20","pt-20","pr-20","pb-20","pl-20","p-24","px-24","py-24","pt-24","pr-24","pb-24","pl-24","p-28","px-28","py-28","pt-28","pr-28","pb-28","pl-28","p-32","px-32","py-32","pt-32","pr-32","pb-32","pl-32","p-36","px-36","py-36","pt-36","pr-36","pb-36","pl-36","p-40","px-40","py-40","pt-40","pr-40","pb-40","pl-40","p-44","px-44","py-44","pt-44","pr-44","pb-44","pl-44","p-48","px-48","py-48","pt-48","pr-48","pb-48","pl-48","p-52","px-52","py-52","pt-52","pr-52","pb-52","pl-52","p-56","px-56","py-56","pt-56","pr-56","pb-56","pl-56","p-60","px-60","py-60","pt-60","pr-60","pb-60","pl-60","p-64","px-64","py-64","pt-64","pr-64","pb-64","pl-64","p-72","px-72","py-72","pt-72","pr-72","pb-72","pl-72","p-80","px-80","py-80","pt-80","pr-80","pb-80","pl-80","p-96","px-96","py-96","pt-96","pr-96","pb-96","pl-96"]

Margin = Literal["m-0","mx-0","my-0","mt-0","mr-0","mb-0","ml-0","m-px","mx-px","my-px","mt-px","mr-px","mb-px","ml-px","m-0.5","mx-0.5","my-0.5","mt-0.5","mr-0.5","mb-0.5","ml-0.5","m-1","mx-1","my-1","mt-1","mr-1","mb-1","ml-1","m-1.5","mx-1.5","my-1.5","mt-1.5","mr-1.5","mb-1.5","ml-1.5","m-2","mx-2","my-2","mt-2","mr-2","mb-2","ml-2","m-2.5","mx-2.5","my-2.5","mt-2.5","mr-2.5","mb-2.5","ml-2.5","m-3","mx-3","my-3","mt-3","mr-3","mb-3","ml-3","m-3.5","mx-3.5","my-3.5","mt-3.5","mr-3.5","mb-3.5","ml-3.5","m-4","mx-4","my-4","mt-4","mr-4","mb-4","ml-4","m-5","mx-5","my-5","mt-5","mr-5","mb-5","ml-5","m-6","mx-6","my-6","mt-6","mr-6","mb-6","ml-6","m-7","mx-7","my-7","mt-7","mr-7","mb-7","ml-7","m-8","mx-8","my-8","mt-8","mr-8","mb-8","ml-8","m-9","mx-9","my-9","mt-9","mr-9","mb-9","ml-9","m-10","mx-10","my-10","mt-10","mr-10","mb-10","ml-10","m-11","mx-11","my-11","mt-11","mr-11","mb-11","ml-11","m-12","mx-12","my-12","mt-12","mr-12","mb-12","ml-12","m-14","mx-14","my-14","mt-14","mr-14","mb-14","ml-14","m-16","mx-16","my-16","mt-16","mr-16","mb-16","ml-16","m-20","mx-20","my-20","mt-20","mr-20","mb-20","ml-20","m-24","mx-24","my-24","mt-24","mr-24","mb-24","ml-24","m-28","mx-28","my-28","mt-28","mr-28","mb-28","ml-28","m-32","mx-32","my-32","mt-32","mr-32","mb-32","ml-32","m-36","mx-36","my-36","mt-36","mr-36","mb-36","ml-36","m-40","mx-40","my-40","mt-40","mr-40","mb-40","ml-40","m-44","mx-44","my-44","mt-44","mr-44","mb-44","ml-44","m-48","mx-48","my-48","mt-48","mr-48","mb-48","ml-48","m-52","mx-52","my-52","mt-52","mr-52","mb-52","ml-52","m-56","mx-56","my-56","mt-56","mr-56","mb-56","ml-56","m-60","mx-60","my-60","mt-60","mr-60","mb-60","ml-60","m-64","mx-64","my-64","mt-64","mr-64","mb-64","ml-64","m-72","mx-72","my-72","mt-72","mr-72","mb-72","ml-72","m-80","mx-80","my-80","mt-80","mr-80","mb-80","ml-80","m-96","mx-96","my-96","mt-96","mr-96","mb-96","ml-96","m-auto","mx-auto","my-auto","mt-auto","mr-auto","mb-auto","ml-auto"]

SpaceBetween = Literal["space-x-0","space-y-0","space-x-0.5","space-y-0.5","space-x-1","space-y-1","space-x-1.5","space-y-1.5","space-x-2","space-y-2","space-x-2.5","space-y-2.5","space-x-3","space-y-3","space-x-3.5","space-y-3.5","space-x-4","space-y-4","space-x-5","space-y-5","space-x-6","space-y-6","space-x-7","space-y-7","space-x-8","space-y-8","space-x-9","space-y-9","space-x-10","space-y-10","space-x-11","space-y-11","space-x-12","space-y-12","space-x-14","space-y-14","space-x-16","space-y-16","space-x-20","space-y-20","space-x-24","space-y-24","space-x-28","space-y-28","space-x-32","space-y-32","space-x-36","space-y-36","space-x-40","space-y-40","space-x-44","space-y-44","space-x-48","space-y-48","space-x-52","space-y-52","space-x-56","space-y-56","space-x-60","space-y-60","space-x-64","space-y-64","space-x-72","space-y-72","space-x-80","space-y-80","space-x-96","space-y-96","space-x-px","space-y-px","space-y-reverse","space-x-reverse"]


class Spacing:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def padding(self, _padding: Padding):
        """
        Utilities for controlling an element's padding.
        """
        self.__add(_padding)
        return self
        

    def margin(self, _margin: Margin):
        """
        Utilities for controlling an element's margin.
        """
        self.__add(_margin)
        return self
        

    def space_between(self, _between: SpaceBetween):
        """
        Utilities for controlling the space between child elements.
        """
        self.__add(_between)
        return self
        

SVG.py

from typing import Literal
from nicegui.element import Element

Fill = Literal["fill-none","fill-inherit","fill-current","fill-transparent","fill-black","fill-white","fill-slate-50","fill-slate-100","fill-slate-200","fill-slate-300","fill-slate-400","fill-slate-500","fill-slate-600","fill-slate-700","fill-slate-800","fill-slate-900","fill-gray-50","fill-gray-100","fill-gray-200","fill-gray-300","fill-gray-400","fill-gray-500","fill-gray-600","fill-gray-700","fill-gray-800","fill-gray-900","fill-zinc-50","fill-zinc-100","fill-zinc-200","fill-zinc-300","fill-zinc-400","fill-zinc-500","fill-zinc-600","fill-zinc-700","fill-zinc-800","fill-zinc-900","fill-neutral-50","fill-neutral-100","fill-neutral-200","fill-neutral-300","fill-neutral-400","fill-neutral-500","fill-neutral-600","fill-neutral-700","fill-neutral-800","fill-neutral-900","fill-stone-50","fill-stone-100","fill-stone-200","fill-stone-300","fill-stone-400","fill-stone-500","fill-stone-600","fill-stone-700","fill-stone-800","fill-stone-900","fill-red-50","fill-red-100","fill-red-200","fill-red-300","fill-red-400","fill-red-500","fill-red-600","fill-red-700","fill-red-800","fill-red-900","fill-orange-50","fill-orange-100","fill-orange-200","fill-orange-300","fill-orange-400","fill-orange-500","fill-orange-600","fill-orange-700","fill-orange-800","fill-orange-900","fill-amber-50","fill-amber-100","fill-amber-200","fill-amber-300","fill-amber-400","fill-amber-500","fill-amber-600","fill-amber-700","fill-amber-800","fill-amber-900","fill-yellow-50","fill-yellow-100","fill-yellow-200","fill-yellow-300","fill-yellow-400","fill-yellow-500","fill-yellow-600","fill-yellow-700","fill-yellow-800","fill-yellow-900","fill-lime-50","fill-lime-100","fill-lime-200","fill-lime-300","fill-lime-400","fill-lime-500","fill-lime-600","fill-lime-700","fill-lime-800","fill-lime-900","fill-green-50","fill-green-100","fill-green-200","fill-green-300","fill-green-400","fill-green-500","fill-green-600","fill-green-700","fill-green-800","fill-green-900","fill-emerald-50","fill-emerald-100","fill-emerald-200","fill-emerald-300","fill-emerald-400","fill-emerald-500","fill-emerald-600","fill-emerald-700","fill-emerald-800","fill-emerald-900","fill-teal-50","fill-teal-100","fill-teal-200","fill-teal-300","fill-teal-400","fill-teal-500","fill-teal-600","fill-teal-700","fill-teal-800","fill-teal-900","fill-cyan-50","fill-cyan-100","fill-cyan-200","fill-cyan-300","fill-cyan-400","fill-cyan-500","fill-cyan-600","fill-cyan-700","fill-cyan-800","fill-cyan-900","fill-sky-50","fill-sky-100","fill-sky-200","fill-sky-300","fill-sky-400","fill-sky-500","fill-sky-600","fill-sky-700","fill-sky-800","fill-sky-900","fill-blue-50","fill-blue-100","fill-blue-200","fill-blue-300","fill-blue-400","fill-blue-500","fill-blue-600","fill-blue-700","fill-blue-800","fill-blue-900","fill-indigo-50","fill-indigo-100","fill-indigo-200","fill-indigo-300","fill-indigo-400","fill-indigo-500","fill-indigo-600","fill-indigo-700","fill-indigo-800","fill-indigo-900","fill-violet-50","fill-violet-100","fill-violet-200","fill-violet-300","fill-violet-400","fill-violet-500","fill-violet-600","fill-violet-700","fill-violet-800","fill-violet-900","fill-purple-50","fill-purple-100","fill-purple-200","fill-purple-300","fill-purple-400","fill-purple-500","fill-purple-600","fill-purple-700","fill-purple-800","fill-purple-900","fill-fuchsia-50","fill-fuchsia-100","fill-fuchsia-200","fill-fuchsia-300","fill-fuchsia-400","fill-fuchsia-500","fill-fuchsia-600","fill-fuchsia-700","fill-fuchsia-800","fill-fuchsia-900","fill-pink-50","fill-pink-100","fill-pink-200","fill-pink-300","fill-pink-400","fill-pink-500","fill-pink-600","fill-pink-700","fill-pink-800","fill-pink-900","fill-rose-50","fill-rose-100","fill-rose-200","fill-rose-300","fill-rose-400","fill-rose-500","fill-rose-600","fill-rose-700","fill-rose-800","fill-rose-900"]

Stroke = Literal["stroke-none","stroke-inherit","stroke-current","stroke-transparent","stroke-black","stroke-white","stroke-slate-50","stroke-slate-100","stroke-slate-200","stroke-slate-300","stroke-slate-400","stroke-slate-500","stroke-slate-600","stroke-slate-700","stroke-slate-800","stroke-slate-900","stroke-gray-50","stroke-gray-100","stroke-gray-200","stroke-gray-300","stroke-gray-400","stroke-gray-500","stroke-gray-600","stroke-gray-700","stroke-gray-800","stroke-gray-900","stroke-zinc-50","stroke-zinc-100","stroke-zinc-200","stroke-zinc-300","stroke-zinc-400","stroke-zinc-500","stroke-zinc-600","stroke-zinc-700","stroke-zinc-800","stroke-zinc-900","stroke-neutral-50","stroke-neutral-100","stroke-neutral-200","stroke-neutral-300","stroke-neutral-400","stroke-neutral-500","stroke-neutral-600","stroke-neutral-700","stroke-neutral-800","stroke-neutral-900","stroke-stone-50","stroke-stone-100","stroke-stone-200","stroke-stone-300","stroke-stone-400","stroke-stone-500","stroke-stone-600","stroke-stone-700","stroke-stone-800","stroke-stone-900","stroke-red-50","stroke-red-100","stroke-red-200","stroke-red-300","stroke-red-400","stroke-red-500","stroke-red-600","stroke-red-700","stroke-red-800","stroke-red-900","stroke-orange-50","stroke-orange-100","stroke-orange-200","stroke-orange-300","stroke-orange-400","stroke-orange-500","stroke-orange-600","stroke-orange-700","stroke-orange-800","stroke-orange-900","stroke-amber-50","stroke-amber-100","stroke-amber-200","stroke-amber-300","stroke-amber-400","stroke-amber-500","stroke-amber-600","stroke-amber-700","stroke-amber-800","stroke-amber-900","stroke-yellow-50","stroke-yellow-100","stroke-yellow-200","stroke-yellow-300","stroke-yellow-400","stroke-yellow-500","stroke-yellow-600","stroke-yellow-700","stroke-yellow-800","stroke-yellow-900","stroke-lime-50","stroke-lime-100","stroke-lime-200","stroke-lime-300","stroke-lime-400","stroke-lime-500","stroke-lime-600","stroke-lime-700","stroke-lime-800","stroke-lime-900","stroke-green-50","stroke-green-100","stroke-green-200","stroke-green-300","stroke-green-400","stroke-green-500","stroke-green-600","stroke-green-700","stroke-green-800","stroke-green-900","stroke-emerald-50","stroke-emerald-100","stroke-emerald-200","stroke-emerald-300","stroke-emerald-400","stroke-emerald-500","stroke-emerald-600","stroke-emerald-700","stroke-emerald-800","stroke-emerald-900","stroke-teal-50","stroke-teal-100","stroke-teal-200","stroke-teal-300","stroke-teal-400","stroke-teal-500","stroke-teal-600","stroke-teal-700","stroke-teal-800","stroke-teal-900","stroke-cyan-50","stroke-cyan-100","stroke-cyan-200","stroke-cyan-300","stroke-cyan-400","stroke-cyan-500","stroke-cyan-600","stroke-cyan-700","stroke-cyan-800","stroke-cyan-900","stroke-sky-50","stroke-sky-100","stroke-sky-200","stroke-sky-300","stroke-sky-400","stroke-sky-500","stroke-sky-600","stroke-sky-700","stroke-sky-800","stroke-sky-900","stroke-blue-50","stroke-blue-100","stroke-blue-200","stroke-blue-300","stroke-blue-400","stroke-blue-500","stroke-blue-600","stroke-blue-700","stroke-blue-800","stroke-blue-900","stroke-indigo-50","stroke-indigo-100","stroke-indigo-200","stroke-indigo-300","stroke-indigo-400","stroke-indigo-500","stroke-indigo-600","stroke-indigo-700","stroke-indigo-800","stroke-indigo-900","stroke-violet-50","stroke-violet-100","stroke-violet-200","stroke-violet-300","stroke-violet-400","stroke-violet-500","stroke-violet-600","stroke-violet-700","stroke-violet-800","stroke-violet-900","stroke-purple-50","stroke-purple-100","stroke-purple-200","stroke-purple-300","stroke-purple-400","stroke-purple-500","stroke-purple-600","stroke-purple-700","stroke-purple-800","stroke-purple-900","stroke-fuchsia-50","stroke-fuchsia-100","stroke-fuchsia-200","stroke-fuchsia-300","stroke-fuchsia-400","stroke-fuchsia-500","stroke-fuchsia-600","stroke-fuchsia-700","stroke-fuchsia-800","stroke-fuchsia-900","stroke-pink-50","stroke-pink-100","stroke-pink-200","stroke-pink-300","stroke-pink-400","stroke-pink-500","stroke-pink-600","stroke-pink-700","stroke-pink-800","stroke-pink-900","stroke-rose-50","stroke-rose-100","stroke-rose-200","stroke-rose-300","stroke-rose-400","stroke-rose-500","stroke-rose-600","stroke-rose-700","stroke-rose-800","stroke-rose-900"]

StrokeWidth = Literal["stroke-0","stroke-1","stroke-2"]


class SVG:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def fill(self, _fill: Fill):
        """
        Utilities for styling the fill of SVG elements.
        """
        self.__add(_fill)
        return self
        

    def stroke(self, _stroke: Stroke):
        """
        Utilities for styling the stroke of SVG elements.
        """
        self.__add(_stroke)
        return self
        

    def stroke_width(self, _width: StrokeWidth):
        """
        Utilities for styling the stroke width of SVG elements.
        """
        self.__add(_width)
        return self
        

Tables.py

from typing import Literal
from nicegui.element import Element

BorderCollapse = Literal["border-collapse","border-separate"]

BorderSpacing = Literal["border-spacing-0","border-spacing-x-0","border-spacing-y-0","border-spacing-px","border-spacing-x-px","border-spacing-y-px","border-spacing-0.5","border-spacing-x-0.5","border-spacing-y-0.5","border-spacing-1","border-spacing-x-1","border-spacing-y-1","border-spacing-1.5","border-spacing-x-1.5","border-spacing-y-1.5","border-spacing-2","border-spacing-x-2","border-spacing-y-2","border-spacing-2.5","border-spacing-x-2.5","border-spacing-y-2.5","border-spacing-3","border-spacing-x-3","border-spacing-y-3","border-spacing-3.5","border-spacing-x-3.5","border-spacing-y-3.5","border-spacing-4","border-spacing-x-4","border-spacing-y-4","border-spacing-5","border-spacing-x-5","border-spacing-y-5","border-spacing-6","border-spacing-x-6","border-spacing-y-6","border-spacing-7","border-spacing-x-7","border-spacing-y-7","border-spacing-8","border-spacing-x-8","border-spacing-y-8","border-spacing-9","border-spacing-x-9","border-spacing-y-9","border-spacing-10","border-spacing-x-10","border-spacing-y-10","border-spacing-11","border-spacing-x-11","border-spacing-y-11","border-spacing-12","border-spacing-x-12","border-spacing-y-12","border-spacing-14","border-spacing-x-14","border-spacing-y-14","border-spacing-16","border-spacing-x-16","border-spacing-y-16","border-spacing-20","border-spacing-x-20","border-spacing-y-20","border-spacing-24","border-spacing-x-24","border-spacing-y-24","border-spacing-28","border-spacing-x-28","border-spacing-y-28","border-spacing-32","border-spacing-x-32","border-spacing-y-32","border-spacing-36","border-spacing-x-36","border-spacing-y-36","border-spacing-40","border-spacing-x-40","border-spacing-y-40","border-spacing-44","border-spacing-x-44","border-spacing-y-44","border-spacing-48","border-spacing-x-48","border-spacing-y-48","border-spacing-52","border-spacing-x-52","border-spacing-y-52","border-spacing-56","border-spacing-x-56","border-spacing-y-56","border-spacing-60","border-spacing-x-60","border-spacing-y-60","border-spacing-64","border-spacing-x-64","border-spacing-y-64","border-spacing-72","border-spacing-x-72","border-spacing-y-72","border-spacing-80","border-spacing-x-80","border-spacing-y-80","border-spacing-96","border-spacing-x-96","border-spacing-y-96"]

TableLayout = Literal["table-auto","table-fixed"]


class Tables:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def border_collapse(self, _collapse: BorderCollapse):
        """
        Utilities for controlling whether table borders should collapse or be separated.
        """
        self.__add(_collapse)
        return self
        

    def border_spacing(self, _spacing: BorderSpacing):
        """
        Utilities for controlling the spacing between table borders.
        """
        self.__add(_spacing)
        return self
        

    def table_layout(self, _layout: TableLayout):
        """
        Utilities for controlling the table layout algorithm.
        """
        self.__add(_layout)
        return self
        

Transforms.py

from typing import Literal
from nicegui.element import Element

Scale = Literal["scale-0","scale-x-0","scale-y-0","scale-50","scale-x-50","scale-y-50","scale-75","scale-x-75","scale-y-75","scale-90","scale-x-90","scale-y-90","scale-95","scale-x-95","scale-y-95","scale-100","scale-x-100","scale-y-100","scale-105","scale-x-105","scale-y-105","scale-110","scale-x-110","scale-y-110","scale-125","scale-x-125","scale-y-125","scale-150","scale-x-150","scale-y-150"]

Rotate = Literal["rotate-0","rotate-1","rotate-2","rotate-3","rotate-6","rotate-12","rotate-45","rotate-90","rotate-180"]

Translate = Literal["translate-x-0","translate-y-0","translate-x-px","translate-y-px","translate-x-0.5","translate-y-0.5","translate-x-1","translate-y-1","translate-x-1.5","translate-y-1.5","translate-x-2","translate-y-2","translate-x-2.5","translate-y-2.5","translate-x-3","translate-y-3","translate-x-3.5","translate-y-3.5","translate-x-4","translate-y-4","translate-x-5","translate-y-5","translate-x-6","translate-y-6","translate-x-7","translate-y-7","translate-x-8","translate-y-8","translate-x-9","translate-y-9","translate-x-10","translate-y-10","translate-x-11","translate-y-11","translate-x-12","translate-y-12","translate-x-14","translate-y-14","translate-x-16","translate-y-16","translate-x-20","translate-y-20","translate-x-24","translate-y-24","translate-x-28","translate-y-28","translate-x-32","translate-y-32","translate-x-36","translate-y-36","translate-x-40","translate-y-40","translate-x-44","translate-y-44","translate-x-48","translate-y-48","translate-x-52","translate-y-52","translate-x-56","translate-y-56","translate-x-60","translate-y-60","translate-x-64","translate-y-64","translate-x-72","translate-y-72","translate-x-80","translate-y-80","translate-x-96","translate-y-96","translate-x-1/2","translate-x-1/3","translate-x-2/3","translate-x-1/4","translate-x-2/4","translate-x-3/4","translate-x-full","translate-y-1/2","translate-y-1/3","translate-y-2/3","translate-y-1/4","translate-y-2/4","translate-y-3/4","translate-y-full"]

Skew = Literal["skew-x-0","skew-y-0","skew-x-1","skew-y-1","skew-x-2","skew-y-2","skew-x-3","skew-y-3","skew-x-6","skew-y-6","skew-x-12","skew-y-12"]

TransformOrigin = Literal["origin-center","origin-top","origin-top-right","origin-right","origin-bottom-right","origin-bottom","origin-bottom-left","origin-left","origin-top-left"]


class Transforms:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def scale(self, _scale: Scale):
        """
        Utilities for scaling elements with transform.
        """
        self.__add(_scale)
        return self
        

    def rotate(self, _rotate: Rotate):
        """
        Utilities for rotating elements with transform.
        """
        self.__add(_rotate)
        return self
        

    def translate(self, _translate: Translate):
        """
        Utilities for translating elements with transform.
        """
        self.__add(_translate)
        return self
        

    def skew(self, _skew: Skew):
        """
        Utilities for skewing elements with transform.
        """
        self.__add(_skew)
        return self
        

    def transform_origin(self, _origin: TransformOrigin):
        """
        Utilities for specifying the origin for an element's transformations.
        """
        self.__add(_origin)
        return self
        

TransitionsAnimation.py

from typing import Literal
from nicegui.element import Element

TransitionProperty = Literal["transition-none","transition-all","transition","transition-colors","transition-opacity","transition-shadow","transition-transform"]

TransitionDuration = Literal["duration-75","duration-100","duration-150","duration-200","duration-300","duration-500","duration-700","duration-1000"]

TransitionTimingFunction = Literal["ease-linear","ease-in","ease-out","ease-in-out"]

TransitionDelay = Literal["delay-75","delay-100","delay-150","delay-200","delay-300","delay-500","delay-700","delay-1000"]

Animation = Literal["animate-none","animate-spin","animate-ping","animate-pulse","animate-bounce"]


class TransitionsAnimation:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def transition_property(self, _property: TransitionProperty):
        """
        Utilities for controlling which CSS properties transition.
        """
        self.__add(_property)
        return self
        

    def transition_duration(self, _duration: TransitionDuration):
        """
        Utilities for controlling the duration of CSS transitions.
        """
        self.__add(_duration)
        return self
        

    def transition_timing_function(self, _function: TransitionTimingFunction):
        """
        Utilities for controlling the easing of CSS transitions.
        """
        self.__add(_function)
        return self
        

    def transition_delay(self, _delay: TransitionDelay):
        """
        Utilities for controlling the delay of CSS transitions.
        """
        self.__add(_delay)
        return self
        

    def animation(self, _animation: Animation):
        """
        Utilities for animating elements with CSS animations.
        """
        self.__add(_animation)
        return self
        

Typography.py

from typing import Literal
from nicegui.element import Element

FontFamily = Literal["font-sans","font-serif","font-mono"]

FontSize = Literal["text-xs","text-sm","text-base","text-lg","text-xl","text-2xl","text-3xl","text-4xl","text-5xl","text-6xl","text-7xl","text-8xl","text-9xl"]

FontSmoothing = Literal["antialiased","subpixel-antialiased"]

FontStyle = Literal["italic","not-italic"]

FontWeight = Literal["font-thin","font-extralight","font-light","font-normal","font-medium","font-semibold","font-bold","font-extrabold","font-black"]

FontVariantNumeric = Literal["normal-nums","ordinal","slashed-zero","lining-nums","oldstyle-nums","proportional-nums","tabular-nums","diagonal-fractions","stacked-fractions"]

LetterSpacing = Literal["tracking-tighter","tracking-tight","tracking-normal","tracking-wide","tracking-wider","tracking-widest"]

LineHeight = Literal["leading-3","leading-4","leading-5","leading-6","leading-7","leading-8","leading-9","leading-10","leading-none","leading-tight","leading-snug","leading-normal","leading-relaxed","leading-loose"]

ListStyleType = Literal["list-none","list-disc","list-decimal"]

ListStylePosition = Literal["list-inside","list-outside"]

TextAlign = Literal["text-left","text-center","text-right","text-justify","text-start","text-end"]

TextColor = Literal["text-inherit","text-current","text-transparent","text-black","text-white","text-slate-50","text-slate-100","text-slate-200","text-slate-300","text-slate-400","text-slate-500","text-slate-600","text-slate-700","text-slate-800","text-slate-900","text-gray-50","text-gray-100","text-gray-200","text-gray-300","text-gray-400","text-gray-500","text-gray-600","text-gray-700","text-gray-800","text-gray-900","text-zinc-50","text-zinc-100","text-zinc-200","text-zinc-300","text-zinc-400","text-zinc-500","text-zinc-600","text-zinc-700","text-zinc-800","text-zinc-900","text-neutral-50","text-neutral-100","text-neutral-200","text-neutral-300","text-neutral-400","text-neutral-500","text-neutral-600","text-neutral-700","text-neutral-800","text-neutral-900","text-stone-50","text-stone-100","text-stone-200","text-stone-300","text-stone-400","text-stone-500","text-stone-600","text-stone-700","text-stone-800","text-stone-900","text-red-50","text-red-100","text-red-200","text-red-300","text-red-400","text-red-500","text-red-600","text-red-700","text-red-800","text-red-900","text-orange-50","text-orange-100","text-orange-200","text-orange-300","text-orange-400","text-orange-500","text-orange-600","text-orange-700","text-orange-800","text-orange-900","text-amber-50","text-amber-100","text-amber-200","text-amber-300","text-amber-400","text-amber-500","text-amber-600","text-amber-700","text-amber-800","text-amber-900","text-yellow-50","text-yellow-100","text-yellow-200","text-yellow-300","text-yellow-400","text-yellow-500","text-yellow-600","text-yellow-700","text-yellow-800","text-yellow-900","text-lime-50","text-lime-100","text-lime-200","text-lime-300","text-lime-400","text-lime-500","text-lime-600","text-lime-700","text-lime-800","text-lime-900","text-green-50","text-green-100","text-green-200","text-green-300","text-green-400","text-green-500","text-green-600","text-green-700","text-green-800","text-green-900","text-emerald-50","text-emerald-100","text-emerald-200","text-emerald-300","text-emerald-400","text-emerald-500","text-emerald-600","text-emerald-700","text-emerald-800","text-emerald-900","text-teal-50","text-teal-100","text-teal-200","text-teal-300","text-teal-400","text-teal-500","text-teal-600","text-teal-700","text-teal-800","text-teal-900","text-cyan-50","text-cyan-100","text-cyan-200","text-cyan-300","text-cyan-400","text-cyan-500","text-cyan-600","text-cyan-700","text-cyan-800","text-cyan-900","text-sky-50","text-sky-100","text-sky-200","text-sky-300","text-sky-400","text-sky-500","text-sky-600","text-sky-700","text-sky-800","text-sky-900","text-blue-50","text-blue-100","text-blue-200","text-blue-300","text-blue-400","text-blue-500","text-blue-600","text-blue-700","text-blue-800","text-blue-900","text-indigo-50","text-indigo-100","text-indigo-200","text-indigo-300","text-indigo-400","text-indigo-500","text-indigo-600","text-indigo-700","text-indigo-800","text-indigo-900","text-violet-50","text-violet-100","text-violet-200","text-violet-300","text-violet-400","text-violet-500","text-violet-600","text-violet-700","text-violet-800","text-violet-900","text-purple-50","text-purple-100","text-purple-200","text-purple-300","text-purple-400","text-purple-500","text-purple-600","text-purple-700","text-purple-800","text-purple-900","text-fuchsia-50","text-fuchsia-100","text-fuchsia-200","text-fuchsia-300","text-fuchsia-400","text-fuchsia-500","text-fuchsia-600","text-fuchsia-700","text-fuchsia-800","text-fuchsia-900","text-pink-50","text-pink-100","text-pink-200","text-pink-300","text-pink-400","text-pink-500","text-pink-600","text-pink-700","text-pink-800","text-pink-900","text-rose-50","text-rose-100","text-rose-200","text-rose-300","text-rose-400","text-rose-500","text-rose-600","text-rose-700","text-rose-800","text-rose-900"]

TextDecoration = Literal["underline","overline","line-through","no-underline"]

TextDecorationColor = Literal["decoration-inherit","decoration-current","decoration-transparent","decoration-black","decoration-white","decoration-slate-50","decoration-slate-100","decoration-slate-200","decoration-slate-300","decoration-slate-400","decoration-slate-500","decoration-slate-600","decoration-slate-700","decoration-slate-800","decoration-slate-900","decoration-gray-50","decoration-gray-100","decoration-gray-200","decoration-gray-300","decoration-gray-400","decoration-gray-500","decoration-gray-600","decoration-gray-700","decoration-gray-800","decoration-gray-900","decoration-zinc-50","decoration-zinc-100","decoration-zinc-200","decoration-zinc-300","decoration-zinc-400","decoration-zinc-500","decoration-zinc-600","decoration-zinc-700","decoration-zinc-800","decoration-zinc-900","decoration-neutral-50","decoration-neutral-100","decoration-neutral-200","decoration-neutral-300","decoration-neutral-400","decoration-neutral-500","decoration-neutral-600","decoration-neutral-700","decoration-neutral-800","decoration-neutral-900","decoration-stone-50","decoration-stone-100","decoration-stone-200","decoration-stone-300","decoration-stone-400","decoration-stone-500","decoration-stone-600","decoration-stone-700","decoration-stone-800","decoration-stone-900","decoration-red-50","decoration-red-100","decoration-red-200","decoration-red-300","decoration-red-400","decoration-red-500","decoration-red-600","decoration-red-700","decoration-red-800","decoration-red-900","decoration-orange-50","decoration-orange-100","decoration-orange-200","decoration-orange-300","decoration-orange-400","decoration-orange-500","decoration-orange-600","decoration-orange-700","decoration-orange-800","decoration-orange-900","decoration-amber-50","decoration-amber-100","decoration-amber-200","decoration-amber-300","decoration-amber-400","decoration-amber-500","decoration-amber-600","decoration-amber-700","decoration-amber-800","decoration-amber-900","decoration-yellow-50","decoration-yellow-100","decoration-yellow-200","decoration-yellow-300","decoration-yellow-400","decoration-yellow-500","decoration-yellow-600","decoration-yellow-700","decoration-yellow-800","decoration-yellow-900","decoration-lime-50","decoration-lime-100","decoration-lime-200","decoration-lime-300","decoration-lime-400","decoration-lime-500","decoration-lime-600","decoration-lime-700","decoration-lime-800","decoration-lime-900","decoration-green-50","decoration-green-100","decoration-green-200","decoration-green-300","decoration-green-400","decoration-green-500","decoration-green-600","decoration-green-700","decoration-green-800","decoration-green-900","decoration-emerald-50","decoration-emerald-100","decoration-emerald-200","decoration-emerald-300","decoration-emerald-400","decoration-emerald-500","decoration-emerald-600","decoration-emerald-700","decoration-emerald-800","decoration-emerald-900","decoration-teal-50","decoration-teal-100","decoration-teal-200","decoration-teal-300","decoration-teal-400","decoration-teal-500","decoration-teal-600","decoration-teal-700","decoration-teal-800","decoration-teal-900","decoration-cyan-50","decoration-cyan-100","decoration-cyan-200","decoration-cyan-300","decoration-cyan-400","decoration-cyan-500","decoration-cyan-600","decoration-cyan-700","decoration-cyan-800","decoration-cyan-900","decoration-sky-50","decoration-sky-100","decoration-sky-200","decoration-sky-300","decoration-sky-400","decoration-sky-500","decoration-sky-600","decoration-sky-700","decoration-sky-800","decoration-sky-900","decoration-blue-50","decoration-blue-100","decoration-blue-200","decoration-blue-300","decoration-blue-400","decoration-blue-500","decoration-blue-600","decoration-blue-700","decoration-blue-800","decoration-blue-900","decoration-indigo-50","decoration-indigo-100","decoration-indigo-200","decoration-indigo-300","decoration-indigo-400","decoration-indigo-500","decoration-indigo-600","decoration-indigo-700","decoration-indigo-800","decoration-indigo-900","decoration-violet-50","decoration-violet-100","decoration-violet-200","decoration-violet-300","decoration-violet-400","decoration-violet-500","decoration-violet-600","decoration-violet-700","decoration-violet-800","decoration-violet-900","decoration-purple-50","decoration-purple-100","decoration-purple-200","decoration-purple-300","decoration-purple-400","decoration-purple-500","decoration-purple-600","decoration-purple-700","decoration-purple-800","decoration-purple-900","decoration-fuchsia-50","decoration-fuchsia-100","decoration-fuchsia-200","decoration-fuchsia-300","decoration-fuchsia-400","decoration-fuchsia-500","decoration-fuchsia-600","decoration-fuchsia-700","decoration-fuchsia-800","decoration-fuchsia-900","decoration-pink-50","decoration-pink-100","decoration-pink-200","decoration-pink-300","decoration-pink-400","decoration-pink-500","decoration-pink-600","decoration-pink-700","decoration-pink-800","decoration-pink-900","decoration-rose-50","decoration-rose-100","decoration-rose-200","decoration-rose-300","decoration-rose-400","decoration-rose-500","decoration-rose-600","decoration-rose-700","decoration-rose-800","decoration-rose-900"]

TextDecorationStyle = Literal["decoration-solid","decoration-double","decoration-dotted","decoration-dashed","decoration-wavy"]

TextDecorationThickness = Literal["decoration-auto","decoration-from-font","decoration-0","decoration-1","decoration-2","decoration-4","decoration-8"]

TextUnderlineOffset = Literal["underline-offset-auto","underline-offset-0","underline-offset-1","underline-offset-2","underline-offset-4","underline-offset-8"]

TextTransform = Literal["uppercase","lowercase","capitalize","normal-case"]

TextOverflow = Literal["truncate","text-ellipsis","text-clip"]

TextIndent = Literal["indent-0","indent-px","indent-0.5","indent-1","indent-1.5","indent-2","indent-2.5","indent-3","indent-3.5","indent-4","indent-5","indent-6","indent-7","indent-8","indent-9","indent-10","indent-11","indent-12","indent-14","indent-16","indent-20","indent-24","indent-28","indent-32","indent-36","indent-40","indent-44","indent-48","indent-52","indent-56","indent-60","indent-64","indent-72","indent-80","indent-96"]

VerticalAlign = Literal["align-baseline","align-top","align-middle","align-bottom","align-text-top","align-text-bottom","align-sub","align-super"]

Whitespace = Literal["whitespace-normal","whitespace-nowrap","whitespace-pre","whitespace-pre-line","whitespace-pre-wrap"]

WordBreak = Literal["break-normal","break-words","break-all","break-keep"]

Content = Literal["content-none"]


class Typography:
    def __init__(self, element: Element = Element("")) -> None:
        self.element = element

    def __add(self, _class: str) -> None:
        """
        Internal
        """
        self.element.classes(add=_class)

    def apply(self, ex_element: Element) -> Element:
        """
        Apply the Style to an outer element

        Args:
            ex_element (Element): External Element

        Returns:
            Element: External Element
        """
        return ex_element.classes(add=" ".join(self.element._classes))


    def font_family(self, _family: FontFamily):
        """
        Utilities for controlling the font family of an element.
        """
        self.__add(_family)
        return self
        

    def font_size(self, _size: FontSize):
        """
        Utilities for controlling the font size of an element.
        """
        self.__add(_size)
        return self
        

    def font_smoothing(self, _smoothing: FontSmoothing):
        """
        Utilities for controlling the font smoothing of an element.
        """
        self.__add(_smoothing)
        return self
        

    def font_style(self, _style: FontStyle):
        """
        Utilities for controlling the style of text.
        """
        self.__add(_style)
        return self
        

    def font_weight(self, _weight: FontWeight):
        """
        Utilities for controlling the font weight of an element.
        """
        self.__add(_weight)
        return self
        

    def font_variant_numeric(self, _numeric: FontVariantNumeric):
        """
        Utilities for controlling the variant of numbers.
        """
        self.__add(_numeric)
        return self
        

    def letter_spacing(self, _spacing: LetterSpacing):
        """
        Utilities for controlling the tracking (letter spacing) of an element.
        """
        self.__add(_spacing)
        return self
        

    def line_height(self, _height: LineHeight):
        """
        Utilities for controlling the leading (line height) of an element.
        """
        self.__add(_height)
        return self
        

    def list_style_type(self, _type: ListStyleType):
        """
        Utilities for controlling the bullet/number style of a list.
        """
        self.__add(_type)
        return self
        

    def list_style_position(self, _position: ListStylePosition):
        """
        Utilities for controlling the position of bullets/numbers in lists.
        """
        self.__add(_position)
        return self
        

    def text_align(self, _align: TextAlign):
        """
        Utilities for controlling the alignment of text.
        """
        self.__add(_align)
        return self
        

    def text_color(self, _color: TextColor):
        """
        Utilities for controlling the text color of an element.
        """
        self.__add(_color)
        return self
        

    def text_decoration(self, _decoration: TextDecoration):
        """
        Utilities for controlling the decoration of text.
        """
        self.__add(_decoration)
        return self
        

    def text_decoration_color(self, _color: TextDecorationColor):
        """
        Utilities for controlling the color of text decorations.
        """
        self.__add(_color)
        return self
        

    def text_decoration_style(self, _style: TextDecorationStyle):
        """
        Utilities for controlling the style of text decorations.
        """
        self.__add(_style)
        return self
        

    def text_decoration_thickness(self, _thickness: TextDecorationThickness):
        """
        Utilities for controlling the thickness of text decorations.
        """
        self.__add(_thickness)
        return self
        

    def text_underline_offset(self, _offset: TextUnderlineOffset):
        """
        Utilities for controlling the offset of a text underline.
        """
        self.__add(_offset)
        return self
        

    def text_transform(self, _transform: TextTransform):
        """
        Utilities for controlling the transformation of text.
        """
        self.__add(_transform)
        return self
        

    def text_overflow(self, _overflow: TextOverflow):
        """
        Utilities for controlling text overflow in an element.
        """
        self.__add(_overflow)
        return self
        

    def text_indent(self, _indent: TextIndent):
        """
        Utilities for controlling the amount of empty space shown before text in a block.
        """
        self.__add(_indent)
        return self
        

    def vertical_align(self, _align: VerticalAlign):
        """
        Utilities for controlling the vertical alignment of an inline or table-cell box.
        """
        self.__add(_align)
        return self
        

    def whitespace(self, _whitespace: Whitespace):
        """
        Utilities for controlling an element's white-space property.
        """
        self.__add(_whitespace)
        return self
        

    def word_break(self, _break: WordBreak):
        """
        Utilities for controlling word breaks in an element.
        """
        self.__add(_break)
        return self
        

    def content(self, _content: Content):
        """
        Utilities for controlling the content of the before and after pseudo-elements.
        """
        self.__add(_content)
        return self