README.md

Tailwind Theme

Prerequisites:

• Tailwind CSS v3 or greater
• @tailwindcss/forms plugin

Usage:

---
import tailwind from "astro-forms/themes/tailwind";
import Form from "../components/Form/Form.astro";
---

<Form schema={schema} theme={tailwind} action="/" method="post" />

Important

Make sure your Tailwind config file has the following:

module.exports = {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}",
    "./node_modules/astro-forms/themes/tailwind/*.astro",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

You can either add the @tailwindcss/forms plugin to your Tailwind config file, or you may import the Tailwind config from the package.

module.exports = {
  content: [
    "./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}",
    "./node_modules/astro-forms/themes/tailwind/*.astro",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};

// Or

module.exports = {
  presets: [require("astro-forms/themes/tailwind/tailwind.config.cjs")],
  content: [
    "./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}",
    "./node_modules/astro-forms/themes/tailwind/*.astro",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};