diff --git a/alfa-client/.prettierrc b/alfa-client/.prettierrc index 38fff0ae95d8d56c9493bf4d94dbe69d574d573e..937355eb8c212022a9644008fb7f7a149cac647c 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 faa52d3354b8a11143a335b6092b77e99c95bc18..cd2cd4c41df2a53261770224805b193489c7d3e7 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 86cd342af8231adb87f41219ed20d31b23880f5e..cdb330567b769e7e13d6521c3272da04ce1399af 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 756395e9b95d5b3bde3d2b1ba5df90ed3a1b714a..43e6847ef9e5243ac391182aaa2a41f5aad6ed89 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 0540721bd45660164a778424d9f2402ea0d56a66..cdb330567b769e7e13d6521c3272da04ce1399af 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 a96bff1339c67bd5e10dedbd5548dfd4306cd34a..19412ec65ccfe648298045e5ead1c48391abb631 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>`,