Skip to main content

Tailwind CSSImproved in 5.0+

Freeform includes sample formatting templates built to work with Tailwind CSS. In Freeform 5.17+, bundled Tailwind 3 samples include compiled Tailwind CSS through Freeform's asset loading; they do not require the browser CDN. For Tailwind 4 forms on your site, include the required Tailwind styles in your project.

The samples provide a starting point for customization. Ensure your project's Tailwind build includes any additional classes you introduce. The builder's Preview tab and installed demo templates provide framework assets for the bundled samples automatically.

The following are available:

  • Tailwind CSSTailwind 4 LightNew in 5.10.3+
  • Tailwind CSSTailwind 4 DarkNew in 5.10.3+
  • Tailwind CSSTailwind 3 (light)
  • Tailwind CSSTailwind 3 Dark

​Previews

Use the builder's Preview-only template selector to compare the bundled Tailwind samples without changing the form's saved template. Dark samples use a dark preview background, and fixed viewport sizes scale to fit your workspace.

​Video: Tailwind 4 Dark

​Screenshot: Tailwind 4 Light

​Live Demo

The live demo site highlights most features included in the sample templates, with some sections and data intentionally limited for demonstration purposes.

View Live Demo

​Guides

​Customization

You can easily customize any Tailwind CSS sample formatting template by using it as a starting point and adjusting it to fit your needs. For step-by-step instructions, check out the Custom Formatting Template guide.

View Complete Guide

These CDN examples are useful for development when your page needs Tailwind and does not already load it. Freeform 5.17+ bundled Tailwind 3 samples already include compiled CSS, so they do not need the Tailwind 3 CDN script below. For custom templates, use the asset setup appropriate to your project. Please see official Tailwind CSS documentation for latest versions and CDN links.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
Page Feedback