Provide Tailwind plugin for forms.

[carltongibson]

23.9 begins adding the Tailwind styling to the default templates.

Adds a dl-form class to <form> to enable styling the (new div-style) default Django {{ form }} output with a Tailwind plugin.

WIP example of that would be:

// in tailwind.config.js

  plugins: [
    require('@tailwindcss/forms'),  // assuming you're using this, but just an example. 
    plugin(function({ addComponents }) {
      addComponents({
        '.dl-form': {
          "@apply divide-y divide-gray-100": {},
          '& div': {
            "@apply px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0": {},
          },
          '& label': {
            "@apply text-sm font-medium leading-6 text-gray-900": {},
          },
          '& input': {
            "@apply mt-1 text-sm leading-6 text-gray-700": {},
          },
        },
    })
  }),
]

… which is similar (Note WIP) to the object_detail.html styles.

• [ ] Wrap that into a freestanding plugin.
• [ ] Ship it with the neapolitan package.
• [ ] Resolve how best to make it available to Tailwind. (npm link? NODE_PATH...)
  • DO NOT have to maintain a separate npm package.

[Chris-May]

Apologies if this is covering ground you’ve already thought about. I haven’t tried this yet, and I’ve been looking at different things on my phone while on vacation, but this is something I’d like to help solve for you and my own projects.

My first thought would leverage a custom Tailwind CSS plugin that would be available for the user to add to their tailwind configuration.

I fear that would be problematic, as I’m not sure how to reliably have JavaScript aware of that plugin without node/npm/etc overwriting it because it wouldn’t be in a package.json file.

[carltongibson]

Yes, this is the bit I'm unsure of. How best to export the JS module...

[Chris-May]

Roger that.

I spent most of my time hiking Bryce Canyon thinking about this.

I imagine this scenario:

• A user installs your package with pip, which installs a script they run to install your npm package, like neapolitan install.

• The user runs neapolitan install. The Python script installs the npm package by running npm install {path to package's installed folder}/{path to the embedded npm module}.

Does that sound like what you want?

[carltongibson]

Yes! I was looking at that, or non link, or setting NODE_PATH, or ... -- but I have no idea what's best.

I'd imagine your suggestion is as close to normal as could be, so likely the way to go? 🤔

[carltongibson]

Given Neapolitan is a Django app, maybe the script could be a management command 🤔

[Chris-May]

I'd imagine your suggestion is as close to normal as could be, so likely the way to go? 🤔

This is what I was thinking. There will probably still be some edge cases.

With it being a Django app, the first thing I wonder about is finding where the user's node modules would be installed. I guess it could be a configuration, or get passed into the script.

I've been out of the JS ecosystem long enough that I wonder if it's okay to expect to use npm. I know there were other executables around, and I'm not sure how they compare with npm. I imagine most python developers would go that route.

[smithdc1]

Hi all 👋

Just to share my journey. I came across this (unstyled forms) and solved it the only way I knew how. In my template I now have:

{{ form|crispy }}

This will also give nice styles for errors, help text and so on. Likely you don't want to take on a couple of extra dependencies though.

[carltongibson]

That's a totally sensible approach @smithdc1. Crispy will give you great looking forms with nothing more than that.

If you fancied, I'd be happy to add an example project showing that set up, or just a docs How To type thing since it's just the settings and template changes right? (I heard you had a blog? I'd link to a post too 😜)

I probably wouldn't make it a default dependency though... I both want to keep it small, and play with what works with just Django now.

[jefftriplett]

I'm not sure how critical shipping with a config is versus having one in the repo/mentioning in the docs that people can reference to get started. I have been copying Neapolitan's templates into projects and modifying them.

If people are using TailwindCSS to start, I suspect they have everything already setup. If you have opinions about custom styles, as long as those are possible to copy and paste, then that should be good enough IMO.

PS: I have had good mileage from https://django-crispy-forms.github.io/crispy-tailwind/

Cheers 🎉

[carltongibson]

Thanks @jefftriplett. Yes, I've been pondering whether just (cough) a guide on styling the forms, with a few options is the way to go.

🤔

[carltongibson]

FWIW: I'm deliberately waiting for Django 5.0's improved form rendering before I investigate the "Custom Form Templates" option fully.