#362 start to add documentation

fetch_tailwind.py

@@ -69,7 +69,7 @@ for li in soup.select('li[class="mt-12 lg:mt-8"]'):
 with open(Path(__file__).parent / 'nicegui' / 'tailwind.py', 'w') as f:
     f.write('from __future__ import annotations\n')
     f.write('\n')
-    f.write('from typing import TYPE_CHECKING, List, Optional\n')
+    f.write('from typing import TYPE_CHECKING, List, Optional, overload\n')
     f.write('\n')
     f.write('from typing_extensions import Literal\n')
     f.write('\n')
@@ -105,8 +105,19 @@ with open(Path(__file__).parent / 'nicegui' / 'tailwind.py', 'w') as f:
     f.write("    def __init__(self, _element: Optional['Element'] = None) -> None:\n")
     f.write('        self.element = _element or PseudoElement()\n')
     f.write('\n')
+    f.write('    @overload\n')
+    f.write('    def __call__(self, Tailwind) -> Tailwind:\n')
+    f.write('        ...\n')
+    f.write('\n')
+    f.write('    @overload\n')
     f.write('    def __call__(self, *classes: TailwindClass) -> Tailwind:\n')
-    f.write('        self.element.classes(*classes)\n')
+    f.write('        ...\n')
+    f.write('\n')
+    f.write('    def __call__(self, *args) -> Tailwind:\n')
+    f.write('        if isinstance(args[0], Tailwind):\n')
+    f.write('            args[0].apply(self.element)\n')
+    f.write('        else:\n')
+    f.write("            self.element.classes(' '.join(args))\n")
     f.write('        return self\n')
     f.write('\n')
     f.write("    def apply(self, element: 'Element') -> None:\n")

nicegui/__init__.py

@@ -8,3 +8,4 @@ __version__ = importlib_metadata.version('nicegui')
 from . import elements, globals, ui
 from .client import Client
 from .nicegui import app
+from .tailwind import Tailwind

nicegui/tailwind.py

@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from typing import TYPE_CHECKING, List, Optional
+from typing import TYPE_CHECKING, List, Optional, overload
 
 from typing_extensions import Literal
 
@@ -19078,8 +19078,19 @@ class Tailwind:
     def __init__(self, _element: Optional['Element'] = None) -> None:
         self.element = _element or PseudoElement()
 
+    @overload
+    def __call__(self, Tailwind) -> Tailwind:
+        ...
+
+    @overload
     def __call__(self, *classes: TailwindClass) -> Tailwind:
-        self.element.classes(*classes)
+        ...
+
+    def __call__(self, *args) -> Tailwind:
+        if isinstance(args[0], Tailwind):
+            args[0].apply(self.element)
+        else:
+            self.element.classes(' '.join(args))
         return self
 
     def apply(self, element: 'Element') -> None:

website/documentation.py

@@ -222,7 +222,7 @@ def create_full() -> None:
         NiceGUI uses the [Quasar Framework](https://quasar.dev/) version 1.0 and hence has its full design power.
         Each NiceGUI element provides a `props` method whose content is passed [to the Quasar component](https://justpy.io/quasar_tutorial/introduction/#props-of-quasar-components):
         Have a look at [the Quasar documentation](https://quasar.dev/vue-components/button#design) for all styling props.
-        You can also apply [Tailwind](https://tailwindcss.com/) utility classes with the `classes` method.
+        You can also apply [TailwindCSS](https://tailwindcss.com/) utility classes with the `classes` method.
 
         If you really need to apply CSS, you can use the `styles` method. Here the delimiter is `;` instead of a blank space.
 
@@ -233,6 +233,30 @@ def create_full() -> None:
         ui.button().props('icon=touch_app outline round').classes('shadow-lg')
         ui.label('Stylish!').style('color: #6E93D6; font-size: 200%; font-weight: 300')
 
+    @text_demo('TailwindCSS', '''
+        [TailwindCSS](https://tailwindcss.com/) is a CSS framework for rapidly building custom user interfaces.
+        NiceGUI provides a dedicated interface for adding Tailwind classes to UI elements.
+        
+        You can discover available classes by navigating the methods of the `tailwind` property.
+        The builder pattern allows you to chain multiple classes together (label A).
+
+        You can also call the `tailwind` property with a list of classes (label B).
+        Although this is very similar to using the `classes` method, it is more convenient for Tailwind classes due to auto-completion.
+
+        Last but not least, you can also predefine a style and apply it to multiple elements (labels C and D).
+    ''')
+    def tailwind_demo():
+        from nicegui import Tailwind
+        ui.label('Label A').tailwind.font_weight('extrabold').text_color('blue-600').background_color('orange-200')
+
+        ui.label('Label B').tailwind('drop-shadow', 'font-bold', 'text-green-600')
+
+        red_style = Tailwind().text_color('red-600').font_weight('bold')
+        label_c = ui.label('Label C')
+        red_style.apply(label_c)
+
+        ui.label('Label D').tailwind(red_style)
+
     load_demo(ui.colors)
 
     heading('Action')