TailwindCSS v2.0 support

justinmayer commented 3 years ago

Hi Tim! First of all, many thanks for creating such a useful project. I really appreciate all your work on making it easier to use TailwindCSS with Django. :sparkles:

As you may have heard, TailwindCSS v2.0 was just released this week, and while I don’t yet fully understand the scope of the new changes, the TailwindCSS folks have provided a v2 upgrade guide.

It’s not clear to me what might be needed for this project to fully support the changes in the new version. Do you have any thoughts about what might be required?

timonweb commented 3 years ago

Hi Justin, thanks a lot :) I haven't tried v2.0 yet, but I think the current setup can already work with 2.0 just fine, you need to update the generated theme/package.json with the correct version, and that should be it.

I'd probably have to add some python command that does the upgrade automatically or release a new version with the v2.

The tricky part here is that now we have two versions, and I'm not sure whether people would still want v1, or it's ok to scrap v1 and only support v2. That's the question. To me, v2 looks like an incremental update, so I'd drop v1 support and treat v2 as the next update of the dependency.

justinmayer commented 3 years ago

Many thanks for the quick reply, Tim. I just saw the new Django-Tailwind v0.11 release and its handy update feature. Nice! I was about to submit a request for exactly that feature, but you clearly beat me to it. 😁 (By the way, you might want to update the changelog, which is currently missing an entry for version 0.11.)

I tried to use the new feature to upgrade to Tailwind CSS v2, but it didn't exactly go as I expected. Here's what I did:

➤ django-admin tailwind check-updates
Package       Current  Wanted  Latest  Location
autoprefixer    9.8.6   9.8.6  10.0.2  django_tailwind
node-sass      4.14.1  4.14.1   5.0.0  django_tailwind
postcss-cli     7.1.1   7.1.2   8.3.0  django_tailwind
postcss-scss    2.1.1   2.1.1   3.0.4  django_tailwind
tailwindcss     1.6.2   1.9.6   2.0.1  django_tailwind

➤ django-admin tailwind update
npm WARN django_tailwind@ No description
npm WARN django_tailwind@ No repository field.

+ postcss-cli@7.1.2
+ tailwindcss@1.9.6
[…]

So far, so good. Looks like Tailwind CSS v1 is up-to-date:

➤ django-admin tailwind check-updates
Package       Current  Wanted  Latest  Location
autoprefixer    9.8.6   9.8.6  10.0.2  django_tailwind
node-sass      4.14.1  4.14.1   5.0.0  django_tailwind
postcss-cli     7.1.2   7.1.2   8.3.0  django_tailwind
postcss-scss    2.1.1   2.1.1   3.0.4  django_tailwind
tailwindcss     1.9.6   1.9.6   2.0.1  django_tailwind

Then, in theme/static_src/package.json, I changed:

"tailwindcss": "^1.6.2",

… to:

"tailwindcss": "^2.0.1",

Then I ran tailwind check-updates again:

➤ django-admin tailwind check-updates
Package       Current  Wanted  Latest  Location
autoprefixer    9.8.6   9.8.6  10.0.2  django_tailwind
node-sass      4.14.1  4.14.1   5.0.0  django_tailwind
postcss-cli     7.1.2   7.1.2   8.3.0  django_tailwind
postcss-scss    2.1.1   2.1.1   3.0.4  django_tailwind

… and as you can see, tailwindcss has disappeared from the list, and subsequently running django-admin tailwind update has no effect.

Any idea what I might be missing?

timonweb commented 3 years ago

Since the major version has changed, and you already have one installed, you need to run python manage.py tailwind install instead of python manage.py tailwind update, that's because of how node's npm command work. Behind the scenes we run npm install.

I've started my work on bringing Tailwind CSS 2 support in, check PR draft here: https://github.com/timonweb/django-tailwind/pull/40 and also the contents of the app_template_v2 here: https://github.com/timonweb/django-tailwind/tree/tailwind2/tailwind/app_template_v2/static_src. It should give you some hints on what needs to be upgraded in your existing project. Haven't tested it thoroughly yet, but managed to generate styles.css with this config.

justinmayer commented 3 years ago

I haven't yet customized anything in the theme app, so it was easy for me to toss it and re-generate it from the code in the draft PR branch. After doing so, everything does indeed appear to work very well — I haven't noticed any issues yet with Tailwind CSS v2 in my test Django site. Bravo! 👏

timonweb commented 3 years ago

@justinmayer yay, glad to hear that! You're the first user 👍

jaoxford commented 3 years ago

Hi.

We are also trying to upgrade to tailwindcss 2.0.

When running python manage.py tailwind check-updates I get the error

Traceback (most recent call last):
  File "manage.py", line 16, in <module>
    execute_from_command_line(sys.argv)
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/__init__.py", line 381, in execute_from_command_line
    utility.execute()
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/__init__.py", line 375, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/base.py", line 323, in run_from_argv
    self.execute(*args, **cmd_options)
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/base.py", line 364, in execute
    output = self.handle(*args, **options)
  File "/path_to_venv/lib/python3.8/site-packages/tailwind/management/commands/tailwind.py", line 40, in handle
    return self.handle_labels(*labels, **options)
  File "/path_to_venv/lib/python3.8/site-packages/tailwind/management/commands/tailwind.py", line 43, in handle_labels
    self.validate.acceptable_label(labels[0])
  File "/path_to_venv/lib/python3.8/site-packages/tailwind/validate.py", line 17, in acceptable_label
    raise ValidationError(f"Subcommand {label} doesn't exist")
