Merge pull request 'Opacity import fix bugfix/136-opacity_reactivity' (#137) from bugfix/136-opacity_reactivity into dev

Reviewed-on: #137

package.json

@@ -10,30 +10,30 @@
 	},
 	"license": "CC-BY-NC-SA-4.0",
 	"devDependencies": {
-		"check-password-strength": "2.0.2",
 		"@odit/lfk-client-js": "0.11.0",
 		"@odit/license-exporter": "0.0.11",
 		"@sveltejs/vite-plugin-svelte": "1.0.0-next.6",
 		"@types/html-minifier": "4.0.0",
 		"auto-changelog": "2.2.1",
-		"autoprefixer": "10.2.5",
+		"autoprefixer": "^10.2.5",
+		"check-password-strength": "2.0.2",
 		"csvtojson": "2.0.10",
 		"gridjs": "3.4.0",
 		"html-minifier": "4.0.0",
 		"localforage": "1.9.0",
 		"marked": "2.0.3",
+		"postcss": "^8.2.10",
 		"release-it": "14.6.1",
 		"svelte": "3.37.0",
 		"svelte-focus-trap": "1.2.0",
 		"svelte-i18n": "3.3.9",
-		"svelte-preprocess": "4.7.0",
+		"svelte-preprocess": "^4.7.0",
 		"svelte-select": "3.17.0",
-		"tailwindcss": "2.1.1",
+		"tailwindcss": "^2.1.1",
 		"tinro": "0.6.1",
 		"toastify-js": "1.10.0",
 		"validator": "13.5.2",
 		"vite": "2.1.5",
-		"vite-plugin-windicss": "0.14.0",
 		"xlsx": "0.16.9"
 	},
 	"release-it": {

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

src/components/base/importfixes.svelte

@@ -0,0 +1,6 @@
+<!--
+    Temporary tailwind import fixes for classes that wouldn't be directly used otherwise. 
+    Or as others may call it: Real big bullshit time.
+    Issue: https://git.odit.services/lfk/frontend/issues/136
+ -->
+<div class="opacity-50"></div>

src/main.js

@@ -1,4 +1,4 @@
-import 'windi.css';
+import './style.css';
 import "toastify-js/src/toastify.css";
 import "gridjs/dist/theme/mermaid.css";
 import App from './App.svelte';

src/style.css

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

tailwind.config.js

@@ -1,4 +1,6 @@
 module.exports = {
+	mode: 'jit',
+	purge: [ './src/**/*.svelte' ],
 	theme: {
 		extend: {
 			colors: {

vite.config.js

@@ -1,5 +1,4 @@
 import svelte from '@sveltejs/vite-plugin-svelte';
-import windiCSS from 'vite-plugin-windicss';
 import { minify } from 'html-minifier';
 import { defineConfig } from 'vite';
 //
@@ -24,17 +23,6 @@ export default defineConfig(({ command, mode }) => {
 			minify: isProduction
 		},
 		plugins: [
-			windiCSS({
-				//@ts-ignore
-				verbose: true,
-				silent: false,
-				debug: true,
-				config: 'tailwind.config.js', // tailwind config file path (optional)
-				compile: false, // false: interpretation mode; true: compilation mode
-				prefix: 'windi-', // set compilation mode style prefix
-				globalPreflight: true, // set preflight style is global or scoped
-				globalUtility: true // set utility style is global or scoped
-			}),
 			svelte({
 				//@ts-ignore
 				hot: !isProduction,