Adds support for Tailwind CSS v4+

Author: timonweb

.pre-commit-config.yaml

@@ -35,4 +35,4 @@ repos:
           - flake8-comprehensions
           - flake8-tidy-imports
           - flake8-typing-imports
-exclude: src/tailwind/app_template/{{cookiecutter.app_name}}/apps.py
+exclude: 'src/tailwind/app_template_v3/{{cookiecutter.app_name}}/apps.py|src/tailwind/app_template_v4/{{cookiecutter.app_name}}/apps.py'

docs/index.md

@@ -17,6 +17,5 @@ Contents
 * [Settings](settings.md)
 * [Template tags](templatetags.md)
 * [Migrating from browser-sync to django-browser-reload](django_browser_reload.md)
-* [Upgrading from v2 to v3](upgrade.md)
 * [Updating Tailwind CSS and its dependencies](updating.md)
 * [Running in docker](docker.md)

docs/upgrade.md

@@ -1,28 +1,25 @@
 {
   "name": "theme",
-  "version": "3.9.0",
+  "version": "4.0.0",
   "description": "",
   "scripts": {
     "start": "npm run dev",
     "build": "npm run build:clean && npm run build:tailwind",
     "build:clean": "rimraf ../static/css/dist",
-    "build:tailwind": "cross-env NODE_ENV=production tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css --minify",
-    "dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",
-    "tailwindcss": "node ./node_modules/tailwindcss/lib/cli.js"
+    "build:tailwind": "cross-env NODE_ENV=production postcss ./src/styles.css -o ../static/css/dist/styles.css --minify",
+    "dev": "cross-env NODE_ENV=development postcss ./src/styles.css -o ../static/css/dist/styles.css --watch"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/postcss": "^4.1.0",
     "cross-env": "^7.0.3",
     "postcss": "^8.5.3",
-    "postcss-import": "^16.1.0",
+    "postcss-cli": "^11.0.1",
     "postcss-nested": "^7.0.2",
     "postcss-simple-vars": "^7.0.1",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^4.1.0"
   }
 }

example/theme/static_src/package.json

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    "postcss-import": {},
+    "@tailwindcss/postcss": {},
     "postcss-simple-vars": {},
     "postcss-nested": {}
   },

example/theme/static_src/postcss.config.js

@@ -1,3 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+/**
+  * A catch-all path to Django template files, JavaScript, and Python files
+  * that contain Tailwind CSS classes and will be scanned by Tailwind to generate the final CSS file.
+  *
+  * If your final CSS file is not being updated after code changes, you may want to broaden the scope of this path.
+  */
+@source "../../**/*.{html,py,js}";

example/theme/static_src/src/styles.css

@@ -0,0 +1,6 @@
+{
+  "app_name": "",
+  "_copy_without_render": [
+    "templates/base.html"
+  ]
+}

src/tailwind/app_template/{{cookiecutter.app_name}}/static_src/tailwind.config.js

@@ -0,0 +1,12 @@
+import re
+import sys
+
+APP_NAME_REGEX = r"^[_a-zA-Z][_a-zA-Z0-9]+$"
+
+app_name = "{{ cookiecutter.app_name }}"
+
+if not re.match(APP_NAME_REGEX, app_name):
+    print(f"ERROR: {app_name} is not a valid Django app name!")
+
+    # exits with status 1 to indicate failure
+    sys.exit(1)

src/tailwind/app_template/cookiecutter.json renamed to src/tailwind/app_template_v3/cookiecutter.json

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class {{ cookiecutter.app_name[0]|upper }}{{ cookiecutter.app_name[1:] }}Config(AppConfig):
+    name = '{{ cookiecutter.app_name }}'

src/tailwind/app_template/hooks/pre_gen_project.py renamed to src/tailwind/app_template_v3/hooks/pre_gen_project.py

@@ -0,0 +1 @@
+node_modules

src/tailwind/app_template/{{cookiecutter.app_name}}/__init__.py renamed to src/tailwind/app_template_v3/{{cookiecutter.app_name}}/__init__.py

@@ -0,0 +1,25 @@
+{
+  "name": "{{ cookiecutter.app_name }}",
+  "version": "4.0.0",
+  "description": "",
+  "scripts": {
+    "start": "npm run dev",
+    "build": "npm run build:clean && npm run build:tailwind",
+    "build:clean": "rimraf ../static/css/dist",
+    "build:tailwind": "cross-env NODE_ENV=production postcss ./src/styles.css -o ../static/css/dist/styles.css --minify",
+    "dev": "cross-env NODE_ENV=development postcss ./src/styles.css -o ../static/css/dist/styles.css --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
+    "postcss-nested": "^7.0.2",
+    "postcss-simple-vars": "^7.0.1",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^4.1.0"
+  }
+}

src/tailwind/app_template/{{cookiecutter.app_name}}/apps.py renamed to src/tailwind/app_template_v3/{{cookiecutter.app_name}}/apps.py

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    "postcss-simple-vars": {},
+    "postcss-nested": {}
+  },
+}

src/tailwind/app_template/{{cookiecutter.app_name}}/static_src/.gitignore renamed to src/tailwind/app_template_v3/{{cookiecutter.app_name}}/static_src/.gitignore

@@ -0,0 +1,9 @@
+@import "tailwindcss";
+
+/**
+  * A catch-all path to Django template files, JavaScript, and Python files
+  * that contain Tailwind CSS classes and will be scanned by Tailwind to generate the final CSS file.
+  *
+  * If your final CSS file is not being updated after code changes, you may want to broaden the scope of this path.
+  */
+@source "../../**/*.{html,py,js}";

