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",
-		"check-password-strength": "2.0.2",
+		"autoprefixer": "10.2.5",
 		"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

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

src/components/base/importfixes.svelte

@@ -1,6 +0,0 @@
-<!--
-    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 './style.css';
+import 'windi.css';
 import "toastify-js/src/toastify.css";
 import "gridjs/dist/theme/mermaid.css";
 import App from './App.svelte';

src/style.css

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

tailwind.config.js

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

vite.config.js

@@ -1,4 +1,5 @@
 import svelte from '@sveltejs/vite-plugin-svelte';
+import windiCSS from 'vite-plugin-windicss';
 import { minify } from 'html-minifier';
 import { defineConfig } from 'vite';
 //
@@ -23,6 +24,17 @@ 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,