adding classes to style with tailwind besides Quasar design

nicegui/elements/card.py

@@ -3,8 +3,8 @@ from .group import Group
 
 class Card(Group):
 
-    def __init__(self, design: str = ''):
+    def __init__(self, design: str = '', classes: str = ''):
 
         view = jp.QCard(classes='column items-start q-pa-md', style='gap: 1em', delete_flag=False)
 
-        super().__init__(view, design)
+        super().__init__(view, design=design, classes=classes)

nicegui/elements/element.py

@@ -8,7 +8,7 @@ class Element:
 
     visible = BindableProperty
 
-    def __init__(self, view: jp.HTMLBaseComponent, design: str):
+    def __init__(self, view: jp.HTMLBaseComponent, design: str = '', classes: str = ''):
 
         for word in design.split():
             if '=' in word:
@@ -20,6 +20,7 @@ class Element:
         self.parent_view.add(view)
         view.add_page(self.wp)
         self.view = view
+        self.view.classes += ' ' + classes
 
         self.visible = True
 

nicegui/elements/html.py

@@ -3,10 +3,10 @@ from .element import Element
 
 class Html(Element):
 
-    def __init__(self, content: str = ''):
+    def __init__(self, content: str = '', design='', classes: str = ''):
 
-        view = jp.Div()
-        super().__init__(view, '')
+        view = jp.QDiv()
+        super().__init__(view, design=design, classes=classes)
         self.content = content
 
     @property

nicegui/elements/markdown.py

@@ -3,9 +3,9 @@ from .html import Html
 
 class Markdown(Html):
 
-    def __init__(self, content: str = ''):
+    def __init__(self, content: str = '', classes: str = ''):
 
-        super().__init__(content)
+        super().__init__(content, classes=classes)
 
     def set_content(self, content: str):
 

nicegui/nicegui.py

@@ -18,6 +18,7 @@ if not inspect.stack()[-2].filename.endswith('spawn.py'):
     sys.exit()
 
 wp = jp.QuasarPage(delete_flag=False, title='NiceGUI', favicon='favicon.png')
+wp.tailwind = True  # use Tailwind classes instead of Quasars
 wp.css = HtmlFormatter().get_style_defs('.codehilite')
 wp.css += ''.join([f'h{i} {{ font-size: {80*(5-i)}%; line-height: normal; margin-block-end: {0.1*(5-1)}em }}' for i in range(1, 5)])
 wp.head_html = '<script>confirm = () => true;</script>'  # avoid confirmation dialog for reload