chore: update tailwind to v4

As is customary in the JS world EVERYTHING must break with each major version

frontend/package.json

@@ -30,6 +30,7 @@
     "@babel/preset-env": "^7.16.8",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@popperjs/core": "^2.11.8",
+    "@tailwindcss/postcss": "^4.1.10",
     "air-datepicker": "^3.6.0",
     "alpinejs": "^3.14.9",
     "autoprefixer": "^10.4.14",
@@ -43,7 +44,6 @@
     "core-js": "^3.20.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
-    "daisyui": "^4.12.13",
     "eslint": "^8.57.1",
     "eslint-webpack-plugin": "^3.1.1",
     "htmx.org": "^2.0.5",
@@ -51,7 +51,8 @@
     "jquery": "^3.7.1",
     "mathjs": "^14.5.2",
     "mini-css-extract-plugin": "^2.5.1",
-    "postcss-loader": "^6.2.1",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^7.2.3",
     "sass": "~1.49.9",
     "sass-loader": "^13.3.2",
@@ -61,7 +62,7 @@
     "stylelint-config-standard-scss": "^6.1.0",
     "stylelint-webpack-plugin": "^3.1.1",
     "sweetalert2": "^11.14.1",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^4.1.10",
     "terser-webpack-plugin": "^5.3.10",
     "tom-select": "^2.4.3",
     "typer-dot-js": "^0.1.0",

frontend/postcss.config.js

@@ -1,12 +1,3 @@
-const postcssPresetEnv = require("postcss-preset-env");
-const tailwindcss = require('tailwindcss');
-
 module.exports = {
-    plugins: [postcssPresetEnv({
-        /* use stage 2 features + disable logical properties and values rule */
-        stage: 2,
-        features: {
-            'logical-properties-and-values': false
-        }
-    }), tailwindcss],
+    plugins: {"@tailwindcss/postcss": {}},
 };

frontend/src/styles/_tailwind.scss

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

frontend/src/styles/style.scss

@@ -1,11 +1,11 @@
 @import "variables";
 @import "font-awesome.scss";
-@import "tailwind.scss";
 @import "bootstrap.scss";
 @import "datepicker.scss";
 @import "tom-select.scss";
 @import "animations.scss";
 @import "scrollbar.scss";
+@import "./tailwind.css";
 
 .sticky-sidebar {
   position: sticky;

frontend/src/styles/tailwind.css

@@ -0,0 +1,2 @@
+@import "tailwindcss" prefix(tw) source("../../../app/templates/");
+@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *));

frontend/tailwind.config.js

@@ -1,24 +0,0 @@
-module.exports = {
-    content: ['../app/templates/**/*.html'],
-    theme: {
-        extend: {},
-    },
-    variants: {
-        extend: {},
-    },
-    plugins: [],
-    prefix: 'tw-',
-    corePlugins: {
-        preflight: false,
-    },
-    daisyui: {
-    themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
-    darkTheme: "dark", // name of one of the included themes for dark mode
-    base: false, // applies background color and foreground color for root element by default
-    styled: true, // include daisyUI colors and design decisions for all components
-    utils: true, // adds responsive and modifier utility classes
-    prefix: "ds-", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
-    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
-    themeRoot: ":root", // The element that receives theme color CSS variables
-  },
-};