tailwind.validate.ValidationError: Subcommand check-updates doesn't exist

Alternatively if I run python manage.py tailwind update

Traceback (most recent call last):
  File "manage.py", line 16, in <module>
    execute_from_command_line(sys.argv)
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/__init__.py", line 381, in execute_from_command_line
    utility.execute()
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/__init__.py", line 375, in execute
    self.fetch_command(subcommand).run_from_argv(self.argv)
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/base.py", line 323, in run_from_argv
    self.execute(*args, **cmd_options)
  File "/path_to_venv/lib/python3.8/site-packages/django/core/management/base.py", line 364, in execute
    output = self.handle(*args, **options)
  File "/path_to_venv/lib/python3.8/site-packages/tailwind/management/commands/tailwind.py", line 40, in handle
    return self.handle_labels(*labels, **options)
  File "/path_to_venv/lib/python3.8/site-packages/tailwind/management/commands/tailwind.py", line 43, in handle_labels
    self.validate.acceptable_label(labels[0])
  File "/path_to_venv/lib/python3.8/site-packages/tailwind/validate.py", line 17, in acceptable_label
    raise ValidationError(f"Subcommand {label} doesn't exist")
tailwind.validate.ValidationError: Subcommand update doesn't exist

We already have a lot of SCSS code in our theme application. So we can't really toss it out as the above poster has done.

Any ideas, or is tailwind 2.0 currently not compatible with this plugin?

justinmayer commented 3 years ago

Tim's work in #40 has not been merged yet, so if you are working from the latest release or the master branch, than it's natural that new subcommand would not exist. To test the code in the Tailwind CSS v2 PR, try installing via:

pip install git+https://github.com/timonweb/django-tailwind.git@tailwind2

jaoxford commented 3 years ago

Thanks @justinmayer . I had saw it in the readme so I thought it was a live feature. Just installed the branch and all OK.

Now how could I go about upgrading to tailwind 2.0.0 & getting it to work?

timonweb commented 3 years ago

@jaoxford if you're on the latest release, the command should be working, if it doesn't, that it's a bug, I need to fix it. Re Tailwind v2.0 support, it's almost there, I just need to finalize things here and there. But check-updates command will not help you there since it checks for updates within a major version. So I'd have to write a readme on how to switch between 1.x and 2.x, and it takes time, so please wait a bit.

jaoxford commented 3 years ago

@timonweb I am running version 11 the command errors out on this version, when I install the branch that @justinmayer suggested everything is OK.

Thanks for the good work, we'll wait :smile:

timonweb commented 3 years ago

@jaoxford check-updates was added in 0.11.1: https://github.com/timonweb/django-tailwind/blob/master/CHANGELOG.md#0111

The tailwind 2.0 support has been merged into master, the PYPI release is following this week. I'd appreciate of you could check master and let me know if everything is well.

jaoxford commented 3 years ago

Great. Thanks for getting back to me. I'll keep you posted on what happens.

jaoxford commented 3 years ago

HI @timonweb,

I just installed the latest release from master with pip install git+https://github.com/timonweb/django-tailwind.git

Checking the update and running it went smoothly.

However, It seems that version 2.0.0 isn't installed. And 1.9.6 is the preferred choice.

Package         Current  Wanted  Latest  Location
autoprefixer      9.8.6   9.8.6  10.0.4  django_tailwind
node-sass        4.14.1  4.14.1   5.0.0  django_tailwind
postcss-cli       6.1.3   6.1.3   8.3.0  django_tailwind
postcss-import   12.0.1  12.0.1  13.0.0  django_tailwind
postcss-mixins    6.2.3   6.2.3   7.0.1  django_tailwind
postcss-scss      2.1.1   2.1.1   3.0.4  django_tailwind
tailwindcss       1.9.6   1.9.6   2.0.1  django_tailwind

timonweb commented 3 years ago

The Tailwind CSS 2.0 support has been released! We install Tailwind CSS 2.0 by default now.

@jaoxford you can't use update command to switch from 1 to 2, because it respects semver. In your case I suggest to generate a new app via python manage.py tailwind init new_app and then copy contents of that new app's package.json into your current tailwind app package.json. What you really need to copy is devDependencies part. But back yourself up before doing that!

timonweb commented 3 years ago

@jaoxford you'll also need to copy postcss.config.js and tailwind.config.js from that new app.

justinmayer commented 3 years ago

Congrats, Tim! Very exciting to see v1.0.0 released with Tailwind CSS v2 support. You might consider updating the CHANGELOG to include details for the v1.0.0 release. 🎉

timonweb commented 3 years ago

Oh indeed, I always forget doing it. Thanks!

timonweb / django-tailwind

TailwindCSS v2.0 support #38