Refactor forms.module.css styles to Tailwind styles in forms

Author: webstackdev

src/components/Forms/Contact/index.astro

@@ -1,7 +1,6 @@
 ---
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
 import Confetti from '@components/Animations/Confetti/index.astro'
-import styles from '../forms.module.css'
 import './uppy-audio.css'
 import './uppy-core.css'
 import './uppy-dashboard.css'
@@ -16,7 +15,7 @@ import './validation.css'
       <slot name="contact-form-header" />
 
       <form
-      class:list={[styles.formScope, 'space-y-8']}
+      class="space-y-8"
         id="contactForm"
         method="post"
         enctype="multipart/form-data"
@@ -40,7 +39,7 @@ import './validation.css'
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="space-y-2">
-              <label for="name" class="block"
+              <label for="name" class="block text-content-active text-sm font-medium"
                 >Full Name *</label
               >
               <input
@@ -65,7 +64,7 @@ import './validation.css'
             </div>
 
             <div class="space-y-2">
-              <label for="email" class="block"
+              <label for="email" class="block text-content-active text-sm font-medium"
                 >Email Address *</label
               >
               <input
@@ -90,7 +89,7 @@ import './validation.css'
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="space-y-2">
-              <label for="company" class="block"
+              <label for="company" class="block text-content-active text-sm font-medium"
                 >Company Name</label
               >
               <input
@@ -104,7 +103,7 @@ import './validation.css'
             </div>
 
             <div class="space-y-2">
-              <label for="phone" class="block"
+              <label for="phone" class="block text-content-active text-sm font-medium"
                 >Phone Number</label
               >
               <input
@@ -127,7 +126,7 @@ import './validation.css'
 
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="space-y-2">
-              <label for="project_type" class="block"
+              <label for="project_type" class="block text-content-active text-sm font-medium"
                 >Project Type</label
               >
               <select
@@ -149,7 +148,7 @@ import './validation.css'
             </div>
 
             <div class="space-y-2">
-              <label for="budget" class="block"
+              <label for="budget" class="block text-content-active text-sm font-medium"
                 >Budget Range *</label
               >
               <select
@@ -168,7 +167,7 @@ import './validation.css'
           </div>
 
           <div class="space-y-2">
-            <label for="timeline" class="block"
+            <label for="timeline" class="block text-content-active text-sm font-medium"
               >Project Timeline *</label
             >
             <select
@@ -187,7 +186,7 @@ import './validation.css'
           </div>
 
           <div class="space-y-2">
-            <label for="message" class="block"
+            <label for="message" class="block text-content-active text-sm font-medium"
               >Project Description *</label
             >
             <textarea

src/components/Forms/Download/index.astro

@@ -2,7 +2,6 @@
 // DownloadForm.astro - Gated form for download resources
 import Confetti from '@components/Animations/Confetti/index.astro'
 import GDPRConsent from '@components/Consent/Checkbox/index.astro'
-import styles from '../forms.module.css'
 
 export interface Props {
   title: string
@@ -29,15 +28,15 @@ const downloadUrl = `/downloads/${fileName}`
     </div>
 
     <form
-      class:list={[styles.formScope, 'space-y-4']}
+      class="space-y-4"
       id="downloadForm"
       method="post"
       data-download-url={downloadUrl}
     >
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <!-- First Name -->
         <div class="space-y-2">
-          <label for="firstName" class="block">
+          <label for="firstName" class="block text-content-active text-sm font-medium">
             First Name <span class="text-red-500">*</span>
           </label>
           <input
@@ -55,7 +54,7 @@ const downloadUrl = `/downloads/${fileName}`
 
         <!-- Last Name -->
         <div class="space-y-2">
-          <label for="lastName" class="block">
+          <label for="lastName" class="block text-content-active text-sm font-medium">
             Last Name <span class="text-red-500">*</span>
           </label>
           <input
@@ -74,7 +73,7 @@ const downloadUrl = `/downloads/${fileName}`
 
       <!-- Work Email -->
       <div class="space-y-2">
-        <label for="workEmail" class="block">
+        <label for="workEmail" class="block text-content-active text-sm font-medium">
           Work Email <span class="text-red-500">*</span>
         </label>
         <input
@@ -91,7 +90,7 @@ const downloadUrl = `/downloads/${fileName}`
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <!-- Job Title -->
         <div class="space-y-2">
-          <label for="jobTitle" class="block">
+          <label for="jobTitle" class="block text-content-active text-sm font-medium">
             Job Title <span class="text-red-500">*</span>
           </label>
           <input
@@ -108,7 +107,7 @@ const downloadUrl = `/downloads/${fileName}`
 
         <!-- Company Name -->
         <div class="space-y-2">
-          <label for="companyName" class="block">
+          <label for="companyName" class="block text-content-active text-sm font-medium">
             Company Name <span class="text-red-500">*</span>
           </label>
           <input

src/components/Forms/Privacy/index.astro

@@ -1,6 +1,5 @@
 ---
 import { statusMessages } from '@components/Forms/Privacy/server'
-import styles from '../forms.module.css'
 
 export interface Props {
   status?: string | null
@@ -55,9 +54,9 @@ const statusMessage = status ? statusMessages[status] : undefined
           Request a copy of personal data we have about you, including consent records and newsletter subscriptions.
         </p>
 
-        <form id="access-form" class:list={[styles.formScope, 'mt-6 space-y-4']} novalidate>
+        <form id="access-form" class="mt-6 space-y-4" novalidate>
           <div class="space-y-2">
-            <label for="access-email" class="block">Email Address</label>
+            <label for="access-email" class="block text-content-active text-sm font-medium">Email Address</label>
             <input
               type="email"
               id="access-email"
@@ -96,9 +95,9 @@ const statusMessage = status ? statusMessages[status] : undefined
           This action cannot be undone.
         </div>
 
-        <form id="delete-form" class:list={[styles.formScope, 'mt-6 space-y-4']} novalidate>
+        <form id="delete-form" class="mt-6 space-y-4" novalidate>
           <div class="space-y-2">
-            <label for="delete-email" class="block">Email Address</label>
+            <label for="delete-email" class="block text-content-active text-sm font-medium">Email Address</label>
             <input
               type="email"
               id="delete-email"