diff --git a/leptos_dom/src/html.rs b/leptos_dom/src/html.rs
index 4405d8d5a..6b77a7eec 100644
--- a/leptos_dom/src/html.rs
+++ b/leptos_dom/src/html.rs
@@ -658,6 +658,15 @@ impl<El: ElementDescriptor + 'static> HtmlElement<El> {
     }
 
     /// Adds a class to an element.
+    /// 
+    /// **Note**: In the builder syntax, this will be overwritten by the `class` 
+    /// attribute if you use `.attr("class", /* */)`. In the `view` macro, they 
+    /// are automatically re-ordered so that this over-writing does not happen.
+    /// 
+    /// # Panics
+    /// This directly uses the browser’s `classList` API, which means it will throw 
+    /// a runtime error if you pass more than a single class name. If you want to 
+    /// pass more than one class name at a time, you can use [HtmlElement::classes].
     #[track_caller]
     pub fn class(
         self,
diff --git a/leptos_macro/src/view.rs b/leptos_macro/src/view.rs
index 242aa9de3..7f46ea774 100644
--- a/leptos_macro/src/view.rs
+++ b/leptos_macro/src/view.rs
@@ -842,7 +842,8 @@ fn element_to_tokens(
         };
         let attrs = node.attributes.iter().filter_map(|node| {
             if let Node::Attribute(node) = node {
-                if node.key.to_string().trim().starts_with("class:") {
+                let name = node.key.to_string();
+                if name.trim().starts_with("class:") || fancy_class_name(&name, cx, node).is_some() {
                     None
                 } else {
                     Some(attribute_to_tokens(cx, node, global_class))
@@ -853,7 +854,11 @@ fn element_to_tokens(
         });
         let class_attrs = node.attributes.iter().filter_map(|node| {
             if let Node::Attribute(node) = node {
-                if node.key.to_string().trim().starts_with("class:") {
+                let name = node.key.to_string();
+                if let Some((fancy, _, _)) = fancy_class_name(&name, cx, node) {
+                    Some(fancy)
+                }
+                else if name.trim().starts_with("class:") {
                     Some(attribute_to_tokens(cx, node, global_class))
                 } else {
                     None