flowbite-mcp 1.1.2 → 1.1.5

package/data/typography/paragraphs.md

@@ -1,16 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Paragraphs - Flowbite
-description: Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles based on Tailwind CSS
-group: typography
-toc: true
-
-previous: Headings
-previousLink: typography/headings/
-next: Blockquote
-nextLink: typography/blockquote/
----
-
 The paragraph element is one of the most commonly used HTML tags on a document page because it is used to write longer blocks of text separated by a blank line and can massively improve the on-page SEO of the page when used correctly.
 
 Get started with a collection of paragraph components based on multiple styles, layouts, colors and sizes to use for your website built with the utility classes from Tailwind CSS.
@@ -19,67 +6,67 @@ Get started with a collection of paragraph components based on multiple styles,
 
 Use this example of a paragraph element to use inside article content or a landing page.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 
 
 ## Leading paragraph
 
 The leading text can be used as the first paragraph inside an article content page.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-lg text-body md:text-xl">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy.</p>
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```
 
 ## First letter
 
 Use this example to highlight the first letter of the paragraph, often used in e-books and PDF documents.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-heading first-letter:me-3 first-letter:float-start">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <p class="text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 
 ## Paragraph link
 
 This example can be used to add a custom styled link element inside the paragraph.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <a href="#" class="font-medium text-fg-brand underline hover:no-underline">Link issues across Jira</a> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```
 
 ## Paragraph bold
 
 Use this example to highlight a piece of text inside the paragraph by using a bolder font weight.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <strong class="font-semibold text-heading">Link issues across Jira</strong> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```
 
 ## Paragraph underline
 
 This example can be used to underline a certain part of the text inside the paragraph.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <u class="underline">Link issues across Jira</u> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```
 
 ## Paragraph italic
 
 Use this example to make the font style of the text inside the paragraph italic.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. <em class="font-italic">Link issues across Jira</em> and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```
 
 ## Paragraph popover
 
 Get started with this example to show a popover with extra information inside paragraph elements.
 
-{{< example class="pt-60" github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="text-body">Due to its central geographic location in Southern Europe, <a href="#" class="text-fg-brand font-medium underline hover:no-underline" data-popover-target="popover-image">Italy</a> has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy</p>
 <div data-popover id="popover-image" role="tooltip" class="absolute z-10 p-3 invisible inline-block text-sm text-body transition-opacity duration-300 bg-neutral-primary-soft border border-default rounded-lg shadow-xs opacity-0 w-96">
     <div class="grid grid-cols-5">
@@ -99,7 +86,7 @@ Get started with this example to show a popover with extra information inside pa
     <div data-popper-arrow></div>
 </div>
 
-{{< /example >}}
+```
 
 ## Layout
 
@@ -109,29 +96,29 @@ Get started with examples of layouts for the paragraph component to separate con
 
 Use this example to show multiple paragraphs on a single line.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 
 ### Two columns even
 
 Use this example to separate paragraphs into two columns for better readability.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
     <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
     <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
 </div>
 <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 
 ### Three columns even
 
 This example can be used to separate paragraphs into three separate columns.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
     <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
@@ -139,13 +126,13 @@ This example can be used to separate paragraphs into three separate columns.
     <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
 </div>
 <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 
 ### Two columns uneven
 
 Use this example to separate paragraphs into two uneven columns.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
     <div class="col-span-2">
@@ -155,7 +142,7 @@ Use this example to separate paragraphs into two uneven columns.
     <p class="mb-3 text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
 </div>
 <p class="mb-3 text-body">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.</p>
-{{< /example >}}
+```
 
 ## Text alignment
 
@@ -165,22 +152,22 @@ Align the paragraph component to the left (default), center or right side of the
 
 The default alignment of the paragraph is to the left side and you can use the `text-left` class to align it manually.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-left rtl:text-right text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```
 
 ### Center
 
 Use the `text-center` class to align the paragraph text to the center.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-center text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```
 
 ### Right
 
 Use the `text-right` utility class to align the paragraph text the right side of the page.
 
-{{< example github="typography/paragraphs.md" show_dark=true >}}
+```html
 <p class="mb-3 text-right rtl:text-left text-body">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.</p>
