Tailwind CSS 4.0 support.

Author: oliverandrich

CHANGELOG.md

@@ -1,13 +1,33 @@
 # Changelog
 
+## 4.0.0
+
+- Added support for Tailwind CSS 4.0.0.
+- Default version is Tailwind CSS 4.0.0.
+- The versioning is now aligned with Tailwind CSS. That means the major number of this packages
+  follows the major number of Tailwind CSS to document the most recent support version of it.
+- Removed the management commands `install_pycharm_workaround` and `uninstall_pycharm_workaround`.
+  This feature broke too often.
+- Removed `runserver_plus` subcommand. The management subcommand `runserver` now starts either the
+  debug server from django-extensions if this package is installed. Otherwise it starts the standard
+  debug server.
+- The management subcommand `runserver` has a option `--force-default-runserver` to enforce the
+  usage of the standard debug server from Django.
+- `TAILWIND_CLI_CONFIG_FILE` isn't necessary for Tailwind CSS 4.x only for 3.x.
+  [Read the documentaiton about it.](settings.md)
+- Removed the documentation for the fancier `tailwind.config.js` as it is not recommended to use
+  and Tailwind CSS 4.x has a way better strategy to find the used Tailwind classes.
+
 ## 2.21.1
 
 - Relaxed the minimum Django version to >=4.0.
 
 ## 2.21.0
 
