Merge pull request #1397 from Infineon/update-foundation-and-setup-do…

…cumentation

Added tailwind css page

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "24.1.2",
+  "version": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "24.1.2",
+  "version": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^17.3.3",
     "@angular/platform-browser-dynamic": "^17.3.3",
     "@angular/router": "^17.3.3",
-    "@infineon/infineon-design-system-angular": "^24.1.2",
+    "@infineon/infineon-design-system-angular": "^24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.4"

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "24.1.2",
+  "version": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^17.3.3",
     "@angular/core": "^17.3.3",
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "^24.1.2"
+    "@infineon/infineon-design-system-stencil": "^24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "24.1.2",
+  "version": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.1.2"
+    "@infineon/infineon-design-system-stencil": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0"
   },
   "auto": {
     "plugins": [

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "24.1.2",
+  "version": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.1.2"
+    "@infineon/infineon-design-system-stencil": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "24.1.2",
+  "version": "24.2.0--canary.1397.9c6c439da9dbbb348bde47bcdc83d1b0f23673fd.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/stories/setup-and-installation/TailwindCSS.mdx

@@ -0,0 +1,39 @@
+import { Meta, Description } from '@storybook/blocks';
+
+<Meta title="Setup & installation/Tailwind CSS" />
+
+# Using Tailwind CSS with our Design System
+
+## What is Tailwind CSS?
+
+Tailwind CSS is a popular, highly customizable, and widely-used utility-first CSS framework that allows developers to write more concise and maintainable code. It provides a set of pre-defined classes to style HTML elements, making it easy to create consistent and responsive user interfaces. With Tailwind CSS, you can focus on building your application's layout and design without worrying about writing custom CSS code.
+
+## Why are we offering Tailwind CSS with our Design System?
+
+We understand the importance of consistency and efficiency in front-end development. By providing a custom Tailwind CSS config file tailored to our design system, we aim to simplify the development process and ensure that our design tokens are applied consistently across all applications. This integration enables developers to leverage the power of Tailwind CSS while maintaining the visual identity of our design system.
+
+## How to use Tailwind CSS with our Design System
+
+To get started with Tailwind CSS and our custom config file, follow these steps:
+
+### 1. Install Tailwind CSS
+
+Use the default Tailwind CSS instructions to install Tailwind CSS in your project.
+
+### 2. Download our custom config file
+
+Head over to our GitHub repository ([Link to GitHub repository](https://github.com/Infineon/infineon-design-system-tailwind-config/)) and download the custom Tailwind CSS config file.
+
+### 3. Add the config file to your project
+
+Update your project with our config file.
+
+### 4. Start using Tailwind CSS classes
+
+Begin using Tailwind CSS in your project. You can refer to the Tailwind CSS documentation for a comprehensive list of available classes and their usage and check the [demo page](https://infineon.github.io/infineon-design-system-tailwind-config/) for our custom styles.
+
+## Additional Resources
+
+For more detailed information on using Tailwind CSS with our design system, including configuration options and best practices, please visit our GitHub repository ([Link to GitHub repository](https://github.com/Infineon/infineon-design-system-tailwind-config/)). You can also find the custom config file available for download on the same page.
+
+<p align="right"><a href="#tableContent">back to top</a></p>