-{{< /example >}}
+```

package/data/typography/text.md

@@ -1,23 +1,10 @@
----
-layout: docs
-title: Tailwind CSS Text - Flowbite
-description: Learn how to customize text-related styles and properties such as font size, font style, text decoration, font weight and more using Tailwind CSS classes
-group: typography
-toc: true
-
-previous: Links
-previousLink: typography/links/
-next: Horizontal line (HR)
-nextLink: typography/hr/
----
-
 Get started with a collection of text customization examples to learn how to update the size, font weight, style, decoration and spacing of inline text elements using Tailwind CSS.
 
 ## Font size
 
 Use this example to set the font size of inline text elements using the `text-{size}` class.
 
-{{< example class="flex items-center space-x-4 rtl:space-x-reverse" github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-xs text-heading">Aa</p>
 <p class="text-sm text-heading">Aa</p>
 <p class="text-base text-heading">Aa</p>
@@ -31,13 +18,13 @@ Use this example to set the font size of inline text elements using the `text-{s
 <p class="text-7xl text-heading">Aa</p>
 <p class="text-8xl text-heading">Aa</p>
 <p class="text-9xl text-heading">Aa</p>
-{{< /example >}}
+```
 
 ## Font weight
 
 This example can be used to the font weight of an inline text element using the `font-{size}` class.
 
-{{< example class="flex items-center space-x-8 rtl:space-x-reverse" github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-4xl font-thin text-heading">Aa</p>
 <p class="text-4xl font-extralight text-heading">Aa</p>
 <p class="text-4xl text-heading">Aa</p>
@@ -47,32 +34,32 @@ This example can be used to the font weight of an inline text element using the
 <p class="text-4xl font-bold text-heading">Aa</p>
 <p class="text-4xl font-extrabold text-heading">Aa</p>
 <p class="text-4xl font-black text-heading">Aa</p>
-{{< /example >}}
+```
 
 ## Text color
 
 Use the `text-{color}` classes from Tailwind CSS to set the color of the inline text.
 
-{{< example class="space-y-2" github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-fg-brand">This text is in the brand color.</p>
 <p class="text-success">This text is in the green color.</p>
 <p class="text-danger">This text is in the red color.</p>
 <p class="text-purple">This text is in the purple color.</p>
 <p class="text-teal">This text is in the teal color.</p>
-{{< /example >}}
+```
 
 ## Letter spacing
 
 Increase or decrease the spacing between letters using the `tracking-{type}` class.
 
-{{< example class="space-y-3" github="typography/text.md" show_dark=true >}}
+```html
 <p class="tracking-tighter text-body md:text-lg">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="tracking-tight text-body md:text-lg">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="tracking-normal text-body md:text-lg">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="tracking-wide text-body md:text-lg">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="tracking-wider text-body md:text-lg">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="tracking-widest text-body md:text-lg">Flowbite app will help you improve yourself by analysing your everyday life.</p>
-{{< /example >}}
+```
 
 ## Text Decoration
 
@@ -82,25 +69,25 @@ Set decoration for the inline text elements such as underline, line through or u
 
 Underline text by using the `underline` class or disable it using `no-underline`.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. <a href="#" class="font-semibold text-heading underline decoration-indigo">Link issues across Jira</a> and ingest data from other <a href="#" class="font-semibold text-heading underline decoration-brand">software development<a> tools, so your IT support and operations teams have richer contextual information to rapidly respond to <a href="#" class="font-semibold text-heading underline decoration-success">requests</a>, <a href="#" class="font-semibold text-heading underline decoration-danger">incidents</a>, and <a href="#" class="font-semibold text-heading underline decoration-sky">changes</a>.</p>
-{{< /example >}}
+```
 
 ### Line through
 
 Set a strikethrough line on a text element using the `line-through` class.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <span class="text-lg font-medium text-heading line-through">$109</span><span class="ms-3 text-lg font-medium text-heading">$79</span>
-{{< /example >}}
+```
 
 ### Uppercase
 
 Force uppercase characters for a given portion of text using the `uppercase` class.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-lg font-medium text-heading">The crypto <span class="uppercase">identity</span> primitive.</p>
-{{< /example >}}
+```
 
 ## Font style
 
@@ -110,17 +97,17 @@ Set italic or non italic styles with the utility classes from Tailwind CSS.
 
 Use the `italic` class from Tailwind CSS to set italic font style to a text element.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-lg font-medium text-heading">The crypto <span class="italic">identity</span> primitive.</p>
-{{< /example >}}
+```
 
 ### Normal
 
 Text elements by default are non-italic.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-lg font-medium text-heading">The crypto identity primitive.</p>
-{{< /example >}}
+```
 
 ## Line Height
 
@@ -130,25 +117,25 @@ Set the height between lines using the `leading-{type}` classes from Tailwind CS
 
 Use the `leading-normal` class to set default line height.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="max-w-lg text-3xl font-semibold leading-normal text-heading">The Al-powered app will help you improve yourself by analysing your everyday life.</p>
-{{< /example >}}
+```
 
 ### Leading relaxed
 
 Use the `leading-relaxed` class to increase the space between lines.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="max-w-lg text-3xl font-semibold leading-relaxed text-heading">The Al-powered app will help you improve yourself by analysing your everyday life.</p>
-{{< /example >}}
+```
 
 ### Leading loose
 
 Use the `leading-loose` class to set a large amount of space between text lines.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="max-w-lg text-3xl font-semibold leading-loose text-heading">The Al-powered app will help you improve yourself by analysing your everyday life.</p>
-{{< /example >}}
+```
 
 ## Text Align
 
@@ -158,33 +145,33 @@ Use the following examples to align the text content to the left, center, or rig
 
 Use the `text-left` class to align the text to the left side of the page.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-left rtl:text-right text-body">Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</p>
-{{< /example >}}
+```
 
 ### Center
 
 Use the `text-center` class to align the text content to the center of the page.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-center text-body">Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</p>
-{{< /example >}}
+```
 
 ### Right
 
 Use the `text-right` class to align the text element to the right side of the page.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-right rtl:text-left text-body">Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</p>
-{{< /example >}}
+```
 
 ### Text justify
 
 Use the `text-justify` class to justify the text content.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-justify text-body">Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library</p>
-{{< /example >}}
+```
 
 ## Whitespace
 
@@ -194,56 +181,56 @@ Configure the whitespace behaviour of inline text elements using classes from Ta
 
 Use the `whitespace-normal` class to set the default whitespace behaviour.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-body whitespace-normal">
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 <p>
-{{< /example >}}
+```
 
 ### Nowrap
 
 Use the `whitespace-nowrap` class to prevent text being added to a new line when the full width has been reached.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-body whitespace-nowrap">
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 <p>
-{{< /example >}}
+```
 
 ### Pre line
 
 Use the `whitespace-pre-line` class to add whitespace exactly how it has been set from the source code.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-body whitespace-pre-line">
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 This is some text. This is some text. This is some text.
 <p>
-{{< /example >}}
+```
 
 ## Text Decoration Style
 
 Update the text decoration style using the `decoration-{*}` classes from Tailwind CSS.
 
-{{< example github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-body">Track work across the enterprise through an open, collaborative platform. <a href="#" class="font-semibold text-heading underline decoration-indigo">Link issues across Jira</a> and ingest data from other <a href="#" class="font-semibold text-heading underline decoration-brand decoration-double">software development<a> tools, so your IT support and operations teams have richer contextual information to rapidly respond to <a href="#" class="font-semibold text-heading underline decoration-success decoration-dotted">requests</a>, <a href="#" class="font-semibold text-heading underline decoration-danger decoration-dashed">incidents</a>, and <a href="#" class="font-semibold text-heading underline decoration-sky decoration-wavy">changes</a>.</p>
-{{< /example >}}
+```
 
 ## Opacity
 
 Use the `text-{color}-{opacity}` class from Tailwind CSS to set the opacity of inline text elements.
 
-{{< example class="space-y-3" github="typography/text.md" show_dark=true >}}
+```html
 <p class="text-xl font-semibold text-fg-brand/100">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="text-xl font-semibold text-fg-brand/75">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="text-xl font-semibold text-fg-brand/50">Flowbite app will help you improve yourself by analysing your everyday life.</p>
 <p class="text-xl font-semibold text-fg-brand/25">Flowbite app will help you improve yourself by analysing your everyday life.</p>
-{{< /example >}}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-mcp",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "mcpName": "io.github.themesberg/flowbite-mcp",
   "description": "MCP server to convert Figma designs to Flowbite UI components in Tailwind CSS",
   "main": "build/index.js",