src/tailwind/app_template/{{cookiecutter.app_name}}/static_src/package.json renamed to src/tailwind/app_template_v3/{{cookiecutter.app_name}}/static_src/package.json

@@ -0,0 +1,19 @@
+{% load static tailwind_tags %}
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+    <title>Django Tailwind</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		{% tailwind_css %}
+	</head>
+
+	<body class="bg-gray-50 font-serif leading-normal tracking-normal">
+		<div class="container mx-auto">
+			<section class="flex items-center justify-center h-screen">
+				<h1 class="text-5xl">Django + Tailwind = ❤️</h1>
+			</section>
+		</div>
+	</body>
+</html>

src/tailwind/app_template/{{cookiecutter.app_name}}/static_src/postcss.config.js renamed to src/tailwind/app_template_v3/{{cookiecutter.app_name}}/static_src/postcss.config.js

@@ -36,6 +36,12 @@ def add_arguments(self, parser):
             action="store_true",
             help="Initializes Tailwind project without user prompts",
         )
+        parser.add_argument(
+            "--tailwind-version",
+            default="4",
+            choices=["3", "4"],
+            help="Specifies the Tailwind version to install",
+        )
         parser.add_argument(
             "--app-name",
             help="Sets default app name on Tailwind project initialization",
@@ -78,7 +84,7 @@ def handle_init_command(self, **options):
             app_path = cookiecutter(
                 os.path.dirname(os.path.dirname(os.path.dirname(__file__))),
                 output_dir=os.getcwd(),
-                directory="app_template",
+                directory=f"app_template_v{options['tailwind_version']}",
                 no_input=options["no_input"],
                 overwrite_if_exists=False,
                 extra_context={"app_name": options["app_name"].strip() if options.get("app_name") else "theme"},

src/tailwind/app_template/{{cookiecutter.app_name}}/static_src/src/styles.css renamed to src/tailwind/app_template_v3/{{cookiecutter.app_name}}/static_src/src/styles.css

@@ -28,7 +28,7 @@ def is_installed(self, app_name):
             raise ValidationError(f"{app_name} is not in INSTALLED_APPS")
 
     def is_tailwind_app(self, app_name):
-        if not os.path.isfile(os.path.join(get_tailwind_src_path(app_name), "tailwind.config.js")):
+        if not os.path.isfile(os.path.join(get_tailwind_src_path(app_name), "package.json")):
             raise ValidationError(f"'{app_name}' isn't a Tailwind app")
 
     def has_settings(self):

example/theme/static_src/tailwind.config.js renamed to src/tailwind/app_template_v3/{{cookiecutter.app_name}}/static_src/tailwind.config.js

@@ -10,10 +10,10 @@
 
 
 @pytest.mark.parametrize("no_package_lock", [True, False])
-def test_tailwind_install_and_build(no_package_lock, settings):
+def test_tailwind_install_and_build_v3(no_package_lock, settings):
     app_name = f'test_theme_{str(uuid.uuid1()).replace("-", "_")}'
 
-    call_command("tailwind", "init", "--app-name", app_name, "--no-input")
+    call_command("tailwind", "init", "--app-name", app_name, "--no-input", "--tailwind-version", "3")
 
     settings.INSTALLED_APPS += [app_name]
     settings.TAILWIND_APP_NAME = app_name
@@ -47,3 +47,43 @@ def test_tailwind_install_and_build(no_package_lock, settings):
     ), "Tailwind has built a css/styles.css file"
 
     cleanup_theme_app_dir(app_name)
+
+
+@pytest.mark.parametrize("no_package_lock", [True, False])
+def test_tailwind_install_and_build_v4(no_package_lock, settings):
+    app_name = f'test_theme_{str(uuid.uuid1()).replace("-", "_")}'
+
+    call_command("tailwind", "init", "--app-name", app_name, "--no-input")
+
+    settings.INSTALLED_APPS += [app_name]
+    settings.TAILWIND_APP_NAME = app_name
+
+    assert os.path.isfile(os.path.join(get_app_path(app_name), "apps.py")), 'The "theme" app has been generated'
+
+    tailwind_config_path = os.path.join(get_app_path(app_name), "static_src", "tailwind.config.js")
+    assert not os.path.isfile(tailwind_config_path), "tailwind.config.js is absent from tailwind v4"
+
+    if no_package_lock:
+        call_command("tailwind", "install", "--no-package-lock")
+    else:
+        call_command("tailwind", "install")
+
+    package_json_path = os.path.join(get_app_path(app_name), "static_src", "package.json")
+    assert os.path.isfile(package_json_path), "Tailwind has created package.json file"
+
+    package_lock_json_path = os.path.join(get_app_path(app_name), "static_src", "package-lock.json")
+    if no_package_lock:
+        assert not os.path.isfile(package_lock_json_path), "Tailwind has not created package-lock.json file"
+    else:
+        assert os.path.isfile(package_lock_json_path), "Tailwind has created package-lock.json file"
+
+    assert os.path.isdir(
+        os.path.join(get_app_path(app_name), "static_src", "node_modules")
+    ), "Tailwind has been installed from npm"
+
+    call_command("tailwind", "build")
+    assert os.path.isfile(
+        os.path.join(get_app_path(app_name), "static", "css", "dist", "styles.css")
+    ), "Tailwind has built a css/styles.css file"
+
+    cleanup_theme_app_dir(app_name)