How to use Tailwind CSS To Build Your Contact Form In Ghost

Here is a step-by-step guide for creating an HTML form with Tailwind CSS and using it on your Ghost site!

These principles can also be applied to other custom HTML that you would like to style using Tailwind CSS.

Use Tailwind Play by Tailwind CSS

First we use Tailwind Play to write all of our HTML. It has a convenient  that compiles all your CSS that you can then copy and use!

Once you have your form  styled the way you like, you can copy the HTML over and add it to your new post!

⚠️
Beware of adjusting font style and font size. It's best to let those default to your Ghost theme.
0:00
/

Now that you have the HTML added we need to do the same thing with your CSS. Copy it from Tailwind Play and add it to the header in the Code Injection section of your Post's settings.

0:00
/

🎉  There you have it! You can now utilize the power of CSS when creating custom HTML blocks in your Ghost site!

Completed Custom Form

Here is my form's HTML  if you want to save some time. You can copy this to Tailwind Play and get the generated CSS.

<form action="#" method="POST">
  <div class="grid grid-cols-2 gap-x-2 gap-y-4">
    <div class="col-span-1">
      <label for="name" class="block font-medium">Name</label>
      <input type="text" name="name" id="name" class="w-full rounded border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required />
    </div>
    <div class="col-span-1">
      <label for="email" class="block font-medium dark:text-gray-200">Email</label>
      <input type="email" name="email" id="email" class="w-full rounded border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" required />
    </div>
    <div class="col-span-2">
      <label for="comments" class="block font-medium dark:text-gray-200">Comments/Questions/Ideas</label>
      <textarea name="comments" id="comments" class="block w-full rounded-md h-24 border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500" required></textarea>
    </div>
    <input type="hidden" name="_gotcha" />
    <div class="col-span-2">
      <button class="flex w-full items-center justify-center rounded bg-purple-700 p-2.5 text-gray-200">
        <svg class="mr-2 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
        </svg>
        Send
      </button>
    </div>
  </div>
</form>
HTML For Contact Form

Here is my Tailwind Play link: https://play.tailwindcss.com/diEERCLprR?size=540x720