add demo about Tailwind layers (see #2337)

website/documentation/content/section_styling_appearance.py

@@ -122,6 +122,29 @@ def tailwind_demo():
     ui.label('Label D').tailwind(red_style)
 
 
+@doc.demo('Tailwind CSS Layers', '''
+    Tailwind CSS' `@layer` directive allows you to define custom classes that can be used in your HTML.
+    NiceGUI supports this feature by allowing you to add custom classes to the `components` layer.
+    This way, you can define your own classes and use them in your UI elements.
+    In the example below, we define a custom class `blue-box` and apply it to two labels.
+    Note that the style tag is of type `text/tailwindcss` and not `text/css`.
+''')
+def tailwind_layers():
+    ui.add_head_html('''
+        <style type="text/tailwindcss">
+            @layer components {
+                .blue-box {
+                    @apply bg-blue-500 p-12 text-center shadow-lg rounded-lg text-white;
+                }
+            }
+        </style>
+    ''')
+
+    with ui.row():
+        ui.label('Hello').classes('blue-box')
+        ui.label('world').classes('blue-box')
+
+
 doc.intro(query_documentation)
 doc.intro(colors_documentation)