extract tailwind classes to bare css

src/styles/grid_form.rs

@@ -6,20 +6,20 @@ use crate::controls::{
 use leptos::*;
 use leptos_router::Form;
 
-pub enum TailwindGridStylingAttributes {
+pub enum GridFormStylingAttributes {
     Width(u32),
 }
 
 #[derive(Clone, Copy, Debug, Default, Hash, PartialEq, Eq, PartialOrd, Ord)]
-pub struct TailwindGridFormStyle;
+pub struct GridFormStyle;
 
-impl FormStyle for TailwindGridFormStyle {
-    type StylingAttributes = TailwindGridStylingAttributes;
+impl FormStyle for GridFormStyle {
+    type StylingAttributes = GridFormStylingAttributes;
 
     // TODO: something about an on-submit thing
     fn form_frame(&self, children: View) -> View {
         view! {
-            <Form action="">
+            <Form action="" class="form_grid">
                 {children}
             </Form>
         }
@@ -28,7 +28,7 @@ impl FormStyle for TailwindGridFormStyle {
 
     fn heading(&self, control: ControlRenderData<Self, HeadingData>) -> View {
         view! {
-            <h2 class="text-xl py-2 text-center font-bold text-gray-700 border-b-2 border-gray-800/60 mb-8">
+            <h2 class="form_heading">
                 {&control.data.title}
             </h2>
         }
@@ -45,16 +45,13 @@ impl FormStyle for TailwindGridFormStyle {
         view! {
             <div>
                 <div>
-                <label
-                    for={&control.data.name}
-                    class="block uppercase tracking-wide text-left text-gray-700 text-md font-bold ml-2 mb-1 inline"
-                >
+                <label for={&control.data.name} class="form_label">
                     {control.data.label.as_ref()}
                 </label>
                 <span class="inline pl-2 text-red-600">
                     {move || format!("{}", validation_state.get().err().unwrap_or_default())}
                 </span>
-                </div> 
+                </div>
             <input
                 // TODO:
                 type=control.data.input_type
@@ -65,10 +62,12 @@ impl FormStyle for TailwindGridFormStyle {
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
+                class=("form_input_invalid", move || validation_state.get().is_err())
             />
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn select(
@@ -102,7 +101,7 @@ impl FormStyle for TailwindGridFormStyle {
             <select
                 id=&control.data.name
                 name=control.data.name
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
@@ -110,7 +109,8 @@ impl FormStyle for TailwindGridFormStyle {
                 {options_view}
             </select>
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn submit(&self, control: ControlRenderData<Self, SubmitData>) -> View {
@@ -118,7 +118,7 @@ impl FormStyle for TailwindGridFormStyle {
             <input
                 type="submit"
                 value=control.data.text
-                class="col-span-full rounded-2xl bg-sky-700 text-white font-bold hover:cursor-pointer hover:bg-sky-600 px-5 py-3 mx-auto mt-4"
+                class="w-full form_submit"
             />
         }
         .into_view()
@@ -138,14 +138,15 @@ impl FormStyle for TailwindGridFormStyle {
                 id=&control.data.name
                 name=control.data.name
                 placeholder=control.data.placeholder
-                class="block w-full bg-gray-100 border-2 border-gray-300 text-gray-700 py-2 px-4 rounded-lg leading-tight focus:outline-none focus:bg-white focus:border-sky-400"
+                class="form_input"
                 prop:value=move || value_getter.get()
                 on:change=move |ev| {
                     value_setter(event_target_value(&ev));
                 }
             />
             </div>
-        }.into_view()
+        }
+        .into_view()
     }
 
     fn custom_component(&self, view: View) -> View {

src/styles/mod.rs

@@ -1,6 +1,5 @@
-mod tw_grid;
-
-pub use tw_grid::{TailwindGridFormStyle, TailwindGridStylingAttributes};
+mod grid_form;
+pub use grid_form::{GridFormStyle, GridFormStylingAttributes};
 
 use crate::controls::{
     heading::HeadingData, select::SelectData, submit::SubmitData, text_area::TextAreaData,