update Tailwind links to point to version 3

nicegui/classes.py

@@ -19,7 +19,7 @@ class Classes(list, Generic[T]):
                  replace: Optional[str] = None) -> T:
         """Apply, remove, toggle, or replace HTML classes.
 
-        This allows modifying the look of the element or its layout using `Tailwind <https://tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
+        This allows modifying the look of the element or its layout using `Tailwind <https://v3.tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
 
         Removing or replacing classes can be helpful if predefined classes are not desired.
 
@@ -28,6 +28,7 @@ class Classes(list, Generic[T]):
         :param toggle: whitespace-delimited string of classes to toggle (*added in version 2.7.0*)
         :param replace: whitespace-delimited string of classes to use instead of existing ones
         """
+        # DEPRECATED: replace Tailwind v3 link with v4 (throughout the whole codebase!) after upgrading in NiceGUI 3.0
         new_classes = self.update_list(self, add, remove, toggle, replace)
         if self != new_classes:
             self[:] = new_classes

nicegui/element.py

@@ -226,7 +226,7 @@ class Element(Visibility):
                         replace: Optional[str] = None) -> type[Self]:
         """Apply, remove, toggle, or replace default HTML classes.
 
-        This allows modifying the look of the element or its layout using `Tailwind <https://tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
+        This allows modifying the look of the element or its layout using `Tailwind <https://v3.tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
 
         Removing or replacing classes can be helpful if predefined classes are not desired.
         All elements of this class will share these HTML classes.

nicegui/element_filter.py

@@ -193,7 +193,7 @@ class ElementFilter(Generic[T]):
     def classes(self, add: Optional[str] = None, *, remove: Optional[str] = None, replace: Optional[str] = None) -> Self:
         """Apply, remove, or replace HTML classes.
 
-        This allows modifying the look of the element or its layout using `Tailwind <https://tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
+        This allows modifying the look of the element or its layout using `Tailwind <https://v3.tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
 
         Removing or replacing classes can be helpful if predefined classes are not desired.
 

nicegui/elements/html.py

@@ -7,7 +7,7 @@ class Html(ContentElement):
         """HTML Element
 
         Renders arbitrary HTML onto the page, wrapped in the specified tag.
-        `Tailwind <https://tailwindcss.com/>`_ can be used for styling.
+        `Tailwind <https://v3.tailwindcss.com/>`_ can be used for styling.
         You can also use `ui.add_head_html` to add html code into the head of the document and `ui.add_body_html`
         to add it into the body.
 

nicegui/elements/query.py

@@ -45,7 +45,7 @@ class Query:
                 ) -> Self:
         """Apply, remove, toggle, or replace HTML classes.
 
-        This allows modifying the look of the element or its layout using `Tailwind <https://tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
+        This allows modifying the look of the element or its layout using `Tailwind <https://v3.tailwindcss.com/>`_ or `Quasar <https://quasar.dev/>`_ classes.
 
         Removing or replacing classes can be helpful if predefined classes are not desired.
 

website/documentation/content/grid_documentation.py

@@ -36,8 +36,8 @@ def custom_demo() -> None:
 @doc.demo('Cells spanning multiple columns', '''
     This demo shows how to span cells over multiple columns.
 
-    Note that there is [no Tailwind class for spanning 15 columns](https://tailwindcss.com/docs/grid-column),
-    but we can set [arbitrary values](https://tailwindcss.com/docs/grid-column#arbitrary-values) using square brackets.
+    Note that there is [no Tailwind class for spanning 15 columns](https://v3.tailwindcss.com/docs/grid-column#arbitrary-values),
+    but we can set [arbitrary values](https://v3.tailwindcss.com/docs/grid-column#arbitrary-values) using square brackets.
     Alternatively you could use the corresponding CSS definition: `.style('grid-column: span 15 / span 15')`.
 ''')
 def span_demo() -> None:

website/documentation/content/section_styling_appearance.py

@@ -18,7 +18,7 @@ doc.title('Styling & Appearance')
     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.
     Props with a leading `:` can contain JavaScript expressions that are evaluated on the client.
-    You can also apply [Tailwind CSS](https://tailwindcss.com/) utility classes with the `classes` method.
+    You can also apply [Tailwind CSS](https://v3.tailwindcss.com/) utility classes with the `classes` method.
 
     If you really need to apply CSS, you can use the `style` method. Here the delimiter is `;` instead of a blank space.
 
@@ -32,7 +32,7 @@ def design_demo():
 
 doc.text('Try styling NiceGUI elements!', '''
     Try out how
-    [Tailwind CSS classes](https://tailwindcss.com/),
+    [Tailwind CSS classes](https://v3.tailwindcss.com/),
     [Quasar props](https://justpy.io/quasar_tutorial/introduction/#props-of-quasar-components),
     and CSS styles affect NiceGUI elements.
 ''')
@@ -105,7 +105,7 @@ def styling_demo():
 
 
 @doc.demo('Tailwind CSS', '''
-    [Tailwind CSS](https://tailwindcss.com/) is a CSS framework for rapidly building custom user interfaces.
+    [Tailwind CSS](https://v3.tailwindcss.com/) is a CSS framework for rapidly building custom user interfaces.
     NiceGUI provides a fluent, auto-complete friendly interface for adding Tailwind classes to UI elements.
 
     You can discover available classes by navigating the methods of the `tailwind` property.

website/main_page.py

@@ -126,7 +126,7 @@ def create() -> None:
                 'customizable [color themes](/documentation/section_styling_appearance#color_theming)',
                 'custom CSS and classes',
                 'modern look with material design',
-                '[Tailwind CSS](https://tailwindcss.com/) auto-completion',
+                '[Tailwind CSS](https://v3.tailwindcss.com/) auto-completion',
             ])
             features('source', 'Coding', [
                 'routing for multiple [pages](/documentation/page)',