Tailwind 4 (#885)

* Tailwind 4 package * Configure tailwind 4 * Update tailwind * Fix for tailwind 4 * Minify * Remove reference to fontawesome
mbraak · Feb 9, 2025 · 5dbc39b · 5dbc39b
1 parent 3b804ff
commit 5dbc39b
Show file tree

Hide file tree

Showing 7 changed files with 580 additions and 579 deletions.
diff --git a/docs/_layouts/page.html b/docs/_layouts/page.html
@@ -7,7 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content="JqTree is a jQuery widget for displaying a tree structure in html" />
     <link rel="stylesheet" href="{{ site.baseurl }}/static/monokai.css" />
-    <link rel="stylesheet" href="{{ site.baseurl }}/static/bower_components/fontawesome/css/all.min.css" />
     <link rel="stylesheet" href="{{ site.baseurl }}/static/documentation.css" />
     <link rel="stylesheet" href="{{ site.baseurl }}/jqtree.css" />
     <link rel="stylesheet" href="{{ site.baseurl }}/static/example.css" />

diff --git a/docs/documentation.css b/docs/documentation.css
@@ -1,3 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --container-8xl: 90rem;
+}
diff --git a/docs/index.html b/docs/index.html
@@ -4,32 +4,35 @@
 ---
 
 <div class="mx-auto max-w-8xl">
-    <div class="hidden lg:block fixed inset-0 px-8 left-[max(0px,calc(50%-45rem))] right-auto w-[19.5rem] overflow-y-auto">
-        <nav>
+    <div
+        class="hidden lg:block fixed inset-0 px-8 left-[max(0px,calc(50%-45rem))] right-auto w-[19.5rem] overflow-y-auto">
+        <nav class="mb-8">
             <ul>
                 {% assign level = 0 %}
 
                 {% for entry in site.entries %}
-                    {% if entry.section %}
-                        {% if level == 1 %}
-                                </ul>
-                            </li>
-                        {% endif %}
-                        <li class="mt-8">
-                            <a class="mb-3 block font-semibold text-slate-700 hover:text-slate-900" href="#{{ entry.name }}">{{ entry.title }}</a>
-                            <ul class="space-y-2 border-l border-slate-100">
-                        {% assign level = 1 %}
+                {% if entry.section %}
+                {% if level == 1 %}
+            </ul>
+            </li>
+            {% endif %}
+            <li class="mt-8">
+                <a class="mb-3 block font-semibold text-slate-700 hover:text-slate-900" href="#{{ entry.name }}">{{
+                    entry.title }}</a>
+                <ul class="space-y-2 border-l border-slate-100">
+                    {% assign level = 1 %}
                     {% else %}
-                        <li>
-                            <a class="block border-l pl-4 border-transparent hover:border-slate-400 text-slate-700 hover:text-slate-900" href="#{{ entry.name }}">{{ entry.title }}</a>
-                        </li>
+                    <li>
+                        <a class="block border-l pl-4 border-transparent hover:border-slate-400 text-slate-700 hover:text-slate-900"
+                            href="#{{ entry.name }}">{{ entry.title }}</a>
+                    </li>
                     {% endif %}
-                {% endfor %}
+                    {% endfor %}
 
-                {% if level == 1 %}
-                        </ul>
-                    </li>
-                {% endif %}
+                    {% if level == 1 %}
+                </ul>
+            </li>
+            {% endif %}
             </ul>
         </nav>
     </div>
@@ -42,23 +45,26 @@ <h1 class="text-gray-900 tracking-tight font-extrabold text-6xl">
                 It supports json data, loading via ajax and drag-and-drop.
             </p>
             <div class="mt-8">
-                <a class="rounded-md shadow text-lg text-white px-10 py-4 bg-indigo-600 hover:bg-indigo-700" href="https://github.com/mbraak/jqTree/tarball/master">Download jqTree</a>
+                <a class="rounded-md shadow text-lg text-white px-10 py-4 bg-indigo-600 hover:bg-indigo-700"
+                    href="https://github.com/mbraak/jqTree/tarball/master">Download jqTree</a>
             </div>
         </div>
         <div class="px-8 py-8">
             {% for entry in site.entries %}
-                {% if entry.hide_title %}
-                    <div id="{{ entry.name }}"></div>
-                {% elsif entry.section %}
-                    <h3 class="text-4xl mb-8 font-extrabold text-slate-900 tracking-tight" id="{{ entry.name }}">{{ entry.title }}</h3>
-                {% else %}
-                    <h4 class="text-xl mb-4 font-bold text-slate-900 tracking-tight" id="{{ entry.name }}">{{ entry.title }}</h4>
-                {% endif %}
-                {% if entry.output.size > 1 %}
-                    <div class="mb-16 text-slate-700 doc-entry prose">
-                        {{ entry.output }}
-                    </div>
-                {% endif %}
+            {% if entry.hide_title %}
+            <div id="{{ entry.name }}"></div>
+            {% elsif entry.section %}
+            <h3 class="text-4xl mb-8 font-extrabold text-slate-900 tracking-tight" id="{{ entry.name }}">{{ entry.title
+                }}</h3>
+            {% else %}
+            <h4 class="text-xl mb-4 font-bold text-slate-900 tracking-tight" id="{{ entry.name }}">{{ entry.title }}
+            </h4>
+            {% endif %}
+            {% if entry.output.size > 1 %}
+            <div class="mb-16 text-slate-700 doc-entry prose">
+                {{ entry.output }}
+            </div>
+            {% endif %}
             {% endfor %}
         </div>
     </div>

diff --git a/docs/package.json b/docs/package.json
@@ -5,21 +5,23 @@
     "jekyll-build": "bundle exec jekyll build",
     "jekyll-serve": "bundle exec jekyll serve",
     "build_docs_css": "pnpm tailwind && pnpm build_example_css && pnpm copy_jqtree && pnpm copy_vendor_files",
-    "tailwind": "tailwindcss -i documentation.css -o static/documentation.css",
+    "tailwind": "tailwindcss -m -i documentation.css -o static/documentation.css",
     "build_example_css": "postcss -o static/example.css static/example.postcss",
     "copy_jqtree": "cp ../tree.jquery.js . && cp ../jqtree.css .",
     "copy_vendor_files": "./copy_vendor_files"
   },
   "devDependencies": {
-    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/cli": "^4.0.4",
+    "@tailwindcss/postcss": "^4.0.4",
+    "@tailwindcss/typography": "^0.5.16",
     "autoprefixer": "^10.4.20",
     "jquery": "^3.7.1",
-    "jquery-mockjax": "^2.7.0-beta.0",
-    "postcss": "^8.4.49",
+    "jquery-mockjax": "2.7.0-beta.0",
+    "postcss": "^8.5.1",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-load-config": "^6.0.1",
-    "postcss-nested": "^7",
-    "tailwindcss": "^3.4.16"
+    "postcss-nested": "^7.0.2",
+    "tailwindcss": "^4.0.4"
   }
 }