diff --git a/.leptosfmt.toml b/.leptosfmt.toml
index ac5be1f..e5b7fa8 100644
--- a/.leptosfmt.toml
+++ b/.leptosfmt.toml
@@ -1,2 +1,5 @@
 max_width = 100
 attr_value_brace_style = "WhenRequired" # "Always", "AlwaysUnlessLit", "WhenRequired" or "Preserve"
+
+[attr_values]
+class = "Tailwind"
diff --git a/src/frontend/app.rs b/src/frontend/app.rs
index 97f7814..066a7ae 100644
--- a/src/frontend/app.rs
+++ b/src/frontend/app.rs
@@ -66,7 +66,7 @@ impl<T: Default + Send + Sync + Clone> DefaultResource<T> for Resource<T> {
 }
 pub fn shell(options: LeptosOptions) -> impl IntoView {
     view! {
-        <!DOCTYPE html>
+        <!DOCTYPE html> 
         <html lang="en">
             <head>
                 <meta charset="utf-8" />
diff --git a/src/frontend/components/article_nav.rs b/src/frontend/components/article_nav.rs
index 3041506..37b21b3 100644
--- a/src/frontend/components/article_nav.rs
+++ b/src/frontend/components/article_nav.rs
@@ -86,7 +86,7 @@ pub fn ArticleNav(article: Resource<ArticleView>, active_tab: ActiveTab) -> impl
                                 </Suspense>
                             </div>
                             <div class="flex flex-row">
-                                <h1 class="text-4xl font-bold font-serif my-6 grow flex-auto">
+                                <h1 class="flex-auto my-6 font-serif text-4xl font-bold grow">
                                     {title}
                                 </h1>
                                 <Show when=move || protected>
diff --git a/src/frontend/components/connect.rs b/src/frontend/components/connect.rs
index 7785d2b..8af7c66 100644
--- a/src/frontend/components/connect.rs
+++ b/src/frontend/components/connect.rs
@@ -26,7 +26,7 @@ where
     view! {
         <div class="flex justify-center h-screen">
             <button
-                class="btn btn-primary place-self-center"
+                class="place-self-center btn btn-primary"
                 on:click=move |_| {
                     connect_ibis_wiki.dispatch(());
                 }
diff --git a/src/frontend/components/credentials.rs b/src/frontend/components/credentials.rs
index fa6b373..8dc1dcd 100644
--- a/src/frontend/components/credentials.rs
+++ b/src/frontend/components/credentials.rs
@@ -19,7 +19,7 @@ pub fn CredentialsForm(
 
     view! {
         <form class="form-control max-w-80" on:submit=|ev| ev.prevent_default()>
-            <h1 class="text-4xl font-bold font-serif my-4 grow max-w-fit">{title}</h1>
+            <h1 class="my-4 font-serif text-4xl font-bold grow max-w-fit">{title}</h1>
             {move || {
                 error
                     .get()
@@ -71,7 +71,7 @@ pub fn CredentialsForm(
 
             <div>
                 <button
-                    class="btn btn-primary my-2"
+                    class="my-2 btn btn-primary"
                     prop:disabled=move || button_is_disabled.get()
                     on:click=move |_| {
                         dispatch_action();
diff --git a/src/frontend/components/edit_list.rs b/src/frontend/components/edit_list.rs
index a8da53c..8b08248 100644
--- a/src/frontend/components/edit_list.rs
+++ b/src/frontend/components/edit_list.rs
@@ -40,9 +40,9 @@ pub fn EditList(edits: Vec<EditView>, for_article: bool) -> impl IntoView {
                             )
                         };
                         view! {
-                            <li class="card card-compact bg-base-100 card-bordered m-2 rounded-s">
+                            <li class="m-2 card card-compact bg-base-100 card-bordered rounded-s">
                                 <div class="card-body">
-                                    <a class="link link-primary text-lg w-full" href=path>
+                                    <a class="w-full text-lg link link-primary" href=path>
                                         {edit.edit.summary}
                                     </a>
                                     <p>{second_line}</p>
diff --git a/src/frontend/components/editor.rs b/src/frontend/components/editor.rs
index aa4553b..a0d07df 100644
--- a/src/frontend/components/editor.rs
+++ b/src/frontend/components/editor.rs
@@ -21,11 +21,11 @@ pub fn EditorView(
 
     view! {
         <div>
-            <div class="my-4 w-full flex max-sm:flex-col">
+            <div class="flex my-4 w-full max-sm:flex-col">
                 <textarea
                     prop:value=content
                     placeholder="Article text..."
-                    class="grow textarea textarea-primary min-h-80 resize-none text-base text-base"
+                    class="text-base text-base resize-none grow textarea textarea-primary min-h-80"
                     on:input=move |evt| {
                         let val = event_target_value(&evt);
                         set_preview.set(render_markdown(&val));
@@ -34,14 +34,14 @@ pub fn EditorView(
                     node_ref=textarea_ref
                 ></textarea>
                 <Show when=move || { show_preview.get() }>
-                    <div class="divider md:hidden"></div>
+                    <div class="md:hidden divider"></div>
                     <div
-                        class="prose prose-slate basis-6/12 md:ms-4 text-base py-2 max-sm:px-2"
+                        class="py-2 text-base prose prose-slate basis-6/12 max-sm:px-2 md:ms-4"
                         inner_html=move || preview.get()
                     ></div>
                 </Show>
             </div>
-            <div class="flex h-min items-center mb-4">
+            <div class="flex items-center mb-4 h-min">
                 <button
                     class="btn btn-secondary"
                     on:click=move |_| { set_show_preview.update(|s| *s = !*s) }
diff --git a/src/frontend/components/nav.rs b/src/frontend/components/nav.rs
index af71bcf..910e6dc 100644
--- a/src/frontend/components/nav.rs
+++ b/src/frontend/components/nav.rs
@@ -20,27 +20,27 @@ pub fn Nav() -> impl IntoView {
     let (search_query, set_search_query) = signal(String::new());
     let mut dark_mode = expect_context::<DarkMode>();
     view! {
-        <nav class="max-sm:navbar p-2.5 h-full md:fixed md:w-64 max-sm: border-b md:border-e border-slate-400 border-solid">
+        <nav class="p-2.5 h-full border-b border-solid md:fixed md:w-64 max-sm:navbar max-sm: border-slate-400 md:border-e">
             <div
                 id="navbar-start"
-                class="max-sm:navbar-start max-sm:flex max-sm:dropdown max-sm:dropdown-bottom max-sm:dropdown-end max-sm:w-full md:h-full"
+                class="md:h-full max-sm:navbar-start max-sm:flex max-sm:dropdown max-sm:dropdown-bottom max-sm:dropdown-end max-sm:w-full"
             >
-                <h1 class="w-min md:hidden text-3xl font-bold font-serif">
+                <h1 class="w-min font-serif text-3xl font-bold md:hidden">
                     {CLIENT.hostname.clone()}
                 </h1>
                 <div class="flex-grow md:hidden"></div>
-                <button tabindex="0" class="btn btn-outline lg:hidden">
+                <button tabindex="0" class="lg:hidden btn btn-outline">
                     Menu
                 </button>
                 <div
                     tabindex="0"
-                    class="menu dropdown-content p-2 max-sm:rounded-box max-sm:z-[1] max-sm:shadow md:h-full"
+                    class="p-2 md:h-full menu dropdown-content max-sm:rounded-box max-sm:z-[1] max-sm:shadow"
                 >
                     <Transition>
                         <a href="/">
                             <img src="/logo.png" class="m-auto max-sm:hidden" />
                         </a>
-                        <h1 class="px-4 py-2 text-3xl font-bold font-serif sm:hidden">
+                        <h1 class="py-2 px-4 font-serif text-3xl font-bold sm:hidden">
                             {CLIENT.hostname.clone()}
                         </h1>
                         <ul>
@@ -68,7 +68,7 @@ pub fn Nav() -> impl IntoView {
                             </Show>
                             <li>
                                 <form
-                                    class="form-control m-0 p-1"
+                                    class="p-1 m-0 form-control"
                                     on:submit=move |ev| {
                                         ev.prevent_default();
                                         let navigate = use_navigate();
@@ -83,7 +83,7 @@ pub fn Nav() -> impl IntoView {
                                 >
                                     <input
                                         type="text"
-                                        class="input input-secondary input-bordered input-xs w-full rounded"
+                                        class="w-full rounded input input-secondary input-bordered input-xs"
                                         placeholder="Search"
                                         prop:value=search_query
                                         on:keyup=move |ev: ev::KeyboardEvent| {
@@ -126,7 +126,7 @@ pub fn Nav() -> impl IntoView {
                                         </a>
                                     </p>
                                     <button
-                                        class="btn btn-outline btn-xs w-min self-center"
+                                        class="self-center w-min btn btn-outline btn-xs"
                                         on:click=move |_| {
                                             logout_action.dispatch(());
                                         }
@@ -138,8 +138,8 @@ pub fn Nav() -> impl IntoView {
 
                         </Show>
                         <div class="grow min-h-2"></div>
-                        <div class="m-1 grid gap-2">
-                            <label class="flex cursor-pointer gap-2">
+                        <div class="grid gap-2 m-1">
+                            <label class="flex gap-2 cursor-pointer">
                                 <span class="label-text">Light</span>
                                 <input
                                     type="checkbox"
diff --git a/src/frontend/pages/article/create.rs b/src/frontend/pages/article/create.rs
index 537a8eb..5f21085 100644
--- a/src/frontend/pages/article/create.rs
+++ b/src/frontend/pages/article/create.rs
@@ -56,10 +56,10 @@ pub fn CreateArticle() -> impl IntoView {
     });
 
     view! {
-        <h1 class="text-4xl font-bold font-serif my-4">Create new Article</h1>
+        <h1 class="my-4 font-serif text-4xl font-bold">Create new Article</h1>
         <Suspense>
             <Show when=move || show_approval_message.get()>
-                <div class="alert alert-warning mb-4">
+                <div class="mb-4 alert alert-warning">
                     New articles require admin approval before being published
                 </div>
             </Show>
@@ -70,7 +70,7 @@ pub fn CreateArticle() -> impl IntoView {
                 view! {
                     <div class="item-view">
                         <input
-                            class="input input-primary w-full"
+                            class="w-full input input-primary"
                             type="text"
                             required
                             placeholder="Title"
@@ -93,7 +93,7 @@ pub fn CreateArticle() -> impl IntoView {
 
                         <div class="flex flex-row">
                             <input
-                                class="input input-primary grow mr-4"
+                                class="mr-4 input input-primary grow"
                                 type="text"
                                 placeholder="Edit summary"
                                 on:keyup=move |ev| {
diff --git a/src/frontend/pages/article/list.rs b/src/frontend/pages/article/list.rs
index 74c0353..a806495 100644
--- a/src/frontend/pages/article/list.rs
+++ b/src/frontend/pages/article/list.rs
@@ -48,7 +48,7 @@ pub fn ListArticles() -> impl IntoView {
     );
 
     view! {
-        <h1 class="text-4xl font-bold font-serif my-4">Most recently edited Articles</h1>
+        <h1 class="my-4 font-serif text-4xl font-bold">Most recently edited Articles</h1>
         <Suspense fallback=|| view! { "Loading..." }>
             <div class="divide-x">
                 <input
@@ -74,7 +74,7 @@ pub fn ListArticles() -> impl IntoView {
                 }
                 fallback=move || view! { <ConnectView res=articles /> }
             >
-                <ul class="list-none my-4">
+                <ul class="my-4 list-none">
                     <For
                         each=move || articles.get_default().unwrap_or_default()
                         key=|article| article.id
@@ -83,7 +83,7 @@ pub fn ListArticles() -> impl IntoView {
                         {
                             view! {
                                 <li>
-                                    <a class="link text-lg" href=article_path(&article)>
+                                    <a class="text-lg link" href=article_path(&article)>
                                         {article_title(&article)}
                                     </a>
                                 </li>
diff --git a/src/frontend/pages/diff.rs b/src/frontend/pages/diff.rs
index be803fa..684d8a9 100644
--- a/src/frontend/pages/diff.rs
+++ b/src/frontend/pages/diff.rs
@@ -28,9 +28,9 @@ pub fn EditDiff() -> impl IntoView {
                     render_date_time(edit.edit.published),
                 );
                 view! {
-                    <h2 class="text-xl font-bold font-serif my-2">{label}</h2>
+                    <h2 class="my-2 font-serif text-xl font-bold">{label}</h2>
                     <p>"by " {user_link(&edit.creator)}</p>
-                    <div class="bg-gray-200 p-2 rounded my-2">
+                    <div class="p-2 my-2 bg-gray-200 rounded">
                         <pre class="text-wrap">
                             <code>{edit.edit.diff.clone()}</code>
                         </pre>
diff --git a/src/frontend/pages/instance/details.rs b/src/frontend/pages/instance/details.rs
index eb7503b..92e3c35 100644
--- a/src/frontend/pages/instance/details.rs
+++ b/src/frontend/pages/instance/details.rs
@@ -44,7 +44,7 @@ pub fn InstanceDetails() -> impl IntoView {
                         view! {
                             <div class="grid gap-3 mt-4">
                                 <div class="flex flex-row items-center">
-                                    <h1 class="text-4xl font-bold font-serif w-full">
+                                    <h1 class="w-full font-serif text-4xl font-bold">
                                         {instance.domain}
                                     </h1>
                                     <InstanceFollowButton instance=instance_.clone() />
@@ -52,7 +52,7 @@ pub fn InstanceDetails() -> impl IntoView {
 
                                 <div class="divider"></div>
                                 <div>{instance.description}</div>
-                                <h2 class="text-xl font-bold font-serif">Articles</h2>
+                                <h2 class="font-serif text-xl font-bold">Articles</h2>
                                 <ul class="list-none">
                                     {move || {
                                         articles
@@ -62,7 +62,7 @@ pub fn InstanceDetails() -> impl IntoView {
                                                     .map(|a| {
                                                         view! {
                                                             <li>
-                                                                <a class="link text-lg" href=article_path(&a)>
+                                                                <a class="text-lg link" href=article_path(&a)>
                                                                     {article_title(&a)}
                                                                 </a>
                                                             </li>
diff --git a/src/frontend/pages/instance/list.rs b/src/frontend/pages/instance/list.rs
index 330984c..dab715e 100644
--- a/src/frontend/pages/instance/list.rs
+++ b/src/frontend/pages/instance/list.rs
@@ -9,13 +9,13 @@ pub fn ListInstances() -> impl IntoView {
     );
 
     view! {
-        <h1 class="text-4xl font-bold font-serif my-4">Instances</h1>
+        <h1 class="my-4 font-serif text-4xl font-bold">Instances</h1>
         <Suspense fallback=|| view! { "Loading..." }>
             <Show
                 when=move || { !instances.get().unwrap_or_default().is_empty() }
                 fallback=move || view! { <ConnectView res=instances /> }
             >
-                <ul class="list-none my-4">
+                <ul class="my-4 list-none">
                     {move || {
                         instances
                             .get()
@@ -25,7 +25,7 @@ pub fn ListInstances() -> impl IntoView {
                                         view! {
                                             <li>
                                                 <a
-                                                    class="link text-lg"
+                                                    class="text-lg link"
                                                     href=format!("/instance/{}", i.domain)
                                                 >
                                                     {i.domain.to_string()}
diff --git a/src/frontend/pages/notifications.rs b/src/frontend/pages/notifications.rs
index 380d927..4bb7381 100644
--- a/src/frontend/pages/notifications.rs
+++ b/src/frontend/pages/notifications.rs
@@ -12,7 +12,7 @@ pub fn Notifications() -> impl IntoView {
     );
 
     view! {
-        <h1 class="text-4xl font-bold font-serif my-6 grow flex-auto">Notifications</h1>
+        <h1 class="flex-auto my-6 font-serif text-4xl font-bold grow">Notifications</h1>
         <Suspense fallback=|| view! { "Loading..." }>
             <ul class="divide-y divide-solid">
                 {move || {
@@ -69,10 +69,10 @@ pub fn Notifications() -> impl IntoView {
                                     });
                                     view! {
                                         <li class="py-2">
-                                            <a class="link text-lg" href=link>
+                                            <a class="text-lg link" href=link>
                                                 {title}
                                             </a>
-                                            <div class="card-actions mt-2">
+                                            <div class="mt-2 card-actions">
                                                 <button
                                                     class="btn btn-sm btn-outline"
                                                     style=my_style
diff --git a/src/frontend/pages/search.rs b/src/frontend/pages/search.rs
index fd4fb0a..4dd54f7 100644
--- a/src/frontend/pages/search.rs
+++ b/src/frontend/pages/search.rs
@@ -51,7 +51,7 @@ pub fn Search() -> impl IntoView {
     });
 
     view! {
-        <h1 class="text-4xl font-bold font-serif my-6 grow flex-auto">
+        <h1 class="flex-auto my-6 font-serif text-4xl font-bold grow">
             "Search results for " {query}
         </h1>
         <Suspense fallback=|| {
@@ -88,7 +88,7 @@ pub fn Search() -> impl IntoView {
                                         vec![
                                             view! {
                                                 <li>
-                                                    <a class="link text-lg" href=format!("/instance/{domain}")>
+                                                    <a class="text-lg link" href=format!("/instance/{domain}")>
                                                         {domain.to_string()}
                                                     </a>
                                                 </li>
@@ -103,7 +103,7 @@ pub fn Search() -> impl IntoView {
                                         .map(|a| {
                                             view! {
                                                 <li>
-                                                    <a class="link text-lg" href=article_path(a)>
+                                                    <a class="text-lg link" href=article_path(a)>
                                                         {article_title(a)}
                                                     </a>
                                                 </li>
diff --git a/src/frontend/pages/user_profile.rs b/src/frontend/pages/user_profile.rs
index 6e0d08c..a11bd9f 100644
--- a/src/frontend/pages/user_profile.rs
+++ b/src/frontend/pages/user_profile.rs
@@ -47,11 +47,11 @@ pub fn UserProfile() -> impl IntoView {
                 let edits = edits.await;
                 let person = user_profile.await;
                 view! {
-                    <h1 class="text-4xl font-bold font-serif my-6 grow flex-auto">
+                    <h1 class="flex-auto my-6 font-serif text-4xl font-bold grow">
                         {user_title(&person)}
                     </h1>
 
-                    <h2 class="text-xl font-bold font-serif">Edits</h2>
+                    <h2 class="font-serif text-xl font-bold">Edits</h2>
                     <EditList edits=edits for_article=false />
                 }
             })}
