diff --git a/apps/docs/docs/customize/theming/index.md b/apps/docs/docs/customize/theming/index.md index bbde24e7..4e792641 100644 --- a/apps/docs/docs/customize/theming/index.md +++ b/apps/docs/docs/customize/theming/index.md @@ -5,6 +5,8 @@ keyword: ThemingPage You can use the theme directive from tailwind to define any style related classes, such as the color palette, fonts, breakpoints, and more. +Here is the `primary` color theme used for this documentation : + ```css @theme { /* Primary */ diff --git a/apps/docs/docs/getting-started/quickstart/index.md b/apps/docs/docs/getting-started/quickstart/index.md index a26fc7da..f587dc91 100644 --- a/apps/docs/docs/getting-started/quickstart/index.md +++ b/apps/docs/docs/getting-started/quickstart/index.md @@ -12,7 +12,7 @@ Angular library. Make sure that TailwindCSS is installed. ```bash -npm install tailwindcss +npm install tailwindcss @tailwindcss/postcss postcss ``` Install Flowbite as a dependency using NPM by running this command: @@ -25,8 +25,27 @@ npm install flowbite-angular ng-primitives @ng-icons/core Make sure to use the flowbite-angular configuration preset in your styles.css +> **Note** If your `node_modules` folder is located above the parent directory (e.g., in a monorepo +> setup), you may need to adjust the path with additional `../` to correctly reference it, such as +> `@source "../../../node_modules/flowbite-angular";`. + ```css @import 'tailwindcss'; -@source "node_modules/flowbite-angular"; +@source "../node_modules/flowbite-angular"; +``` + +> **Note** If you want a working `primary` color definition, see `*ThemingPage` page + +## PostCSS configuration + +Create a `postcss.config.json` file in the root of your project and add the `@tailwindcss/postcss` +plugin to your PostCSS configuration. + +```json +{ + "plugins": { + "@tailwindcss/postcss": {} + } +} ``` diff --git a/libs/flowbite-angular/package.json b/libs/flowbite-angular/package.json index 1c3cd09e..779d5b78 100644 --- a/libs/flowbite-angular/package.json +++ b/libs/flowbite-angular/package.json @@ -34,9 +34,9 @@ "@angular/cdk": ">=20.0.0 < 21.0.0", "@angular/core": ">=20.0.0 < 21.0.0", "@ng-icons/core": "^31.3.0", - "@ng-primitives/state": "^0.57.0", + "@ng-primitives/state": ">=0.57.0", "@tailwindcss/postcss": "^4.0.0", - "ng-primitives": "^0.57.0", + "ng-primitives": ">=0.57.0", "rxjs": "^7.4.0", "tailwind-merge": "2.5.5", "tailwindcss": "^4.0.0" diff --git a/package.json b/package.json index c593eb6a..a10877d9 100644 --- a/package.json +++ b/package.json @@ -44,11 +44,11 @@ "@ng-doc/core": "20.1.0", "@ng-doc/ui-kit": "20.1.0", "@ng-icons/core": "^31.3.0", - "@ng-primitives/state": "^0.57.0", + "@ng-primitives/state": "0.78.0", "@nx/devkit": "21.2.2", "@tailwindcss/postcss": "^4.0.0", "express": "4.18.3", - "ng-primitives": "^0.57.0", + "ng-primitives": "0.86.0", "postcss": "^8.5.3", "rxjs": "^7.4.0", "tailwind-merge": "2.5.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bb9d9795..e851660d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,8 +60,8 @@ importers: specifier: ^31.3.0 version: 31.4.0(@angular/common@20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) '@ng-primitives/state': - specifier: ^0.57.0 - version: 0.57.0(948022799d7f9fefaa21a9c74ae2d50c) + specifier: 0.78.0 + version: 0.78.0(948022799d7f9fefaa21a9c74ae2d50c) '@nx/devkit': specifier: 21.2.2 version: 21.2.2(nx@21.2.2(@swc-node/register@1.9.2(@swc/core@1.5.29(@swc/helpers@0.5.17))(@swc/types@0.1.23)(typescript@5.8.3))(@swc/core@1.5.29(@swc/helpers@0.5.17))) @@ -72,8 +72,8 @@ importers: specifier: 4.18.3 version: 4.18.3 ng-primitives: - specifier: ^0.57.0 - version: 0.57.0(948022799d7f9fefaa21a9c74ae2d50c) + specifier: 0.86.0 + version: 0.86.0(948022799d7f9fefaa21a9c74ae2d50c) postcss: specifier: ^8.5.3 version: 8.5.6 @@ -268,14 +268,14 @@ importers: specifier: ^31.3.0 version: 31.4.0(@angular/common@20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) '@ng-primitives/state': - specifier: ^0.57.0 - version: 0.57.0(948022799d7f9fefaa21a9c74ae2d50c) + specifier: '>=0.57.0' + version: 0.78.0(948022799d7f9fefaa21a9c74ae2d50c) '@tailwindcss/postcss': specifier: ^4.0.0 version: 4.1.11 ng-primitives: - specifier: ^0.57.0 - version: 0.57.0(948022799d7f9fefaa21a9c74ae2d50c) + specifier: '>=0.57.0' + version: 0.86.0(948022799d7f9fefaa21a9c74ae2d50c) rxjs: specifier: ^7.4.0 version: 7.8.2 @@ -2488,8 +2488,8 @@ packages: '@angular/core': '>=18.0.0' rxjs: ^6.5.3 || ^7.4.0 - '@ng-primitives/state@0.57.0': - resolution: {integrity: sha512-MxGQxkpm+sqrJoh9mcfkq8jlgdyagdwQUc4CClvs7CYM8r3P+CWJfrwaHUg0P4HU8CT2ULDITBBAdD1FgfTRPQ==} + '@ng-primitives/state@0.78.0': + resolution: {integrity: sha512-qj1tU7gd3OzCv+PssfWhf8CdFqwhUnB1/3a9WA/oo+7TwDTYygXvvKjPsTjoBzi5LIDwVit3Ul+m5kxsCphZPA==} peerDependencies: '@angular/core': '>=19.0.0' @@ -7579,8 +7579,22 @@ packages: tailwindcss: optional: true - ng-primitives@0.57.0: - resolution: {integrity: sha512-UgzXwyJAJci+m4lfn4CA6YBAQG9T7eTK42P1iOjvn6HYTf9SFvCfuHe4iyzdG0f2XXpRva5AaGuk1fDuVSB0JQ==} + ng-primitives@0.78.0: + resolution: {integrity: sha512-LyqLiRlvvFUmCn007STvp7bTnh9JdlXSj+niEGAH0YK71PmpXi7Gd/Px4rxQWWyWSohIxoReWB1LLtk9/5H9xw==} + peerDependencies: + '@angular/cdk': '>=19.0.0' + '@angular/common': '>=19.0.0' + '@angular/core': '>=19.0.0' + '@angular/forms': '>=19.0.0' + '@floating-ui/dom': '>=1.6.0' + luxon: '*' + rxjs: '>=6.6.0' + peerDependenciesMeta: + luxon: + optional: true + + ng-primitives@0.86.0: + resolution: {integrity: sha512-WEe0NbpOOj7Hlui5s+dwmPATB/IT17HKZ5NcolgBO6zqnAstp6kQMhwAVhZSSYejTK4aFil6r4Muzh8F+75oyg==} peerDependencies: '@angular/cdk': '>=19.0.0' '@angular/common': '>=19.0.0' @@ -13537,10 +13551,10 @@ snapshots: rxjs: 7.8.2 tslib: 2.8.1 - '@ng-primitives/state@0.57.0(948022799d7f9fefaa21a9c74ae2d50c)': + '@ng-primitives/state@0.78.0(948022799d7f9fefaa21a9c74ae2d50c)': dependencies: '@angular/core': 20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0) - ng-primitives: 0.57.0(948022799d7f9fefaa21a9c74ae2d50c) + ng-primitives: 0.78.0(948022799d7f9fefaa21a9c74ae2d50c) tslib: 2.8.1 transitivePeerDependencies: - '@angular/cdk' @@ -19932,7 +19946,20 @@ snapshots: rollup: 4.44.2 tailwindcss: 4.1.11 - ng-primitives@0.57.0(948022799d7f9fefaa21a9c74ae2d50c): + ng-primitives@0.78.0(948022799d7f9fefaa21a9c74ae2d50c): + dependencies: + '@angular/cdk': 20.0.5(@angular/common@20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + '@angular/common': 20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) + '@angular/core': 20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0) + '@angular/forms': 20.0.6(@angular/common@20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(@angular/platform-browser@20.0.6(@angular/animations@20.0.6(@angular/common@20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0)))(@angular/common@20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0)))(rxjs@7.8.2) + '@floating-ui/dom': 1.7.2 + '@phenomnomnominal/tsquery': 6.1.3(typescript@5.8.3) + rxjs: 7.8.2 + tslib: 2.8.1 + transitivePeerDependencies: + - typescript + + ng-primitives@0.86.0(948022799d7f9fefaa21a9c74ae2d50c): dependencies: '@angular/cdk': 20.0.5(@angular/common@20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2))(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2) '@angular/common': 20.0.6(@angular/core@20.0.6(@angular/compiler@20.0.6)(rxjs@7.8.2)(zone.js@0.15.0))(rxjs@7.8.2)