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.
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.
🎉 There you have it! You can now utilize the power of CSS when creating custom HTML blocks in your Ghost site!
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.
Here is my Tailwind Play link: https://play.tailwindcss.com/diEERCLprR?size=540x720