-- Added `install_pycharm_workaround` and `remove_pycharm_workaround` management commands. [#142](https://github.com/django-commons/django-tailwind-cli/issues/142)
-- Added `remove_cli` subcommand to remove the CLI. [#132](https://github.com/django-commons/django-tailwind-cli/issues/132)
+- Added `install_pycharm_workaround` and `remove_pycharm_workaround` management commands.
+  [#142](https://github.com/django-commons/django-tailwind-cli/issues/142)
+- Added `remove_cli` subcommand to remove the CLI.
+  [#132](https://github.com/django-commons/django-tailwind-cli/issues/132)
 - Refactored all the class based management command into simpler function based commands.
 - Refactored the process to build the runserver command.
 
@@ -43,7 +63,8 @@
 
 ## 2.17.0
 
-- Internal refactoring. Config class has been replaced with django-appconfig and some function in the django_tailwind_cli.utils package.
+- Internal refactoring. Config class has been replaced with django-appconfig and some function in
+  the django_tailwind_cli.utils package.
 - uv is used for publishing too.
 - Updated tooling configuration.
 
@@ -56,17 +77,21 @@
 
 ## 2.15.0
 
-- [#130](https://github.com/oliverandrich/django-tailwind-cli/pull/130) by [@Tobi-De](https://github.com/Tobi-De) extended the support for custom tailwind cli builds. See `TAILWIND_CLI_SRC_REPO` and `TAILWIND_CLI_ASSET_NAME` in the documentation.
+- [#130](https://github.com/oliverandrich/django-tailwind-cli/pull/130) by
+  [@Tobi-De](https://github.com/Tobi-De) extended the support for custom tailwind cli builds. See
+  `TAILWIND_CLI_SRC_REPO` and `TAILWIND_CLI_ASSET_NAME` in the documentation.
 
 ## 2.14.0
 
-- [#129](https://github.com/oliverandrich/django-tailwind-cli/pull/129) by [@Tobi-De](https://github.com/Tobi-De) add a setting to allow for custom tailwind source repo
+- [#129](https://github.com/oliverandrich/django-tailwind-cli/pull/129) by
+  [@Tobi-De](https://github.com/Tobi-De) add a setting to allow for custom tailwind source repo
 - Bumped default version of tailwindcss to 3.4.10.
 
 ## 2.13.0
 
-- [#127](https://github.com/oliverandrich/django-tailwind-cli/pull/127)
-  by [@bckohan](https://github.com/bckohan) upgrade django-typer and fixed future incompatibilities with django-typer 3.0.
+- [#127](https://github.com/oliverandrich/django-tailwind-cli/pull/127) by
+  [@bckohan](https://github.com/bckohan) upgrade django-typer and fixed future incompatibilities
+  with django-typer 3.0.
 - moved to tox for testing.
 - Added Python 3.13 to the test matrix.
 - Added Django 5.1a1 to the test matrix.
@@ -93,7 +118,8 @@
 ## 2.9.0
 
 - Bumped default Tailwind CLI version to 3.4.1.
-- Reimplemented the management command using [django_typer](https://django-typer.readthedocs.io/en/stable/)
+- Reimplemented the management command using
+  [django_typer](https://django-typer.readthedocs.io/en/stable/)
 - Removed Python 3.8 from the list of supported versions.
 
 ## 2.8.1

README.md

@@ -62,6 +62,7 @@ Checkout the detailed [installation guide](https://django-tailwind-cli.rtfd.io/l
 ## Features
 
 - Simplest possible integration.
+- Support Tailwind CSS 3.x and 4.x.
 - Management commands:
 
     * To start the Tailwind CLI in watch mode during development.
@@ -71,7 +72,7 @@ Checkout the detailed [installation guide](https://django-tailwind-cli.rtfd.io/l
 - Configuration options to adapt the library to your project, when the defaults don't fit you.
 - A template tag to include the Tailwind CSS file in your project.
 - A base template for your project.
-- A sane tailwind.config.js that activates all the official plugins and includes a simple HTMX plugin.
+- Sane default configurations for Tailwind 3.x and Tailwinc 4.x.
 - A management command to install [a workaround to support Tailwind CLI in PyCharm](https://django-tailwind-cli.rtfd.io/latest/usage/#use-with-pycharm).
 
 ## Requirements

docs/installation.md

@@ -10,13 +10,14 @@ hide:
 1. Install the library.
 
    ```shell
-   python -m pip install django-tailwind-cli
+   python -m pip install "django-tailwind-cli"
    ```
 
-   with optional `django-extensions` and `Werkezeug` libraries to use the `runserver_plus` command.
+   Add the optional libraries `django-extensions` and `Werkzeug` to use the extended debug server
+   from `django-extensions`.
 
    ```shell
-   python -m pip install django-tailwind-cli[django-extensions]
+   python -m pip install "django-tailwind-cli[django-extensions]"
    ```
 
 2. Add `django_tailwind_cli` to `INSTALLED_APPS` in `settings.py`.
@@ -28,7 +29,8 @@ hide:
    ]
    ```
 
-   If you plan to use the `runserver_plus` command, the changes to `INSTALLED_APPS` looks like that.
+   If you want to use the extended debug server from `django-extensions`, add the package to the
+   installed apps.
 
    ```python
    INSTALLED_APPS = [
@@ -64,12 +66,6 @@ hide:
 
    Or
 
-   ```shell
-   python manage.py tailwind runserver_plus
-   ```
-
-   Or
-
    ```shell
    python manage.py tailwind watch
    ```
@@ -78,14 +74,6 @@ hide:
 
 ## Optional steps
 
-### Install PyCharm workaround
-
-In order [to use Tailwind CLI with PyCharm](/usage/#use-with-pycharm) you have to install a workaround.
-
-```shell
-python manage.py tailwind install_pycharm_workaround
-```
-
 ### Install `django-browser-reload`
 
 If you enjoy automatic reloading during development. Install the [django-browser-reload](https://github.com/adamchainz/django-browser-reload) app. The following installation steps are taken from the README of the project.

docs/settings.md

@@ -11,7 +11,7 @@ The package can be configured by a few settings, which can be overwritten in the
 your project.
 
 `TAILWIND_CLI_VERSION`
-: **Default**: `"3.4.13"`
+: **Default**: `"4.0.0"`
 
     This defines the version of the CLI and of Tailwind CSS you want to use in your project.
 
@@ -64,23 +64,35 @@ your project.
     Enable or disable the automatic downloading of the official CLI to your machine.
 
 `TAILWIND_CLI_SRC_CSS`
-: **Default**: `None`
+: **Default** (for Tailwind 3.x): `None`<br>**Default** (for Tailwind 4.x): `css/source.css`
 
-    The name of the optional input file for the Tailwind CLI, where all the directivces and custom styles are defined. This is where you add your own definitions for the different layers.
+    !!! warning
+        This setting is optional for Tailwind CSS 3.x. For Tailwind CSS 4.x it must not be empty.
+
+    For **Tailwind CSS 3.x** this optional file is used to define addition CSS rules for your project.
 
-    If you don't define this setting, the default of the Tailwind CLI is used.
+    For **Tailwind CSS 4.x** this required file is used to configure Tailwind CSS and also add
+    additional CSS rules for your project. This file is stored relative to the first element of
+    the `STATICFILES_DIRS` array.
 
 `TAILWIND_CLI_DIST_CSS`
 : **Default**: `"css/tailwind.css"`
 
-    The name of the output file. This file is stored relative to the first element of the `STATICFILES_DIRS` array.
+    The name of the output file. This file is stored relative to the first element of the
+    `STATICFILES_DIRS` array.
 
 `TAILWIND_CLI_CONFIG_FILE`
 : **Default**: `"tailwind.config.js"`
 
-    The name of the Tailwind CLI config file. The file is stored relative to the `BASE_DIR` defined in your settings.
+    !!! danger
+
+        Is only required for Tailwind CSS 3.x. If you use it with Tailwind CSS 4.x, it is ignored
+        and also raises an exception to force you to remove it.
 
-## `tailwind.config.js`
+    The name of the Tailwind CLI config file. The file is stored relative to the `BASE_DIR` defined
+    in your settings.
+
+## `tailwind.config.js` (Tailwind CSS 3.x only)
 
 If you don't create a `tailwind.config.js` file yourself, the management commands will create a sane default for you inside the `BASE_DIR` of your project. The default activates all the official plugins for Tailwind CSS and adds a minimal plugin to support some variants for [HTMX](https://htmx.org/).
 
@@ -109,72 +121,3 @@ module.exports = {
   ],
 };
 ```
-
-### Fancier version of `tailwind.config.js`
-
-This configuration also embraces the nice trick authored by Carlton Gibson in his post [Using Django’s template loaders to configure Tailwind¶](https://noumenal.es/notes/tailwind/django-integration/). The implementation adopts Carlton's implementation to honor the conventions of this project. If you put your `tailwind.config.js` in a different location than your `BASE_DIR`, you have to change this file too.
-
-This configuration uses the management command `tailwind list_templates`, which list all the templates files inside your project.
-
-!!! warning "Editor Integration besides VS Code"
-
-    The following default configuration tries to be as smart as possible to find all the templates inside your project and installed dependencies. This works like a charm when you run the debug server using `python manage.py tailwind runserver`. It also works if you start VSCode with `code .` from within the active virtual environment.
-
-    But it does not work with Sublime Text and the lsp-tailwindcss package or with the various LSP packages for (neo)vim. The reason is, that these intergrations not honoring the active virtual environment when being started. If you have an idea to solve this, patches are welcome.
-
-    **With editors besides VS Code please use the default config.**
-
-```javascript title="tailwind.config.js"
-/** @type {import('tailwindcss').Config} */
-const plugin = require("tailwindcss/plugin");
-const { spawnSync } = require("child_process");
-
-// Calls Django to fetch template files
-const getTemplateFiles = () => {
-  const command = "python3";
-  const args = ["manage.py", "tailwind", "list_templates"];
-  // Assumes tailwind.config.js is located in the BASE_DIR of your Django project.
-  const options = { cwd: __dirname };
-
-  const result = spawnSync(command, args, options);
-
-  if (result.error) {
-    throw result.error;
-  }
-
-  if (result.status !== 0) {
-    console.log(result.stdout.toString(), result.stderr.toString());
-    throw new Error(
-      `Django management command exited with code ${result.status}`
-    );
-  }
-
-  const templateFiles = result.stdout
-    .toString()
-    .split("\n")
-    .map((file) => file.trim())
-    .filter(function (e) {
-      return e;
-    }); // Remove empty strings, including last empty line.
-  return templateFiles;
-};
-
-module.exports = {
-  content: [].concat(getTemplateFiles()),
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/aspect-ratio"),
-    require("@tailwindcss/container-queries"),
-    plugin(function ({ addVariant }) {
-      addVariant("htmx-settling", ["&.htmx-settling", ".htmx-settling &"]);
-      addVariant("htmx-request", ["&.htmx-request", ".htmx-request &"]);
-      addVariant("htmx-swapping", ["&.htmx-swapping", ".htmx-swapping &"]);
-      addVariant("htmx-added", ["&.htmx-added", ".htmx-added &"]);
-    }),
-  ],
-};
-```