Use Tailwind CSS standalone CLI instead of NPM

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
+        python-version: ["3.11", "3.12", "3.13"]
 
     steps:
       - uses: actions/checkout@v4
@@ -46,7 +46,7 @@ jobs:
       - name: Set up Python & PDM
         uses: pdm-project/setup-pdm@v4
         with:
-          python-version: "3.10"
+          python-version: "3.11"
 
       - name: Install dependencies
         run: pdm install
@@ -71,7 +71,7 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@v5
         with:
-          python-version: "3.10"
+          python-version: "3.11"
 
       - name: Check release
         id: check_release

.gitignore

@@ -1,8 +1,5 @@
 .vscode/
 
-### Tailwind ###
-tailwind.config.js
-
 ### Node ###
 package-lock.json
 node_modules

CHANGELOG.md

@@ -4,23 +4,23 @@ CHANGELOG
 0.3.0 - 2025-02-20
 ------------------
 
-* Fix NPM error (`could not determine executable to run`), perhaps related to Tailwind CSS 4.x release ([#8](https://github.com/pelican-plugins/tailwindcss/pull/8/))
-* Use PDM & Ruff instead of Poetry, Black, Flake8, and isort ([#9](https://github.com/pelican-plugins/tailwindcss/pull/9/))
+* Fix NPM error (`could not determine executable to run`), perhaps related to Tailwind CSS 4.x release ([#8](https://github.com/pelican-plugins/tailwindcss/pull/8))
+* Use PDM & Ruff instead of Poetry, Black, Flake8, and isort ([#9](https://github.com/pelican-plugins/tailwindcss/pull/9))
 
-Contributed by [Justin Mayer](https://github.com/justinmayer) via [PR #9](https://github.com/pelican-plugins/tailwindcss/pull/9/)
+Contributed by [Justin Mayer](https://justinmayer.com) via [PR #8](https://github.com/pelican-plugins/tailwindcss/pull/8) & [PR #9](https://github.com/pelican-plugins/tailwindcss/pull/9)
 
 
 0.2.0 - 2022-07-10
 ------------------
 
 Add support for installing and using Tailwind CSS plugins.
 
-Contributed by [Luca Fedrizzi](https://github.com/lcfd) via [PR #3](https://github.com/pelican-plugins/tailwindcss/pull/3/)
+Contributed by [Luca Fedrizzi](https://github.com/lcfd) via [PR #3](https://github.com/pelican-plugins/tailwindcss/pull/3)
 
 
 0.1.0 - 2022-06-22
 ------------------
 
 Initial publication of this plugin.
 
-Contributed by [Luca Fedrizzi](https://github.com/lcfd) via [PR #1](https://github.com/pelican-plugins/tailwindcss/pull/1/)
+Contributed by [Luca Fedrizzi](https://github.com/lcfd) via [PR #1](https://github.com/pelican-plugins/tailwindcss/pull/1)

README.md

@@ -9,11 +9,11 @@ This plugin helps you use [Tailwind CSS][] in your Pelican web site.
 
 ## Why Use This Plugin?
 
-Because you want use [Tailwind CSS][] in seconds. Not hours.
+Because you want use Tailwind CSS in seconds. Not hours.
 
 ## Requirements
 
-In order to run this plugin, you need to install Node.JS. (Someday this dependency could be replaced with a Python package.)
+This plugin is tested on Tailwind CSS 3.0.24. If you would like to add support for Tailwind CSS 4.0+, please submit a pull request along with appropriate additions to the test suite.
 
 ## Installation
 
@@ -48,42 +48,22 @@ As long as you have not explicitly added a `PLUGINS` setting to your Pelican set
     @tailwind utilities;
     ```
 
-3. Add the build file (`output.css`) in your `base.html`.
+3. Add the build file (`output.css`) in your `base.html`:
 
     ```html
     <link rel="stylesheet" href="/output.css" />
     ```
 
-4. Done! You should be ready to use [Tailwind CSS][] in your website template.
+4. In your Pelican settings, specify the target Tailwind CSS version via the `TAILWIND` setting:
 
-## Advanced Usage
-
-In your settings you can configure the plugin's behavior using the `TAILWIND` setting.
-
-An example of a complete `TAILWIND` setting:
-
-```python
-TAILWIND = {
-    "version": "3.0.0",
-    "plugins": [
-        "@tailwindcss/typography",
-        "@tailwindcss/forms",
-        "@tailwindcss/line-clamp",
-        "@tailwindcss/aspect-ratio",
-    ],
-}
-```
-
-### Tailwind Plugin Installation
-
-As you can see from the example above, it is possible to add the `plugins` property to the configuration.
-Just add the name of a Tailwind plugin to the list, and the plugin will be installed.
-
-## Useful Information
+    ```python
+    TAILWIND = {
+        "version": "3.0.24",
+    }
+    ```
 
-### Plugins
+5. Done! You should be ready to use Tailwind CSS in your web site templates.
 
-Your `tailwind.config.js` file will only be copied when Pelican starts. This means that any changes made after starting Pelican will not be recognized. For example, if you want to install a new plugin for Tailwind, you will have to restart Pelican in order for that plugin to become active.
 
 ## Contributing
 

RELEASE.md

@@ -0,0 +1,3 @@
+Release type: minor
+
+Use Tailwind CSS standalone CLI instead of NPM

pelican/plugins/tailwindcss/tailwindcss.py

@@ -1,73 +1,64 @@
+import importlib.resources
 import os
-from os import path
-import shutil
+from pathlib import Path
 import subprocess
+import sysconfig
+
+from rich import print
 
 from pelican import signals
 
-from .utils import commands, installs, utils
+from .utils.utils import (
+    LOG_PREFIX,
+    build_tailwind_css,
+    get_env_var_prefix,
+    get_tailwind_css_version,
+)
 
-BASE_DIR = os.path.dirname(__file__)
+PLUGIN_BASE_DIR = importlib.resources.files(__package__)
+SITE_PACKAGES_DIR = Path(sysconfig.get_path("purelib"))
 
 
 def initialize(po):
-    SETTINGS = po.settings
-    TAILWIND_SETTINGS = SETTINGS.get("TAILWIND", None)
-    THEME_PATH = path.abspath(path.join(po.path, ".."))
-
-    node_modules_path = os.path.join(BASE_DIR, "node_modules/")
-
-    # Copy the tailwind.config.js file in order
-    # to be able to use Tailwind plugins
-    twconfig_file_path = os.path.join(THEME_PATH, "tailwind.config.js")
-    shutil.copyfile(twconfig_file_path, os.path.join(BASE_DIR, "tailwind.config.js"))
-
-    if os.path.isdir(node_modules_path):
-        j_version = subprocess.check_output(
-            "npm -j ls tailwindcss",
-            cwd=BASE_DIR,
-            shell=True,
-        ).decode("utf-8")
-
-        installed_tailwind_version = utils.get_npm_package_version(j_version=j_version)
-
-        print(
-            f"{utils.LOG_PREFIX} The version is right (v{installed_tailwind_version})"
-        )
-
-        if TAILWIND_SETTINGS:
-            print(f"{utils.LOG_PREFIX} Settings were found")
-
-            installs.another_tailwind(
-                settings=TAILWIND_SETTINGS,
-                installed_tailwind_version=installed_tailwind_version,
-            )
-
-            installs.plugins(settings=TAILWIND_SETTINGS)
-
-        else:
-            print(f"{utils.LOG_PREFIX} No settings were found")
-    else:
-        print(f"{utils.LOG_PREFIX} Initialization required -- first start")
-        commands.run_in_plugin("npm install")
-        if TAILWIND_SETTINGS:
-            print(f"{utils.LOG_PREFIX} Settings were found")
-            installs.tailwind(settings=TAILWIND_SETTINGS)
-            installs.plugins(settings=TAILWIND_SETTINGS)
+    # Print notice if TAILWIND settings are found.
+    tailwind_settings = po.settings.get("TAILWIND")
+    if tailwind_settings:
+        print(f"{LOG_PREFIX} Settings were found")
+
+    # Get Tailwind CSS version if specified in settings.
+    prefix = ""
+    tailwind_version = get_tailwind_css_version(po.settings)
+    if tailwind_version != "latest":
+        tailwind_version = f"v{tailwind_version}"
+        prefix = f"TAILWINDCSS_VERSION={tailwind_version} "
+
+    # Download Tailwind CSS version if not already present.
+    tailwind_cli = Path(
+        SITE_PACKAGES_DIR / "pytailwindcss" / "bin" / tailwind_version / "tailwindcss"
+    )
+    if not tailwind_cli.exists():
+        print(f"Downloading Tailwind CSS CLI {tailwind_version} to {tailwind_cli}")
+        subprocess.run(f"{prefix}tailwindcss_install", shell=True, check=False)
 
 
 def generate_css(po):
-    THEME_PATH = path.abspath(path.join(po.path, ".."))
-    input_file_path = os.path.join(THEME_PATH, "input.css")
-    output_file_path = os.path.join(THEME_PATH, "output/output.css")
-    twconfig_file_path = os.path.join(BASE_DIR, "tailwind.config.js")
-
-    input_output = f"-i {input_file_path} -o {output_file_path}"
-    print(f"{utils.LOG_PREFIX} Build CSS ({output_file_path})")
-
-    commands.run_in_plugin(
-        f"npx tailwindcss -c {twconfig_file_path} {input_output}",
-    )
+    prefix = suffix = ""
+    # Get Tailwind CSS version if specified in settings.
+    # If not the latest version, compose prefix for Tailwind CLI & suffix for logging.
+    tailwind_version = get_tailwind_css_version(po.settings)
+    if tailwind_version != "latest":
+        prefix = get_env_var_prefix(tailwind_version)
+        suffix = f" via Tailwind CSS v{tailwind_version}"
+
+    project_root = os.path.abspath(os.path.join(po.path, ".."))
+    input_file_path = os.path.join(project_root, "input.css")
+    output_dir = po.settings.get("OUTPUT_PATH", f"{project_root}/output")
+    output_file_path = Path(f"{output_dir}/output.css")
+    twconfig_file_path = os.path.join(project_root, "tailwind.config.js")
+
+    print(f"{LOG_PREFIX} Build CSS @ {output_file_path}{suffix}")
+
+    build_tailwind_css(prefix, input_file_path, output_file_path, twconfig_file_path)
 
 
 def register():

pelican/plugins/tailwindcss/test_data/input.css

@@ -0,0 +1,47 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+    /* Disable mobile browser tap background highlight */
+    -webkit-tap-highlight-color: transparent;
+}
+
+#toc ul li {
+    /* Table of contents styling */
+    list-style-type: disc;
+}
+
+.image-thumbnail  {
+    @apply sm:w-1/6 shadow-md;
+}
+
+.image-small {
+    @apply sm:w-1/3 shadow-md;
+}
+
+.image-medium {
+    @apply sm:w-1/2 shadow-md;
+}
+
+.image-large {
+    @apply w-full h-full shadow-md;
+}
+
+.image-left {
+    @apply sm:float-left mr-5;
+}
+
+.image-right {
+    @apply sm:float-right sm:ml-5;
+}
+
+.image-center {
+    @apply mx-auto;
+}
+p a {
+    @apply text-slate-600 dark:text-slate-400 underline;
+}
+p a {
+    @layer font-normal;
+}

pelican/plugins/tailwindcss/test_data/tailwind.config.js

@@ -0,0 +1,29 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: "class",
+    content: ["./themes/**/*.html", "./themes/**/*.js"],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['-apple-system','BlinkMacSystemFont','"segoe ui"','Roboto','Oxygen','Ubuntu','Cantarell','"open sans"','"helvetica neue"','"sans-serif"'],
+          'display': ['Georama',]
+            },
+            typography: {
+                DEFAULT: {
+                    css: {
+                        'code::before': {
+                            content: '""'
+                        },
+                        'code::after': {
+                            content: '""'
+                        }
+                    }
+                }
+            },
+        },
+    },
+    plugins: [
+        require("@tailwindcss/typography"),
+        require("@tailwindcss/aspect-ratio"),
+    ],
+};