Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide Tailwind plugin for forms. #8

Open
3 tasks
carltongibson opened this issue Apr 28, 2023 · 11 comments
Open
3 tasks

Provide Tailwind plugin for forms. #8

carltongibson opened this issue Apr 28, 2023 · 11 comments

Comments

@carltongibson
Copy link
Owner

carltongibson commented Apr 28, 2023

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.
carltongibson added a commit that referenced this issue Apr 28, 2023
forms to use Tailwind plugins, for Django's output. Here added a
`.dl-form` class with the idea to match the detail view styling. Refs
#8 for packaging a plugin.
@carltongibson carltongibson pinned this issue Apr 28, 2023
@Chris-May
Copy link

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
Copy link
Owner Author

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

@Chris-May
Copy link

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
Copy link
Owner Author

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
Copy link
Owner Author

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

@Chris-May
Copy link

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
Copy link

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
Copy link
Owner Author

carltongibson commented Sep 14, 2023

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
Copy link

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
Copy link
Owner Author

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
Copy link
Owner Author

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

@carltongibson carltongibson unpinned this issue Nov 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants