Adding contact form layout page & confirm - compiling Tailwind with congo as mod

[jinscoe]

Hello! Just getting started with HUGO and Congo to re-build a personal site.

I could use help in adding a custom contact form page and building Tailwind.

• I have installed Congo as a mod as recommended in the installation process
• I'm using Netlify and will use their form detection
• I would like to have my contact pages organized into a directory in layouts (the below is not working, but what i'm trying)
  • /layouts/_default/contact/
    • index.html (for the contact form itself)
    • thanks.html (for the confirmation page)
  • /content/contact (I'm unsure how I would structure this section)
• Reading on compiling Tailwind - I have npm installed on my machine, but am I understanding correctly that I can't properly compile custom Tailwind for these new payges when Congo is installed as a mod (I thought this was the preferred installation)

Here's the layout markup I think I would use for a netlify form with a confirmation

{{ define "main" }}
<article>
    <h1 class="mt-0 text-4xl font-extrabold">{{ .Title }}</h1>
    {{ .Content }}
    
    <form name="contact" method="POST" data-netlify="true" action="/contact/thanks" class="mt-8 space-y-6">
        <div>
            <label class="block text-sm font-medium mb-2">Name</label>
            <input type="text" name="name" required
                class="w-full px-4 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        </div>
        
        <div>
            <label class="block text-sm font-medium mb-2">Email</label>
            <input type="email" name="email" required
                class="w-full px-4 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
        </div>
        
        <div>
            <label class="block text-sm font-medium mb-2">Message</label>
            <textarea name="message" rows="5" required
                class="w-full px-4 py-2 border rounded-md dark:bg-gray-800 dark:border-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400"></textarea>
        </div>
        
        <div>
            <button type="submit"
                class="px-6 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 dark:bg-primary-400 dark:hover:bg-primary-300 transition-colors">
                Send Message
            </button>
        </div>
    </form>
</article>
{{ end }}

I could use guidance on how to properly add a custom page like this and how to properly build TailwindCSS for my custom page. Thanks and hopefully this is an ok place for this kind of question.