From 34f5322ef96a75014976cfa0488303c7600e1da5 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 29 Feb 2024 10:54:29 +0100
Subject: [PATCH] OZG-4897 update tailwind config, fix tw class order
---
alfa-client/.prettierrc | 3 ++-
alfa-client/.vscode/settings.json | 3 ++-
alfa-client/apps/alfa/tailwind.config.js | 6 ++----
alfa-client/apps/demo/src/app/app.component.html | 2 +-
alfa-client/apps/demo/tailwind.config.js | 2 +-
.../libs/design-system/src/lib/testbtn/testbtn.component.ts | 2 +-
6 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/alfa-client/.prettierrc b/alfa-client/.prettierrc
index 38fff0ae95..937355eb8c 100644
--- a/alfa-client/.prettierrc
+++ b/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"
}
diff --git a/alfa-client/.vscode/settings.json b/alfa-client/.vscode/settings.json
index faa52d3354..cd2cd4c41d 100644
--- a/alfa-client/.vscode/settings.json
+++ b/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"
}
diff --git a/alfa-client/apps/alfa/tailwind.config.js b/alfa-client/apps/alfa/tailwind.config.js
index 86cd342af8..cdb330567b 100644
--- a/alfa-client/apps/alfa/tailwind.config.js
+++ b/alfa-client/apps/alfa/tailwind.config.js
@@ -1,16 +1,14 @@
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: {},
},
diff --git a/alfa-client/apps/demo/src/app/app.component.html b/alfa-client/apps/demo/src/app/app.component.html
index 756395e9b9..43e6847ef9 100644
--- a/alfa-client/apps/demo/src/app/app.component.html
+++ b/alfa-client/apps/demo/src/app/app.component.html
@@ -1,6 +1,6 @@
<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">
diff --git a/alfa-client/apps/demo/tailwind.config.js b/alfa-client/apps/demo/tailwind.config.js
index 0540721bd4..cdb330567b 100644
--- a/alfa-client/apps/demo/tailwind.config.js
+++ b/alfa-client/apps/demo/tailwind.config.js
@@ -1,6 +1,6 @@
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 = {
diff --git a/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts b/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts
index a96bff1339..19412ec65c 100644
--- a/alfa-client/libs/design-system/src/lib/testbtn/testbtn.component.ts
+++ b/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>`,
--
GitLab