OZG-4897 update tailwind config, fix tw class order

alfa-client/.prettierrc

@@ -18,5 +18,6 @@
   "tabWidth": 2,
   "useTabs": false,
   "embeddedLanguageFormatting": "auto",
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindConfig": "./libs/design-system/tailwind.config.js"
 }

alfa-client/.vscode/settings.json

@@ -10,5 +10,6 @@
   "files.encoding": "utf8",
   "files.eol": "\n",
   "files.trimTrailingWhitespace": true,
-  "prettier.useTabs": false
+  "prettier.useTabs": false,
+  "tailwindCSS.experimental.configFile": "../libs/design-system/tailwind.config.js"
 }

alfa-client/apps/alfa/tailwind.config.js

 const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
 const { join } = require('path');
+const sharedTailwindConfig = require('../../libs/design-system/tailwind.config.js');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  presets: [sharedTailwindConfig],
   content: [
     join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
-  corePlugins: {
-    preflight: false,
-  },
-  //prefix: 'tw-',
   theme: {
     extend: {},
   },

alfa-client/apps/demo/src/app/app.component.html

 <ng-container>
   <header class="flex items-center justify-between bg-white p-6">
-    <div class="text-ozgblue font-extrabold">OZG-Cloud Demoapp</div>
+    <div class="font-extrabold text-ozgblue">OZG-Cloud Demoapp</div>
   </header>
   <div class="relative flex w-full flex-auto justify-center">
     <div class="w-96 bg-slate-300 p-6">

alfa-client/apps/demo/tailwind.config.js

 const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
 const { join } = require('path');
-const sharedTailwindConfig = require('../../libs/design-system/tailwind.config');
+const sharedTailwindConfig = require('../../libs/design-system/tailwind.config.js');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {

alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
   imports: [CommonModule],
   template: `<button
     type="button"
-    class="bg-ozgblue-700 hover:bg-ozgblue-600 focus-visible:outline-ozgblue-800 rounded-md px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+    class="rounded-md bg-ozgblue-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ozgblue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ozgblue-800"
   >
     Design-System Test Button
   </button>`,