upgrade to tailwind 4

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: debian:stable
+image: debian:testing
 
 stages:
   - linting
@@ -37,7 +37,7 @@ tests:debian:
     - apt update
   script:
     - apt-get -qqy update
-    - apt-get -qqy install --no-install-recommends build-essential libgirepository1.0-dev mat2 python3-venv python3-dev python3-pip python3-setuptools libcairo2-dev pkg-config 
+    - apt-get -qqy install --no-install-recommends build-essential libgirepository-2.0-dev mat2 python3-venv python3-dev python3-pip python3-setuptools libcairo2-dev pkg-config 
     - python3 -m venv .venv
     - source .venv/bin/activate
     - pip3 install -r requirements.txt -r requirements-test.txt

package.json

@@ -19,11 +19,13 @@
   "author": "jvoisin, jfriedli",
   "license": "MIT",
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "^7.0.0",
+    "@fullhuman/postcss-purgecss": "^6.0.0",
+    "@tailwindcss/cli": "^4.0.17",
+    "@tailwindcss/postcss": "^4.0.17",
     "autoprefixer": "^10.2.5",
     "cssnano": "^7.0.0",
-    "postcss": "^8.4.5",
+    "postcss": "^8.5.3",
     "postcss-cli": "^11.0.0",
-    "tailwindcss": "^3.0.16"
+    "tailwindcss": "^4.0.17"
   }
 }

postcss.config.js

@@ -4,10 +4,10 @@ const purgecss = require('@fullhuman/postcss-purgecss')
 
 module.exports = (ctx) => ({
     plugins: [
-        require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
+        require('@tailwindcss/postcss'),
         require('autoprefixer'),
         process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null,
-        ctx.env === 'production' && purgecss.default({
+        ctx.env === 'production' && purgecss({
             content: [
                 path.resolve(__dirname, 'templates/**/*.html')
             ],

static/src/main.css

@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 /* rubik-300 - latin */
 @font-face {

templates/download.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="grid grid-rows-1 w-50">
+<div class="grid grid-rows-1">
     <div class="grid grid-rows-1">
         {% if not meta_after %}
             <div class="px-6 py-4 grid grid-rows-1">
@@ -22,7 +22,7 @@
     </div>
 
     <div class="flex justify-center mt-8">
-        <div class="rounded w-50 overflow-hidden shadow-lg p-4">
+        <div class="rounded-sm overflow-hidden shadow-lg p-4">
             {% if not meta_after %}
             <p class="text-gray-700 text-base text-center">
                 <svg class="max-h-40 w-full fill-current text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
@@ -48,7 +48,7 @@
 
             <a class="uk-flex-1" href='{{ download_uri }}'>
                 <button
-                    class="w-full bg-blue-dark hover:bg-blue-700 text-white py-2 px-4 rounded flex justify-center"
+                    class="w-full bg-blue-dark hover:bg-blue-700 text-white py-2 px-4 rounded-sm flex justify-center"
                 >
                     <svg class="w-4 h-4 mr-2 text-white self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                         <path style="fill: white" d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
@@ -60,7 +60,7 @@
     </div>
     {% if meta_after %}
     <div class="mx-auto w-full">
-        <div class="bg-white shadow-md rounded my-6">
+        <div class="bg-white shadow-md rounded-sm my-6">
             <table class="text-left w-full border-collapse">
                 <div class="px-6 py-4 grid grid-rows-1">
                     <h1 class="font-light text-center text-4xl">Remaining Metadata</h1>

templates/index.html

@@ -9,13 +9,13 @@
 </div>
 
 <div class="flex justify-center mt-8">
-    <div class="w-50 rounded overflow-hidden shadow-lg pb-4">
+    <div class="rounded-sm overflow-hidden shadow-lg pb-4">
         <div class="px-6 pt-4 pb-2 grid grid-rows-1">
             <form method="post" enctype="multipart/form-data" class="grid grid-rows-1">
                 <label class="text-gray-700 text-sm text-opacity-80 mb-2" for="upload_file">Choose your file to clean</label>
-                <input class="border rounded" aria-label="" type="file" name="file" id="upload_file" accept="{{ mimetypes |  join(', ') }}">
+                <input class="border rounded-sm" aria-label="" type="file" name="file" id="upload_file" accept="{{ mimetypes |  join(', ') }}">
                 <button
-                    class="w-full mt-4 bg-blue-dark hover:bg-blue-700 text-white py-2 px-4 rounded flex justify-center"
+                    class="w-full mt-4 bg-blue-dark hover:bg-blue-700 text-white py-2 px-4 rounded-sm flex justify-center"
                     type="submit"
                     value="Upload"
                 >
@@ -31,7 +31,7 @@
     </div>
 </div>
 <button
-    class="p-0 w-10 h-10 absolute bottom-8 md:bottom-16 lg:bottom-24 right-8 md:right-16 lg:right-24 bg-blue-300 hover:bg-blue-400 rounded-full active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none">
+    class="p-0 w-10 h-10 absolute bottom-8 md:bottom-16 lg:bottom-24 right-8 md:right-16 lg:right-24 bg-blue-300 hover:bg-blue-400 rounded-full active:shadow-lg mouse shadow-sm transition ease-in duration-200 focus:outline-hidden">
     <a href="/info" role="link" class="w-6 h-6 text-white inline-block font-bold">
         ?
     </a>

templates/info.html

@@ -64,7 +64,7 @@
             </h1>
             <div>
                 {% for extension in extensions %}
-                    <span class="rounded-full bg-blue text-white p-2 mb-2 mr-2 rounded float-left">
+                    <span class="rounded-full bg-blue text-white p-2 mb-2 mr-2 rounded-sm float-left">
                         {{ extension }}
                     </span>
                 {% endfor %}