enigmare/v2-crawler
1904
1{"id":"doc-installing_tailwind_css_with_vite_tailwind_css-310b3e71","source":"documentation","title":"Installing Tailwind CSS with Vite - Tailwind CSS","url":"https://tailwindcss.com/docs","text":"Example:\n```text\nnpm create vite@latest my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<!doctype html><html><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link href=\"/src/style.css\" rel=\"stylesheet\"></head><body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1></body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.132Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":169}}2{"id":"doc-editor_setup_getting_started_tailwind_css-90d38162","source":"documentation","title":"Editor setup - Getting started - Tailwind CSS","url":"https://tailwindcss.com/docs/editor-setup","text":"Example:\n```text\n<!-- Before --><button class=\"text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800\">Submit</button><!-- After --><button class=\"bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3\">Submit</button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.133Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":1,"totalLines":6,"estimatedTokens":64}}3{"id":"doc-installing_tailwind_css_with_vite_tailwind_css-0caf63ce","source":"documentation","title":"Installing Tailwind CSS with Vite - Tailwind CSS","url":"https://tailwindcss.com/docs/installation","text":"Example:\n```text\nnpm create vite@latest my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<!doctype html><html><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link href=\"/src/style.css\" rel=\"stylesheet\"></head><body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1></body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.133Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":169}}4{"id":"doc-compatibility_getting_started_tailwind_css-2a2769ee","source":"documentation","title":"Compatibility - Getting started - Tailwind CSS","url":"https://tailwindcss.com/docs/compatibility","text":"Example:\n```text\n@import \"tailwindcss\";@import \"./typography.css\";\n```\n\nExample:\n```text\n.typography { font-size: var(--text-base); color: var(--color-gray-700);}\n```\n\nExample:\n```text\n.typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); }}\n```\n\nExample:\n```text\n.typography p { font-size: var(--text-base);}.typography img { border-radius: var(--radius-lg);}\n```\n\nExample:\n```text\n<button class=\"bg-indigo-500 hover:bg-indigo-600 ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n@reference \"../app.css\";button { @apply bg-blue-500;}\n```\n\nExample:\n```text\nbutton { background: var(--color-blue-500);}\n```\n\nExample:\n```text\n<template> <button><slot /></button></template><style scoped> @reference \"../app.css\"; button { @apply bg-blue-500; }</style>\n```\n\nExample:\n```text\n<template> <button><slot /></button></template><style scoped> button { background-color: var(--color-blue-500); }</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.133Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":244}}5{"id":"doc-columns_layout_tailwind_css-47ccfe8c","source":"documentation","title":"columns - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/columns","text":"Example:\n```text\n<div class=\"columns-3 ...\"> <img class=\"aspect-3/2 ...\" src=\"/img/mountains-1.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-2.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-3.jpg\" /> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"columns-3xs ...\"> <img class=\"aspect-3/2 ...\" src=\"/img/mountains-1.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-2.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-3.jpg\" /> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"columns-3 gap-8 ...\"> <img class=\"aspect-3/2 ...\" src=\"/img/mountains-1.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-2.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-3.jpg\" /> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"columns-[30vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"columns-(--my-columns) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"columns-2 gap-4 sm:columns-3 sm:gap-8 ...\"> <img class=\"aspect-3/2 ...\" src=\"/img/mountains-1.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-2.jpg\" /> <img class=\"aspect-square ...\" src=\"/img/mountains-3.jpg\" /> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --container-4xs: 14rem; }\n```\n\nExample:\n```text\n<div class=\"columns-4xs\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.133Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":336}}6{"id":"doc-dark_mode_core_concepts_tailwind_css-82fe38cc","source":"documentation","title":"Dark mode - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/dark-mode","text":"Example:\n```text\n<div class=\"bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5\"> <div> <span class=\"inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg\"> <svg class=\"h-6 w-6 stroke-white\" ...> <!-- ... --> </svg> </span> </div> <h3 class=\"text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight \">Writes upside-down</h3> <p class=\"text-gray-500 dark:text-gray-400 mt-2 text-sm \"> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@custom-variant dark (&:where(.dark, .dark *));\n```\n\nExample:\n```text\n<html class=\"dark\"> <body> <div class=\"bg-white dark:bg-black\"> <!-- ... --> </div> </body></html>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));\n```\n\nExample:\n```text\n<html data-theme=\"dark\"> <body> <div class=\"bg-white dark:bg-black\"> <!-- ... --> </div> </body></html>\n```\n\nExample:\n```text\n// On page load or when changing themes, best to add inline in `head` to avoid FOUCdocument.documentElement.classList.toggle( \"dark\", localStorage.theme === \"dark\" || (!(\"theme\" in localStorage) && window.matchMedia(\"(prefers-color-scheme: dark)\").matches),);// Whenever the user explicitly chooses light modelocalStorage.theme = \"light\";// Whenever the user explicitly chooses dark modelocalStorage.theme = \"dark\";// Whenever the user explicitly chooses to respect the OS preferencelocalStorage.removeItem(\"theme\");\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.134Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":413}}7{"id":"doc-functions_and_directives_core_concepts_tailwind_-79b67f84","source":"documentation","title":"Functions and directives - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/functions-and-directives","text":"Example:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\n@theme { --font-display: \"Satoshi\", \"sans-serif\"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); --color-avocado-400: oklch(0.92 0.19 114.08); --color-avocado-500: oklch(0.84 0.18 117.33); --color-avocado-600: oklch(0.53 0.12 118.34); --ease-fluid: cubic-bezier(0.3, 0, 0, 1); --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... */}\n```\n\nExample:\n```text\n@source \"../node_modules/@my-company/ui-lib\";\n```\n\nExample:\n```text\n@utility tab-4 { tab-size: 4;}\n```\n\nExample:\n```text\n.my-element { background: white; @variant dark { background: black; }}\n```\n\nExample:\n```text\n@custom-variant theme-midnight (&:where([data-theme=\"midnight\"] *));\n```\n\nExample:\n```text\n.select2-dropdown { @apply rounded-b-lg shadow-md;}.select2-search { @apply rounded border border-gray-300;}.select2-results__group { @apply text-lg font-bold text-gray-900;}\n```\n\nExample:\n```text\n<template> <h1>Hello world!</h1></template><style> @reference \"../../app.css\"; h1 { @apply text-2xl font-bold text-red-500; }</style>\n```\n\nExample:\n```text\n<template> <h1>Hello world!</h1></template><style> @reference \"tailwindcss\"; h1 { @apply text-2xl font-bold text-red-500; }</style>\n```\n\nExample:\n```text\n{ // ... \"imports\": { \"#app.css\": \"./src/css/app.css\" }}\n```\n\nExample:\n```text\n<template> <h1>Hello world!</h1></template><style> @reference \"#app.css\"; h1 { @apply text-2xl font-bold text-red-500; }</style>\n```\n\nExample:\n```text\n.my-element { color: --alpha(var(--color-lime-300) / 50%);}\n```\n\nExample:\n```text\n.my-element { color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);}\n```\n\nExample:\n```text\n.my-element { margin: --spacing(4);}\n```\n\nExample:\n```text\n.my-element { margin: calc(var(--spacing) * 4);}\n```\n\nExample:\n```text\n<div class=\"py-[calc(--spacing(4)-1px)]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@config \"../../tailwind.config.js\";\n```\n\nExample:\n```text\n@plugin \"@tailwindcss/typography\";\n```\n\nExample:\n```text\n.my-element { margin: theme(spacing.12);}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.134Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":19,"totalLines":96,"estimatedTokens":549}}8{"id":"doc-responsive_design_core_concepts_tailwind_css-445835b4","source":"documentation","title":"Responsive design - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/responsive-design","text":"Example:\n```text\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n```\n\nExample:\n```text\n<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens --><img class=\"w-16 md:w-32 lg:w-48\" src=\"...\" />\n```\n\nExample:\n```text\n<div class=\"mx-auto max-w-md overflow-hidden rounded-xl bg-white shadow-md md:max-w-2xl\"> <div class=\"md:flex\"> <div class=\"md:shrink-0\"> <img class=\"h-48 w-full object-cover md:h-full md:w-48\" src=\"/img/building.jpg\" alt=\"Modern building architecture\" /> </div> <div class=\"p-8\"> <div class=\"text-sm font-semibold tracking-wide text-indigo-500 uppercase\">Company retreats</div> <a href=\"#\" class=\"mt-1 block text-lg leading-tight font-medium text-black hover:underline\"> Incredible accommodation for your team </a> <p class=\"mt-2 text-gray-500\"> Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that. </p> </div> </div></div>\n```\n\nExample:\n```text\n<!-- This will only center text on screens 640px and wider, not on small screens --><div class=\"sm:text-center\"></div>\n```\n\nExample:\n```text\n<!-- This will center text on mobile, and left align it on screens 640px and wider --><div class=\"text-center sm:text-left\"></div>\n```\n\nExample:\n```text\n<div class=\"md:max-xl:flex\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"md:max-lg:flex\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem;}\n```\n\nExample:\n```text\n<div class=\"grid xs:grid-cols-2 3xl:grid-cols-6\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --breakpoint-2xl: initial;}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --breakpoint-*: initial; --breakpoint-tablet: 40rem; --breakpoint-laptop: 64rem; --breakpoint-desktop: 80rem;}\n```\n\nExample:\n```text\n<div class=\"max-[600px]:bg-sky-300 min-[320px]:text-center\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"@container\"> <div class=\"flex flex-col @md:flex-row\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"@container\"> <div class=\"flex flex-row @max-md:flex-col\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"@container\"> <div class=\"flex flex-row @sm:@max-md:flex-col\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"@container/main\"> <!-- ... --> <div class=\"flex flex-row @sm/main:flex-col\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"@container-size\"> <div class=\"h-[50cqb]\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --container-8xl: 96rem;}\n```\n\nExample:\n```text\n<div class=\"@container\"> <div class=\"flex flex-col @8xl:flex-row\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"@container\"> <div class=\"flex flex-col @min-[475px]:flex-row\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"@container\"> <div class=\"w-[50cqw]\"> <!-- ... --> </div></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.135Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":21,"totalLines":106,"estimatedTokens":784}}9{"id":"doc-aspect_ratio_layout_tailwind_css-8dc6bb38","source":"documentation","title":"aspect-ratio - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/aspect-ratio","text":"Example:\n```text\n<img class=\"aspect-3/2 object-cover ...\" src=\"/img/villas.jpg\" />\n```\n\nExample:\n```text\n<iframe class=\"aspect-video ...\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"></iframe>\n```\n\nExample:\n```text\n<img class=\"aspect-[calc(4*3+1)/3] ...\" src=\"/img/villas.jpg\" />\n```\n\nExample:\n```text\n<img class=\"aspect-(--my-aspect-ratio) ...\" src=\"/img/villas.jpg\" />\n```\n\nExample:\n```text\n<iframe class=\"aspect-video md:aspect-square ...\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"></iframe>\n```\n\nExample:\n```text\n@theme { --aspect-retro: 4 / 3; }\n```\n\nExample:\n```text\n<iframe class=\"aspect-retro\" src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"></iframe>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.135Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":172}}10{"id":"doc-grid_auto_rows_flexbox_grid_tailwind_css-89a92751","source":"documentation","title":"grid-auto-rows - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/grid-auto-rows","text":"Example:\n```text\n<div class=\"grid grid-flow-row auto-rows-max\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"auto-rows-[minmax(0,2fr)] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"auto-rows-(--my-auto-rows) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-row auto-rows-max md:auto-rows-min ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.135Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":104}}11{"id":"doc-preflight_base_styles_tailwind_css-e74ea860","source":"documentation","title":"Preflight - Base styles - Tailwind CSS","url":"https://tailwindcss.com/docs/preflight","text":"Example:\n```text\n@layer theme, base, components, utilities;@import \"tailwindcss/theme.css\" layer(theme);@import \"tailwindcss/preflight.css\" layer(base);@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\nExample:\n```text\n*,::after,::before,::backdrop,::file-selector-button { margin: 0; padding: 0;}\n```\n\nExample:\n```text\n*,::after,::before,::backdrop,::file-selector-button { box-sizing: border-box; border: 0 solid;}\n```\n\nExample:\n```text\n@layer base { .google-map * { border-style: none; }}\n```\n\nExample:\n```text\nh1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit;}\n```\n\nExample:\n```text\nol,ul,menu { list-style: none;}\n```\n\nExample:\n```text\n<ul class=\"list-inside list-disc\"> <li>One</li> <li>Two</li> <li>Three</li></ul>\n```\n\nExample:\n```text\nimg,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle;}\n```\n\nExample:\n```text\n<img class=\"inline\" src=\"...\" alt=\"...\" />\n```\n\nExample:\n```text\nimg,video { max-width: 100%; height: auto;}\n```\n\nExample:\n```text\n<img class=\"max-w-none\" src=\"...\" alt=\"...\" />\n```\n\nExample:\n```text\n[hidden]:where(:not([hidden=\"until-found\"])) { display: none !important;}\n```\n\nExample:\n```text\n@layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } a { color: var(--color-blue-600); text-decoration-line: underline; }}\n```\n\nExample:\n```text\n@layer theme, base, components, utilities;@import \"tailwindcss/theme.css\" layer(theme);@import \"tailwindcss/utilities.css\" layer(utilities);@import \"tailwindcss/utilities.css\" layer(utilities) source(none);\n```\n\nExample:\n```text\n@layer theme, base, components, utilities;@import \"tailwindcss/theme.css\" layer(theme);@import \"tailwindcss/utilities.css\" layer(utilities);@import \"tailwindcss/utilities.css\" layer(utilities) important;\n```\n\nExample:\n```text\n@layer theme, base, components, utilities;@import \"tailwindcss/theme.css\" layer(theme);@import \"tailwindcss/theme.css\" layer(theme) theme(static);@import \"tailwindcss/utilities.css\" layer(utilities);\n```\n\nExample:\n```text\n@layer theme, base, components, utilities;@import \"tailwindcss/theme.css\" layer(theme);@import \"tailwindcss/utilities.css\" layer(utilities);@import \"tailwindcss/theme.css\" layer(theme) prefix(tw);@import \"tailwindcss/utilities.css\" layer(utilities) prefix(tw);\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.135Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":86,"estimatedTokens":595}}12{"id":"doc-detecting_classes_in_source_files_core_concepts_-f2c0adf6","source":"documentation","title":"Detecting classes in source files - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/detecting-classes-in-source-files","text":"Example:\n```text\nexport function Button({ color, children }) { const colors = { black: \"bg-black text-white\", blue: \"bg-blue-500 text-white\", white: \"bg-white text-black\", }; return ( <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}> {children} </button> );}\n```\n\nExample:\n```text\n<div class=\"text-{{ error ? 'red' : 'green' }}-600\"></div>\n```\n\nExample:\n```text\n<div class=\"{{ error ? 'text-red-600' : 'text-green-600' }}\"></div>\n```\n\nExample:\n```text\nfunction Button({ color, children }) { return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}\n```\n\nExample:\n```text\nfunction Button({ color, children }) { const colorVariants = { blue: \"bg-blue-600 hover:bg-blue-500\", red: \"bg-red-600 hover:bg-red-500\", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;}\n```\n\nExample:\n```text\nfunction Button({ color, children }) { const colorVariants = { blue: \"bg-blue-600 hover:bg-blue-500 text-white\", red: \"bg-red-500 hover:bg-red-400 text-white\", yellow: \"bg-yellow-300 hover:bg-yellow-400 text-black\", }; return <button className={`${colorVariants[color]} ...`}>{children}</button>;}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source \"../node_modules/@acmecorp/ui-lib\";\n```\n\nExample:\n```text\n@import \"tailwindcss\" source(\"../src\");\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source not \"../src/components/legacy\";\n```\n\nExample:\n```text\n@import \"tailwindcss\" source(none);@source \"../admin\";@source \"../shared\";\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source inline(\"underline\");\n```\n\nExample:\n```text\n.underline { text-decoration-line: underline;}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source inline(\"{hover:,focus:,}underline\");\n```\n\nExample:\n```text\n.underline { text-decoration-line: underline;}@media (hover: hover) { .hover\\:underline:hover { text-decoration-line: underline; }}@media (focus: focus) { .focus\\:underline:focus { text-decoration-line: underline; }}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source inline(\"{hover:,}bg-red-{50,{100..900..100},950}\");\n```\n\nExample:\n```text\n.bg-red-50 { background-color: var(--color-red-50);}.bg-red-100 { background-color: var(--color-red-100);}.bg-red-200 { background-color: var(--color-red-200);}/* ... */.bg-red-800 { background-color: var(--color-red-800);}.bg-red-900 { background-color: var(--color-red-900);}.bg-red-950 { background-color: var(--color-red-950);}@media (hover: hover) { .hover\\:bg-red-50:hover { background-color: var(--color-red-50); } /* ... */ .hover\\:bg-red-950:hover { background-color: var(--color-red-950); }}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source not inline(\"{hover:,focus:,}bg-red-{50,{100..900..100},950}\");\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.136Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":17,"totalLines":86,"estimatedTokens":709}}13{"id":"doc-adding_custom_styles_core_concepts_tailwind_css-9d3faaf5","source":"documentation","title":"Adding custom styles - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/adding-custom-styles","text":"Example:\n```text\n@theme { --font-display: \"Satoshi\", \"sans-serif\"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); --color-avocado-400: oklch(0.92 0.19 114.08); --color-avocado-500: oklch(0.84 0.18 117.33); --color-avocado-600: oklch(0.53 0.12 118.34); --ease-fluid: cubic-bezier(0.3, 0, 0, 1); --ease-snappy: cubic-bezier(0.2, 0, 0, 1); /* ... */}\n```\n\nExample:\n```text\n<div class=\"top-[117px]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"top-[117px] lg:top-[344px]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-[#bada55] text-[22px] before:content-['Festivus']\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"fill-(--my-brand-color) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"[mask-type:luminance]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"[mask-type:luminance] hover:[mask-type:alpha]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"[--scroll-offset:56px] lg:[--scroll-offset:44px]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<ul role=\"list\"> {#each items as item} <li class=\"lg:[&:nth-child(-n+3)]:hover:underline\">{item}</li> {/each}</ul>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-[1fr_500px_2fr]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url('/what_a_rush.png')]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"before:content-['hello\\_world']\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<!-- Will generate a font-size utility --><div class=\"text-[22px]\">...</div><!-- Will generate a color utility --><div class=\"text-[#bada55]\">...</div>\n```\n\nExample:\n```text\n<div class=\"text-(--my-var)\">...</div>\n```\n\nExample:\n```text\n<!-- Will generate a font-size utility --><div class=\"text-(length:--my-var)\">...</div><!-- Will generate a color utility --><div class=\"text-(color:--my-var)\">...</div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";.my-custom-style { /* ... */}\n```\n\nExample:\n```text\n<!doctype html><html lang=\"en\" class=\"bg-gray-100 font-serif text-gray-900\"> <!-- ... --></html>\n```\n\nExample:\n```text\n@layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); }}\n```\n\nExample:\n```text\n@layer components { .card { background-color: var(--color-white); border-radius: var(--radius-lg); padding: --spacing(6); box-shadow: var(--shadow-xl); }}\n```\n\nExample:\n```text\n<!-- Will look like a card, but with square corners --><div class=\"card rounded-none\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@layer components { .select2-dropdown { /* ... */ }}\n```\n\nExample:\n```text\n.my-element { background: white; @variant dark { background: black; }}\n```\n\nExample:\n```text\n.my-element { background: white; @media (prefers-color-scheme: dark) { background: black; }}\n```\n\nExample:\n```text\n.my-element { background: white; @variant hover:focus { background: black; }}\n```\n\nExample:\n```text\n.my-element { background: white; &:hover { @media (hover: hover) { &:focus { background: black; } } }}\n```\n\nExample:\n```text\n.my-element { background: white; @variant hover, focus { background: black; }}\n```\n\nExample:\n```text\n.my-element { background: white; &:hover { @media (hover: hover) { background: black; } } &:focus { background: black; }}\n```\n\nExample:\n```text\n@utility content-auto { content-visibility: auto;}\n```\n\nExample:\n```text\n<div class=\"content-auto\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"hover:content-auto\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }}\n```\n\nExample:\n```text\n@utility tab-* { tab-size: --value(--tab-size-*);}\n```\n\nExample:\n```text\n@theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*);}\n```\n\nExample:\n```text\n@utility tab-* { tab-size: --value(integer);}\n```\n\nExample:\n```text\n@utility tab-* { tab-size: --value(\"inherit\", \"initial\", \"unset\");}\n```\n\nExample:\n```text\n@utility tab-* { tab-size: --value([integer]);}\n```\n\nExample:\n```text\n@theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-*);}\n```\n\nExample:\n```text\n@utility opacity-* { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*);}\n```\n\nExample:\n```text\n@theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*, integer, [integer]);}@utility opacity-* { opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*, [percentage]);}\n```\n\nExample:\n```text\n@utility tab-* { tab-size: --value(integer, --default(4));}\n```\n\nExample:\n```text\n.tab { tab-size: 4;}.tab-2 { tab-size: 2;}\n```\n\nExample:\n```text\n@utility tab-* { tab-size: --value(integer); line-height: --modifier(integer, --default(1));}\n```\n\nExample:\n```text\n@utility inset-* { inset: --spacing(--value(integer)); inset: --value([percentage], [length]);}@utility -inset-* { inset: --spacing(--value(integer) * -1); inset: calc(--value([percentage], [length]) * -1);}\n```\n\nExample:\n```text\n@utility text-* { font-size: --value(--text-*, [length]); line-height: --modifier(--leading-*, [length], [*]);}\n```\n\nExample:\n```text\n@utility aspect-* { aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);}\n```\n\nExample:\n```text\n@custom-variant theme-midnight { &:where([data-theme=\"midnight\"] *) { @slot; }}\n```\n\nExample:\n```text\n<html data-theme=\"midnight\"> <button class=\"theme-midnight:bg-black ...\"></button></html>\n```\n\nExample:\n```text\n@custom-variant theme-midnight (&:where([data-theme=\"midnight\"] *));\n```\n\nExample:\n```text\n@custom-variant any-hover { @media (any-hover: hover) { &:hover { @slot; } }}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.136Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":49,"totalLines":246,"estimatedTokens":1468}}14{"id":"doc-upgrade_guide_getting_started_tailwind_css-3279cfb5","source":"documentation","title":"Upgrade guide - Getting started - Tailwind CSS","url":"https://tailwindcss.com/docs/upgrade-guide","text":"Example:\n```text\n$ npx @tailwindcss/upgrade\n```\n\nExample:\n```text\nexport default { plugins: { \"postcss-import\": {}, tailwindcss: {}, autoprefixer: {}, \"@tailwindcss/postcss\": {}, },};\n```\n\nExample:\n```text\nimport { defineConfig } from \"vite\";import tailwindcss from \"@tailwindcss/vite\";export default defineConfig({ plugins: [ tailwindcss(), ],});\n```\n\nExample:\n```text\nnpx tailwindcss -i input.css -o output.cssnpx @tailwindcss/cli -i input.css -o output.css\n```\n\nExample:\n```text\n@tailwind base;@tailwind components;@tailwind utilities;@import \"tailwindcss\";\n```\n\nExample:\n```text\n<input class=\"shadow-sm\" /><input class=\"shadow-xs\" /><input class=\"shadow\" /><input class=\"shadow-sm\" />\n```\n\nExample:\n```text\n<input class=\"outline outline-2\" /><input class=\"outline-2\" />\n```\n\nExample:\n```text\n<input class=\"focus:outline-none\" /><input class=\"focus:outline-hidden\" />\n```\n\nExample:\n```text\n<input class=\"ring ring-blue-500\" /><input class=\"ring-3 ring-blue-500\" />\n```\n\nExample:\n```text\n/* Before */.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem;}/* Now */.space-y-4 > :not(:last-child) { margin-bottom: 1rem;}\n```\n\nExample:\n```text\n<div class=\"space-y-4 p-4\"><div class=\"flex flex-col gap-4 p-4\"> <label for=\"name\">Name</label> <input type=\"text\" name=\"name\" /></div>\n```\n\nExample:\n```text\n/* Before */.divide-y-4 > :not([hidden]) ~ :not([hidden]) { border-top-width: 4px;}/* Now */.divide-y-4 > :not(:last-child) { border-bottom-width: 4px;}\n```\n\nExample:\n```text\n<div class=\"bg-gradient-to-r from-red-500 to-yellow-400 dark:from-blue-500\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-linear-to-r from-red-500 via-orange-400 to-yellow-400 dark:via-none dark:from-blue-500 dark:to-teal-400\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@utility container { margin-inline: auto; padding-inline: 2rem;}\n```\n\nExample:\n```text\n<div class=\"border border-gray-200 px-2 py-3 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); }}\n```\n\nExample:\n```text\n<button class=\"focus:ring ...\"><button class=\"focus:ring-3 ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"focus:ring-3 focus:ring-blue-500 ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n@theme { --default-ring-width: 3px; --default-ring-color: var(--color-blue-500);}\n```\n\nExample:\n```text\n@layer base { input::placeholder, textarea::placeholder { color: var(--color-gray-400); }}\n```\n\nExample:\n```text\n@layer base { button:not(:disabled), [role=\"button\"]:not(:disabled) { cursor: pointer; }}\n```\n\nExample:\n```text\n@layer base { dialog { margin: auto; }}\n```\n\nExample:\n```text\n<div class=\"tw:flex tw:bg-red-500 tw:hover:bg-red-600\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\" prefix(tw);@theme { --font-display: \"Satoshi\", \"sans-serif\"; --breakpoint-3xl: 120rem; --color-avocado-100: oklch(0.99 0 0); --color-avocado-200: oklch(0.98 0.04 113.22); --color-avocado-300: oklch(0.94 0.11 115.03); /* ... */}\n```\n\nExample:\n```text\n:root { --tw-font-display: \"Satoshi\", \"sans-serif\"; --tw-breakpoint-3xl: 120rem; --tw-color-avocado-100: oklch(0.99 0 0); --tw-color-avocado-200: oklch(0.98 0.04 113.22); --tw-color-avocado-300: oklch(0.94 0.11 115.03); /* ... */}\n```\n\nExample:\n```text\n<div class=\"flex! bg-red-500! hover:bg-red-600/50!\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@layer utilities { .tab-4 { tab-size: 4; }}@utility tab-4 { tab-size: 4;}\n```\n\nExample:\n```text\n@layer components { .btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace; }}@utility btn { border-radius: 0.5rem; padding: 0.5rem 1rem; background-color: ButtonFace;}\n```\n\nExample:\n```text\n<ul class=\"py-4 first:*:pt-0 last:*:pb-0\"><ul class=\"py-4 *:first:pt-0 *:last:pb-0\"> <li>One</li> <li>Two</li> <li>Three</li></ul>\n```\n\nExample:\n```text\n<div class=\"bg-[--brand-color]\"></div><div class=\"bg-(--brand-color)\"></div>\n```\n\nExample:\n```text\n<div class=\"grid-cols-[max-content,auto]\"></div><div class=\"grid-cols-[max-content_auto]\"></div>\n```\n\nExample:\n```text\n@media (hover: hover) { .hover\\:underline:hover { text-decoration: underline; }}\n```\n\nExample:\n```text\n@custom-variant hover (&:hover);\n```\n\nExample:\n```text\n<button class=\"transition hover:outline-2 hover:outline-cyan-500\"></button><button class=\"outline-cyan-500 transition hover:outline-2\"></button>\n```\n\nExample:\n```text\n<button class=\"scale-150 focus:transform-none\"></button><button class=\"scale-150 focus:scale-none\"></button>\n```\n\nExample:\n```text\n<button class=\"transition-[opacity,transform] hover:scale-150\"></button><button class=\"transition-[opacity,scale] hover:scale-150\"></button>\n```\n\nExample:\n```text\n.my-class { background-color: theme(colors.red.500); background-color: var(--color-red-500);}\n```\n\nExample:\n```text\n@media (width >= theme(screens.xl)) {@media (width >= theme(--breakpoint-xl)) { /* ... */}\n```\n\nExample:\n```text\n@config \"../../tailwind.config.js\";\n```\n\nExample:\n```text\n<motion.div animate={{ backgroundColor: \"var(--color-blue-500)\" }} />\n```\n\nExample:\n```text\nlet styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue(\"--shadow-xl\");\n```\n\nExample:\n```text\n<template> <h1>Hello world!</h1></template><style> @reference \"../../app.css\"; h1 { @apply text-2xl font-bold text-red-500; }</style>\n```\n\nExample:\n```text\n<template> <h1>Hello world!</h1></template><style> h1 { color: var(--text-red-500); }</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.138Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":44,"totalLines":221,"estimatedTokens":1402}}15{"id":"doc-theme_variables_core_concepts_tailwind_css-e5a1d1cc","source":"documentation","title":"Theme variables - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/theme","text":"Example:\n```text\n@import \"tailwindcss\";@theme { --color-mint-500: oklch(0.72 0.11 178);}\n```\n\nExample:\n```text\n<div class=\"bg-mint-500\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div style=\"background-color: var(--color-mint-500)\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* ... */}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --font-poppins: Poppins, sans-serif;}\n```\n\nExample:\n```text\n<h1 class=\"font-poppins\">This headline will use Poppins.</h1>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --breakpoint-3xl: 120rem;}\n```\n\nExample:\n```text\n<div class=\"3xl:grid-cols-6 grid grid-cols-2 md:grid-cols-4\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@layer theme, base, components, utilities;@import \"./theme.css\" layer(theme);@import \"./preflight.css\" layer(base);@import \"./utilities.css\" layer(utilities);\n```\n\nExample:\n```text\n@theme { --font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --font-script: Great Vibes, cursive;}\n```\n\nExample:\n```text\n<p class=\"font-script\">This will use the Great Vibes font family.</p>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --breakpoint-sm: 30rem;}\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-1 sm:grid-cols-3\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --animate-fade-in-scale: fade-in-scale 0.3s ease-out; @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme inline { --font-sans: var(--font-inter);}\n```\n\nExample:\n```text\n.font-sans { font-family: var(--font-inter);}\n```\n\nExample:\n```text\n<div id=\"parent\" style=\"--font-sans: var(--font-inter, sans-serif);\"> <div id=\"child\" style=\"--font-inter: Inter; font-family: var(--font-sans);\"> This text will use the sans-serif font, not Inter. </div></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme static { --color-primary: var(--color-red-500); --color-secondary: var(--color-blue-500);}\n```\n\nExample:\n```text\n@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@import \"../brand/theme.css\";\n```\n\nExample:\n```text\n:root { --font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@layer components { .typography { p { font-size: var(--text-base); color: var(--color-gray-700); } h1 { font-size: var(--text-2xl--line-height); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } }}\n```\n\nExample:\n```text\n<div class=\"relative rounded-xl\"> <div class=\"absolute inset-px rounded-[calc(var(--radius-xl)-1px)]\"> <!-- ... --> </div> <!-- ... --></div>\n```\n\nExample:\n```text\n<motion.div animate={{ backgroundColor: \"var(--color-blue-500)\" }} />\n```\n\nExample:\n```text\nlet styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue(\"--shadow-xl\");\n```\n\nExample:\n```text\n@theme { --font-sans: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68); --color-mauve-400: oklch(71.1% 0.019 323.02); --color-mauve-500: oklch(54.2% 0.034 322.5); --color-mauve-600: oklch(43.5% 0.029 321.78); --color-mauve-700: oklch(36.4% 0.029 323.89); --color-mauve-800: oklch(26.3% 0.024 320.12); --color-mauve-900: oklch(21.2% 0.019 322.12); --color-mauve-950: oklch(14.5% 0.008 326); --color-olive-50: oklch(98.8% 0.003 106.5); --color-olive-100: oklch(96.6% 0.005 106.5); --color-olive-200: oklch(93% 0.007 106.5); --color-olive-300: oklch(88% 0.011 106.6); --color-olive-400: oklch(73.7% 0.021 106.9); --color-olive-500: oklch(58% 0.031 107.3); --color-olive-600: oklch(46.6% 0.025 107.3); --color-olive-700: oklch(39.4% 0.023 107.4); --color-olive-800: oklch(28.6% 0.016 107.4); --color-olive-900: oklch(22.8% 0.013 107.4); --color-olive-950: oklch(15.3% 0.006 107.1); --color-mist-50: oklch(98.7% 0.002 197.1); --color-mist-100: oklch(96.3% 0.002 197.1); --color-mist-200: oklch(92.5% 0.005 214.3); --color-mist-300: oklch(87.2% 0.007 219.6); --color-mist-400: oklch(72.3% 0.014 214.4); --color-mist-500: oklch(56% 0.021 213.5); --color-mist-600: oklch(45% 0.017 213.2); --color-mist-700: oklch(37.8% 0.015 216); --color-mist-800: oklch(27.5% 0.011 216.9); --color-mist-900: oklch(21.8% 0.008 223.9); --color-mist-950: oklch(14.8% 0.004 228.8); --color-taupe-50: oklch(98.6% 0.002 67.8); --color-taupe-100: oklch(96% 0.002 17.2); --color-taupe-200: oklch(92.2% 0.005 34.3); --color-taupe-300: oklch(86.8% 0.007 39.5); --color-taupe-400: oklch(71.4% 0.014 41.2); --color-taupe-500: oklch(54.7% 0.021 43.1); --color-taupe-600: oklch(43.8% 0.017 39.3); --color-taupe-700: oklch(36.7% 0.016 35.7); --color-taupe-800: oklch(26.8% 0.011 36.5); --color-taupe-900: oklch(21.4% 0.009 43.1); --color-taupe-950: oklch(14.7% 0.004 49.3); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.139Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":29,"totalLines":146,"estimatedTokens":5931}}16{"id":"doc-styling_with_utility_classes_core_concepts_tailw-66f25cc8","source":"documentation","title":"Styling with utility classes - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/styling-with-utility-classes","text":"Example:\n```text\n<div class=\"mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10\"> <img class=\"size-12 shrink-0\" src=\"/img/logo.svg\" alt=\"ChitChat Logo\" /> <div> <div class=\"text-xl font-medium text-black dark:text-white\">ChitChat</div> <p class=\"text-gray-500 dark:text-gray-400\">You have a new message!</p> </div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-col gap-2 p-8 sm:flex-row sm:items-center sm:gap-6 sm:py-4 ...\"> <img class=\"mx-auto block h-24 rounded-full sm:mx-0 sm:shrink-0\" src=\"/img/erin-lindford.jpg\" alt=\"\" /> <div class=\"space-y-2 text-center sm:text-left\"> <div class=\"space-y-0.5\"> <p class=\"text-lg font-semibold text-black\">Erin Lindford</p> <p class=\"font-medium text-gray-500\">Product Engineer</p> </div> <button class=\"border-purple-200 text-purple-600 hover:border-transparent hover:bg-purple-600 hover:text-white active:bg-purple-700 ...\"> Message </button> </div></div>\n```\n\nExample:\n```text\n<button class=\"bg-sky-500 hover:bg-sky-700 ...\">Save changes</button>\n```\n\nExample:\n```text\n.hover\\:bg-sky-700 { &:hover { background-color: var(--color-sky-700); }}\n```\n\nExample:\n```text\n<button class=\"btn\">Save changes</button><style> .btn { background-color: var(--color-sky-500); &:hover { background-color: var(--color-sky-700); } }</style>\n```\n\nExample:\n```text\n<button class=\"bg-sky-500 disabled:hover:bg-sky-500 ...\">Save changes</button>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-2 sm:grid-cols-3\"> <!-- ... --></div>\n```\n\nExample:\n```text\n.sm\\:grid-cols-3 { @media (width >= 40rem) { grid-template-columns: repeat(3, minmax(0, 1fr)); }}\n```\n\nExample:\n```text\n<div class=\"bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5\"> <div> <span class=\"inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg\"> <svg class=\"h-6 w-6 text-white\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\" > <!-- ... --> </svg> </span> </div> <h3 class=\"text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight \">Writes upside-down</h3> <p class=\"text-gray-500 dark:text-gray-400 mt-2 text-sm \"> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>\n```\n\nExample:\n```text\n.dark\\:bg-gray-800 { @media (prefers-color-scheme: dark) { background-color: var(--color-gray-800); }}\n```\n\nExample:\n```text\n<div class=\"blur-sm grayscale\"> <!-- ... --></div>\n```\n\nExample:\n```text\n.blur-sm { --tw-blur: blur(var(--blur-sm)); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);}.grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-grayscale,);}\n```\n\nExample:\n```text\n<button class=\"bg-[#316ff6] ...\"> Sign in with Facebook</button>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-[24rem_2.5rem_minmax(0,1fr)]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-h-[calc(100dvh-(--spacing(6)))]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"[--gutter-width:1rem] lg:[--gutter-width:2rem]\"> <!-- ... --></div>\n```\n\nExample:\n```text\nexport default function Button({ size, children }) { let sizeClasses = { md: \"px-4 py-2 rounded-md text-base\", lg: \"px-5 py-3 rounded-lg text-lg\", }[size]; return ( <button type=\"button\" className={`font-bold ${sizeClasses}`}> {children} </button> );}\n```\n\nExample:\n```text\n<button class=\"dark:lg:data-current:hover:bg-indigo-600 ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n@media (prefers-color-scheme: dark) and (width >= 64rem) { button[data-current]:hover { background-color: var(--color-indigo-600); }}\n```\n\nExample:\n```text\n<a href=\"#\" class=\"group rounded-lg p-8\"> <!-- ... --> <span class=\"group-hover:underline\">Read more…</span></a>\n```\n\nExample:\n```text\n@media (hover: hover) { a:hover span { text-decoration-line: underline; }}\n```\n\nExample:\n```text\n<div class=\"[&>[data-active]+span]:text-blue-600 ...\"> <span data-active><!-- ... --></span> <span>This text will be blue</span></div>\n```\n\nExample:\n```text\ndiv > [data-active] + span { color: var(--color-blue-600);}\n```\n\nExample:\n```text\nexport function BrandedButton({ buttonColor, textColor, children }) { return ( <button style={{ backgroundColor: buttonColor, color: textColor, }} className=\"rounded-md px-3 py-1.5 font-medium\" > {children} </button> );}\n```\n\nExample:\n```text\n<div class=\"grid-[2fr_max(0,var(--gutter-width))_calc(var(--gutter-width)+10px)]\"><div style=\"grid-template-columns: 2fr max(0, var(--gutter-width)) calc(var(--gutter-width) + 10px)\"> <!-- ... --></div>\n```\n\nExample:\n```text\nexport function BrandedButton({ buttonColor, buttonColorHover, textColor, children }) { return ( <button style={{ \"--bg-color\": buttonColor, \"--bg-color-hover\": buttonColorHover, \"--text-color\": textColor, }} className=\"bg-(--bg-color) text-(--text-color) hover:bg-(--bg-color-hover) ...\" > {children} </button> );}\n```\n\nExample:\n```text\n<div> <div class=\"flex items-center space-x-2 text-base\"> <h4 class=\"font-semibold text-slate-900\">Contributors</h4> <span class=\"bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700 ...\">204</span> </div> <div class=\"mt-3 flex -space-x-2 overflow-hidden\"> <img class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white\" src=\"https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\" alt=\"\" /> <img class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white\" src=\"https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\" alt=\"\" /> <img class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white\" src=\"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80\" alt=\"\" /> <img class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white\" src=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\" alt=\"\" /> <img class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white\" src=\"https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\" alt=\"\" /> </div> <div class=\"mt-3 text-sm font-medium\"> <a href=\"#\" class=\"text-blue-500\">+ 198 others</a> </div></div>\n```\n\nExample:\n```text\n<div> <div class=\"flex items-center space-x-2 text-base\"> <h4 class=\"font-semibold text-slate-900\">Contributors</h4> <span class=\"bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700 ...\">204</span> </div> <div class=\"mt-3 flex -space-x-2 overflow-hidden\"> {#each contributors as user} <img class=\"inline-block h-12 w-12 rounded-full ring-2 ring-white\" src={user.avatarUrl} alt={user.handle} /> {/each} </div> <div class=\"mt-3 text-sm font-medium\"> <a href=\"#\" class=\"text-blue-500\">+ 198 others</a> </div></div>\n```\n\nExample:\n```text\n<nav class=\"flex justify-center space-x-4\"> <a href=\"/dashboard\" class=\"font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900\"> Home </a> <a href=\"/team\" class=\"font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900\"> Team </a> <a href=\"/projects\" class=\"font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900\"> Projects </a> <a href=\"/reports\" class=\"font-medium rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900\"> Reports </a></nav>\n```\n\nExample:\n```text\nexport function VacationCard({ img, imgAlt, eyebrow, title, pricing, url }) { return ( <div> <img className=\"rounded-lg\" src={img} alt={imgAlt} /> <div className=\"mt-4\"> <div className=\"text-xs font-bold text-sky-500\">{eyebrow}</div> <div className=\"mt-1 font-bold text-gray-700\"> <a href={url} className=\"hover:underline\"> {title} </a> </div> <div className=\"mt-2 text-sm text-gray-600\">{pricing}</div> </div> </div> );}\n```\n\nExample:\n```text\n<button class=\"btn-primary\">Save changes</button>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@layer components { .btn-primary { border-radius: calc(infinity * 1px); background-color: var(--color-violet-500); padding-inline: --spacing(5); padding-block: --spacing(2); font-weight: var(--font-weight-semibold); color: var(--color-white); box-shadow: var(--shadow-md); &:hover { @media (hover: hover) { background-color: var(--color-violet-700); } } }}\n```\n\nExample:\n```text\n<div class=\"grid flex\"> <!-- ... --></div>\n```\n\nExample:\n```text\n.flex { display: flex;}.grid { display: grid;}\n```\n\nExample:\n```text\nexport function Example({ gridLayout }) { return <div className={gridLayout ? \"grid\" : \"flex\"}>{/* ... */}</div>;}\n```\n\nExample:\n```text\n<div class=\"bg-teal-500 bg-red-500!\"> <!-- ... --></div>\n```\n\nExample:\n```text\n.bg-red-500\\! { background-color: var(--color-red-500) !important;}.bg-teal-500 { background-color: var(--color-teal-500);}\n```\n\nExample:\n```text\n@import \"tailwindcss\" important;\n```\n\nExample:\n```text\n@layer utilities { .flex { display: flex !important; } .gap-4 { gap: 1rem !important; } .underline { text-decoration-line: underline !important; }}\n```\n\nExample:\n```text\n@import \"tailwindcss\" prefix(tw);\n```\n\nExample:\n```text\n@layer theme { :root { --tw-color-red-500: oklch(0.637 0.237 25.331); }}@layer utilities { .tw\\:text-red-500 { color: var(--tw-color-red-500); }}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":41,"totalLines":206,"estimatedTokens":2517}}17{"id":"doc-box_decoration_break_layout_tailwind_css-2a2b0842","source":"documentation","title":"box-decoration-break - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/box-decoration-break","text":"Example:\n```text\n<span class=\"box-decoration-slice bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...\"> Hello<br />World</span><span class=\"box-decoration-clone bg-linear-to-r from-indigo-600 to-pink-500 px-2 text-white ...\"> Hello<br />World</span>\n```\n\nExample:\n```text\n<div class=\"box-decoration-clone md:box-decoration-slice ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.140Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":97}}18{"id":"doc-colors_core_concepts_tailwind_css-656f34b1","source":"documentation","title":"Colors - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/colors","text":"Example:\n```text\n<div> <div class=\"bg-sky-50\"></div> <div class=\"bg-sky-100\"></div> <div class=\"bg-sky-200\"></div> <div class=\"bg-sky-300\"></div> <div class=\"bg-sky-400\"></div> <div class=\"bg-sky-500\"></div> <div class=\"bg-sky-600\"></div> <div class=\"bg-sky-700\"></div> <div class=\"bg-sky-800\"></div> <div class=\"bg-sky-900\"></div> <div class=\"bg-sky-950\"></div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-center gap-4 rounded-lg bg-white p-6 shadow-md outline outline-black/5 dark:bg-gray-800\"> <span class=\"inline-flex shrink-0 rounded-full border border-pink-300 bg-pink-100 p-2 dark:border-pink-300/10 dark:bg-pink-400/10\"> <svg class=\"size-6 stroke-pink-700 dark:stroke-pink-500\"><!-- ... --></svg> </span> <div> <p class=\"text-gray-700 dark:text-gray-400\"> <span class=\"font-medium text-gray-950 dark:text-white\">Tom Watson</span> mentioned you in <span class=\"font-medium text-gray-950 dark:text-white\">Logo redesign</span> </p> <time class=\"mt-1 block text-gray-500\" datetime=\"9:37\">9:37am</time> </div></div>\n```\n\nExample:\n```text\n<div> <div class=\"bg-sky-500/10\"></div> <div class=\"bg-sky-500/20\"></div> <div class=\"bg-sky-500/30\"></div> <div class=\"bg-sky-500/40\"></div> <div class=\"bg-sky-500/50\"></div> <div class=\"bg-sky-500/60\"></div> <div class=\"bg-sky-500/70\"></div> <div class=\"bg-sky-500/80\"></div> <div class=\"bg-sky-500/90\"></div> <div class=\"bg-sky-500/100\"></div></div>\n```\n\nExample:\n```text\n<div class=\"bg-pink-500/[71.37%]\"><!-- ... --></div><div class=\"bg-cyan-400/(--my-alpha-value)\"><!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5\"> <div> <span class=\"inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg\"> <svg class=\"h-6 w-6 stroke-white\" ...> <!-- ... --> </svg> </span> </div> <h3 class=\"text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight \">Writes upside-down</h3> <p class=\"text-gray-500 dark:text-gray-400 mt-2 text-sm \"> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@layer components { .typography { color: var(--color-gray-950); a { color: var(--color-blue-500); &:hover { color: var(--color-blue-800); } } }}\n```\n\nExample:\n```text\n<div class=\"bg-[light-dark(var(--color-white),var(--color-gray-950))]\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@layer components { .DocSearch-Hit--Result { background-color: --alpha(var(--color-gray-950) / 10%); }}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --color-gray-50: oklch(0.984 0.003 247.858); --color-gray-100: oklch(0.968 0.007 247.896); --color-gray-200: oklch(0.929 0.013 255.508); --color-gray-300: oklch(0.869 0.022 252.894); --color-gray-400: oklch(0.704 0.04 256.788); --color-gray-500: oklch(0.554 0.046 257.417); --color-gray-600: oklch(0.446 0.043 257.281); --color-gray-700: oklch(0.372 0.044 257.287); --color-gray-800: oklch(0.279 0.041 260.031); --color-gray-900: oklch(0.208 0.042 265.755); --color-gray-950: oklch(0.129 0.042 264.695);}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --color-lime-*: initial; --color-fuchsia-*: initial;}\n```\n\nExample:\n```text\n@import \"tailwindcss\";@theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;}\n```\n\nExample:\n```text\n@import \"tailwindcss\";:root { --acme-canvas-color: oklch(0.967 0.003 264.542);}[data-theme=\"dark\"] { --acme-canvas-color: oklch(0.21 0.034 264.665);}@theme inline { --color-canvas: var(--acme-canvas-color);}\n```\n\nExample:\n```text\n@theme { --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68); --color-mauve-400: oklch(71.1% 0.019 323.02); --color-mauve-500: oklch(54.2% 0.034 322.5); --color-mauve-600: oklch(43.5% 0.029 321.78); --color-mauve-700: oklch(36.4% 0.029 323.89); --color-mauve-800: oklch(26.3% 0.024 320.12); --color-mauve-900: oklch(21.2% 0.019 322.12); --color-mauve-950: oklch(14.5% 0.008 326); --color-olive-50: oklch(98.8% 0.003 106.5); --color-olive-100: oklch(96.6% 0.005 106.5); --color-olive-200: oklch(93% 0.007 106.5); --color-olive-300: oklch(88% 0.011 106.6); --color-olive-400: oklch(73.7% 0.021 106.9); --color-olive-500: oklch(58% 0.031 107.3); --color-olive-600: oklch(46.6% 0.025 107.3); --color-olive-700: oklch(39.4% 0.023 107.4); --color-olive-800: oklch(28.6% 0.016 107.4); --color-olive-900: oklch(22.8% 0.013 107.4); --color-olive-950: oklch(15.3% 0.006 107.1); --color-mist-50: oklch(98.7% 0.002 197.1); --color-mist-100: oklch(96.3% 0.002 197.1); --color-mist-200: oklch(92.5% 0.005 214.3); --color-mist-300: oklch(87.2% 0.007 219.6); --color-mist-400: oklch(72.3% 0.014 214.4); --color-mist-500: oklch(56% 0.021 213.5); --color-mist-600: oklch(45% 0.017 213.2); --color-mist-700: oklch(37.8% 0.015 216); --color-mist-800: oklch(27.5% 0.011 216.9); --color-mist-900: oklch(21.8% 0.008 223.9); --color-mist-950: oklch(14.8% 0.004 228.8); --color-taupe-50: oklch(98.6% 0.002 67.8); --color-taupe-100: oklch(96% 0.002 17.2); --color-taupe-200: oklch(92.2% 0.005 34.3); --color-taupe-300: oklch(86.8% 0.007 39.5); --color-taupe-400: oklch(71.4% 0.014 41.2); --color-taupe-500: oklch(54.7% 0.021 43.1); --color-taupe-600: oklch(43.8% 0.017 39.3); --color-taupe-700: oklch(36.7% 0.016 35.7); --color-taupe-800: oklch(26.8% 0.011 36.5); --color-taupe-900: oklch(21.4% 0.009 43.1); --color-taupe-950: oklch(14.7% 0.004 49.3); --color-black: #000; --color-white: #fff;}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.141Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":14,"totalLines":71,"estimatedTokens":4328}}19{"id":"doc-hover_focus_and_other_states_core_concepts_tailw-3acc8d24","source":"documentation","title":"Hover, focus, and other states - Core concepts - Tailwind CSS","url":"https://tailwindcss.com/docs/hover-focus-and-other-states","text":"Example:\n```text\n<button class=\"bg-sky-500 hover:bg-sky-700 ...\">Save changes</button>\n```\n\nExample:\n```text\n.btn-primary { background-color: #0ea5e9;}.btn-primary:hover { background-color: #0369a1;}\n```\n\nExample:\n```text\n.bg-sky-500 { background-color: #0ea5e9;}.hover\\:bg-sky-700:hover { background-color: #0369a1;}\n```\n\nExample:\n```text\n<button class=\"dark:md:hover:bg-fuchsia-600 ...\">Save changes</button>\n```\n\nExample:\n```text\n<button class=\"bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700 ...\"> Save changes</button>\n```\n\nExample:\n```text\n<ul role=\"list\"> {#each people as person} <!-- Remove top/bottom padding when first/last child --> <li class=\"flex py-4 first:pt-0 last:pb-0\"> <img class=\"h-10 w-10 rounded-full\" src={person.imageUrl} alt=\"\" /> <div class=\"ml-3 overflow-hidden\"> <p class=\"text-sm font-medium text-gray-900 dark:text-white\">{person.name}</p> <p class=\"truncate text-sm text-gray-500 dark:text-gray-400\">{person.email}</p> </div> </li> {/each}</ul>\n```\n\nExample:\n```text\n<table> <!-- ... --> <tbody> {#each people as person} <!-- Use different background colors for odd and even rows --> <tr class=\"odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950\"> <td>{person.name}</td> <td>{person.title}</td> <td>{person.email}</td> </tr> {/each} </tbody></table>\n```\n\nExample:\n```text\n<div class=\"nth-3:underline\"> <!-- ... --></div><div class=\"nth-last-5:underline\"> <!-- ... --></div><div class=\"nth-of-type-4:underline\"> <!-- ... --></div><div class=\"nth-last-of-type-6:underline\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<input type=\"text\" value=\"tbone\" disabled class=\"invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20 ...\"/>\n```\n\nExample:\n```text\n<label class=\"has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900 ...\"> <svg fill=\"currentColor\"> <!-- ... --> </svg> Google Pay <input type=\"radio\" class=\"checked:border-indigo-500 ...\" /></label>\n```\n\nExample:\n```text\n<div class=\"group ...\"> <img src=\"...\" /> <h4>Spencer Sharp</h4> <svg class=\"hidden group-has-[a]:block ...\"><!-- ... --></svg> <p>Product Designer at <a href=\"...\">planeteria.tech</a></p></div>\n```\n\nExample:\n```text\n<div> <label class=\"peer ...\"> <input type=\"checkbox\" name=\"todo[1]\" checked /> Create a to do list </label> <svg class=\"peer-has-checked:hidden ...\"><!-- ... --></svg></div>\n```\n\nExample:\n```text\n<button class=\"bg-indigo-600 hover:not-focus:bg-indigo-700\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<div class=\"not-supports-[display:grid]:flex\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<a href=\"#\" class=\"group ...\"> <div> <svg class=\"stroke-sky-500 group-hover:stroke-white ...\" fill=\"none\" viewBox=\"0 0 24 24\"> <!-- ... --> </svg> <h3 class=\"text-gray-900 group-hover:text-white ...\">New project</h3> </div> <p class=\"text-gray-500 group-hover:text-white ...\">Create a new project from a variety of starting templates.</p></a>\n```\n\nExample:\n```text\n<ul role=\"list\"> {#each people as person} <li class=\"group/item ...\"> <!-- ... --> <a class=\"group/edit invisible group-hover/item:visible ...\" href=\"tel:{person.phone}\"> <span class=\"group-hover/edit:text-gray-700 ...\">Call</span> <svg class=\"group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500 ...\"><!-- ... --></svg> </a> </li> {/each}</ul>\n```\n\nExample:\n```text\n<div class=\"group is-published\"> <div class=\"hidden group-[.is-published]:block\"> Published </div></div>\n```\n\nExample:\n```text\n<div class=\"group\"> <div class=\"group-[:nth-of-type(3)_&]:block\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div tabindex=\"0\" class=\"group\"> <div class=\"opacity-50 group-focus:opacity-100\"><div tabindex=\"0\"> <div class=\"opacity-50 in-focus:opacity-100\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<form> <label class=\"block\"> <span class=\"...\">Email</span> <input type=\"email\" class=\"peer ...\" /> <p class=\"invisible peer-invalid:visible ...\">Please provide a valid email address.</p> </label></form>\n```\n\nExample:\n```text\n<label> <span class=\"peer-invalid:text-red-500 ...\">Email</span> <input type=\"email\" class=\"peer ...\" /></label>\n```\n\nExample:\n```text\n<fieldset> <legend>Published status</legend> <input id=\"draft\" class=\"peer/draft\" type=\"radio\" name=\"status\" checked /> <label for=\"draft\" class=\"peer-checked/draft:text-sky-500\">Draft</label> <input id=\"published\" class=\"peer/published\" type=\"radio\" name=\"status\" /> <label for=\"published\" class=\"peer-checked/published:text-sky-500\">Published</label> <div class=\"hidden peer-checked/draft:block\">Drafts are only visible to administrators.</div> <div class=\"hidden peer-checked/published:block\">Your post will be publicly visible on your site.</div></fieldset>\n```\n\nExample:\n```text\n<form> <label for=\"email\">Email:</label> <input id=\"email\" name=\"email\" type=\"email\" class=\"is-dirty peer\" required /> <div class=\"peer-[.is-dirty]:peer-required:block hidden\">This field is required.</div> <!-- ... --></form>\n```\n\nExample:\n```text\n<div> <input type=\"text\" class=\"peer\" /> <div class=\"hidden peer-[:nth-of-type(3)_&]:block\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<label> <span class=\"text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] ...\">Email</span> <input type=\"email\" name=\"email\" class=\"...\" placeholder=\"you@example.com\" /></label>\n```\n\nExample:\n```text\n<blockquote class=\"text-center text-2xl font-semibold text-gray-900 italic dark:text-white\"> When you look <span class=\"relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500\"> <span class=\"relative text-white dark:text-gray-950\">annoyed</span> </span> all the time, people think that you're busy.</blockquote>\n```\n\nExample:\n```text\n<blockquote class=\"text-center text-2xl font-semibold text-gray-900 italic\"> When you look <span class=\"relative\"> <span class=\"absolute -inset-1 block -skew-y-3 bg-pink-500\" aria-hidden=\"true\"></span> <span class=\"relative text-white\">annoyed</span> </span> all the time, people think that you're busy.</blockquote>\n```\n\nExample:\n```text\n<input class=\"placeholder:text-gray-500 placeholder:italic ...\" placeholder=\"Search for anything...\" type=\"text\" name=\"search\"/>\n```\n\nExample:\n```text\n<input type=\"file\" class=\"file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-violet-600 dark:file:text-violet-100 dark:hover:file:bg-violet-500 ...\"/>\n```\n\nExample:\n```text\n<ul role=\"list\" class=\"list-disc marker:text-sky-400 ...\"> <li>5 cups chopped Porcini mushrooms</li> <li>1/2 cup of olive oil</li> <li>3lb of celery</li></ul>\n```\n\nExample:\n```text\n<div class=\"selection:bg-fuchsia-300 selection:text-fuchsia-900\"> <p> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p></div>\n```\n\nExample:\n```text\n<html> <head> <!-- ... --> </head> <body class=\"selection:bg-pink-300\"> <!-- ... --> </body></html>\n```\n\nExample:\n```text\n<div class=\"text-gray-700\"> <p class=\"first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase\" > Well, let me tell you something, funny boy. Y'know that little stamp, the one that says \"New York Public Library\"? </p> <p class=\"mt-6\">Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.</p></div>\n```\n\nExample:\n```text\n<dialog class=\"backdrop:bg-gray-50\"> <form method=\"dialog\"> <!-- ... --> </form></dialog>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"@container\"> <div class=\"flex flex-col @md:flex-row\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"bg-white dark:bg-gray-900 ...\"> <!-- ... --> <h3 class=\"text-gray-900 dark:text-white ...\">Writes upside-down</h3> <p class=\"text-gray-500 dark:text-gray-400 ...\"> The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space. </p></div>\n```\n\nExample:\n```text\n<button type=\"button\" class=\"bg-indigo-500 ...\" disabled> <svg class=\"animate-spin motion-reduce:hidden ...\" viewBox=\"0 0 24 24\"><!-- ... --></svg> Processing...</button>\n```\n\nExample:\n```text\n<!-- Using `motion-reduce` can mean lots of \"undoing\" styles --><button class=\"transition hover:-translate-y-0.5 motion-reduce:transition-none motion-reduce:hover:translate-y-0 ...\"> Save changes</button><!-- Using `motion-safe` is less code in these situations --><button class=\"motion-safe:transition motion-safe:hover:-translate-x-0.5 ...\">Save changes</button>\n```\n\nExample:\n```text\n<label class=\"block\"> <span class=\"block text-sm font-medium text-gray-700\">Social Security Number</span> <input class=\"border-gray-200 placeholder-gray-400 contrast-more:border-gray-400 contrast-more:placeholder-gray-500 ...\" /> <p class=\"text-gray-600 opacity-10 contrast-more:opacity-100 ...\">We need this to steal your identity.</p></label>\n```\n\nExample:\n```text\n<label> <input type=\"radio\" class=\"appearance-none forced-colors:appearance-auto\" /> <p class=\"hidden forced-colors:block\">Cyan</p> <div class=\"bg-cyan-200 forced-colors:hidden ...\"></div> <div class=\"bg-cyan-500 forced-colors:hidden ...\"></div></label>\n```\n\nExample:\n```text\n<div class=\"not-forced-colors:appearance-none ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"shadow-xl inverted-colors:shadow-none ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<fieldset aria-label=\"Choose a memory option\"> <div class=\"flex items-center justify-between\"> <div>RAM</div> <a href=\"#\"> See performance specs </a> </div> <div class=\"mt-4 grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4\"> <label class=\"p-2 pointer-coarse:p-4 ...\"> <input type=\"radio\" name=\"memory-option\" value=\"4 GB\" className=\"sr-only\" /> <span>4 GB</span> </label> <!-- ... --> </div></fieldset>\n```\n\nExample:\n```text\n<div> <div class=\"portrait:hidden\"> <!-- ... --> </div> <div class=\"landscape:hidden\"> <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p> </div></div>\n```\n\nExample:\n```text\n<div class=\"hidden noscript:block\"> <p>This experience requires JavaScript to function. Please enable JavaScript in your browser settings.</p></div>\n```\n\nExample:\n```text\n<div> <article class=\"print:hidden\"> <h1>My Secret Pizza Recipe</h1> <p>This recipe is a secret, and must not be shared with anyone</p> <!-- ... --> </article> <div class=\"hidden print:block\">Are you seriously trying to print this? It's secret!</div></div>\n```\n\nExample:\n```text\n<div class=\"flex supports-[display:grid]:grid ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-black/75 supports-backdrop-filter:bg-black/25 supports-backdrop-filter:backdrop-blur ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@custom-variant supports-grid { @supports (display: grid) { @slot; }}\n```\n\nExample:\n```text\n<div class=\"supports-grid:grid\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div> <button popovertarget=\"my-popover\">Check for updates</button> <div popover id=\"my-popover\" class=\"opacity-0 starting:open:opacity-0 ...\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div aria-checked=\"true\" class=\"bg-gray-600 aria-checked:bg-sky-700\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@custom-variant aria-asc (&[aria-sort=\"ascending\"]);@custom-variant aria-desc (&[aria-sort=\"descending\"]);\n```\n\nExample:\n```text\n<table> <thead> <tr> <th aria-sort=\"ascending\" class=\"aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]\" > Invoice # </th> <!-- ... --> </tr> </thead> <!-- ... --></table>\n```\n\nExample:\n```text\n<table> <thead> <tr> <th aria-sort=\"ascending\" class=\"group\"> Invoice # <svg class=\"group-aria-[sort=ascending]:rotate-0 group-aria-[sort=descending]:rotate-180\"><!-- ... --></svg> </th> <!-- ... --> </tr> </thead> <!-- ... --></table>\n```\n\nExample:\n```text\n<!-- Will apply --><div data-active class=\"border border-gray-300 data-active:border-purple-500\"> <!-- ... --></div><!-- Will not apply --><div class=\"border border-gray-300 data-active:border-purple-500\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<!-- Will apply --><div data-size=\"large\" class=\"data-[size=large]:p-8\"> <!-- ... --></div><!-- Will not apply --><div data-size=\"medium\" class=\"data-[size=large]:p-8\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@import \"tailwindcss\";@custom-variant data-checked (&[data-ui~=\"checked\"]);\n```\n\nExample:\n```text\n<div data-ui=\"checked active\" class=\"data-checked:underline\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"group flex items-center\"> <img class=\"h-12 w-12 shrink-0 rounded-full\" src=\"...\" alt=\"\" /> <div class=\"ltr:ml-3 rtl:mr-3\"> <p class=\"text-gray-700 group-hover:text-gray-900 ...\">...</p> <p class=\"text-gray-500 group-hover:text-gray-700 ...\">...</p> </div></div>\n```\n\nExample:\n```text\n<details class=\"border border-transparent open:border-black/10 open:bg-gray-100 ...\" open> <summary class=\"text-sm leading-6 font-semibold text-gray-900 select-none\">Why do they call it Ovaltine?</summary> <div class=\"mt-3 text-sm leading-6 text-gray-600\"> <p>The mug is round. The jar is round. They should call it Roundtine.</p> </div></details>\n```\n\nExample:\n```text\n<div> <button popovertarget=\"my-popover\">Open Popover</button> <div popover id=\"my-popover\" class=\"opacity-0 open:opacity-100 ...\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<form> <legend>Notification preferences</legend> <fieldset> <input type=\"radio\" /> <label> Custom </label> <fieldset inert class=\"inert:opacity-50\"> <!-- ... --> </fieldset> <input type=\"radio\" /> <label> Everything </label> </fieldset></form>\n```\n\nExample:\n```text\n<div> <h2>Categories<h2> <ul class=\"*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...\"> <li>Sales</li> <li>Marketing</li> <li>SEO</li> <!-- ... --> </ul></div>\n```\n\nExample:\n```text\n<ul class=\"*:bg-sky-50 ...\"> <li class=\"bg-red-50 ...\">Sales</li> <li>Marketing</li> <li>SEO</li> <!-- ... --></ul>\n```\n\nExample:\n```text\n<ul class=\"**:data-avatar:size-12 **:data-avatar:rounded-full ...\"> {#each items as item} <li> <img src={item.src} data-avatar /> <p>{item.name}</p> </li> {/each}</ul>\n```\n\nExample:\n```text\n<ul role=\"list\"> {#each items as item} <li class=\"[&.is-dragging]:cursor-grabbing\">{item}</li> {/each}</ul>\n```\n\nExample:\n```text\n<ul role=\"list\"> {#each items as item} <li class=\"[&.is-dragging]:active:cursor-grabbing\">{item}</li> {/each}</ul>\n```\n\nExample:\n```text\n<div class=\"[&_p]:mt-4\"> <p>Lorem ipsum...</p> <ul> <li> <p>Lorem ipsum...</p> </li> <!-- ... --> </ul></div>\n```\n\nExample:\n```text\n<div class=\"flex [@supports(display:grid)]:grid\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@custom-variant theme-midnight (&:where([data-theme=\"midnight\"] *));\n```\n\nExample:\n```text\n<html data-theme=\"midnight\"> <button class=\"theme-midnight:bg-black ...\"></button></html>\n```\n\nExample:\n```text\n<div class=\"bg-black hover:bg-white ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<input class=\"border-gray-300 focus:border-blue-400 ...\" />\n```\n\nExample:\n```text\n<div class=\"focus-within:shadow-lg ...\"> <input type=\"text\" /></div>\n```\n\nExample:\n```text\n<button class=\"focus-visible:outline-2 ...\">Submit</button>\n```\n\nExample:\n```text\n<button class=\"bg-blue-500 active:bg-blue-600 ...\">Submit</button>\n```\n\nExample:\n```text\n<a href=\"https://seinfeldquotes.com\" class=\"text-blue-600 visited:text-purple-600 ...\"> Inspiration </a>\n```\n\nExample:\n```text\n<div id=\"about\" class=\"target:shadow-lg ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<ul> {#each people as person} <li class=\"py-4 first:pt-0 ...\"> <!-- ... --> </li> {/each}</ul>\n```\n\nExample:\n```text\n<ul> {#each people as person} <li class=\"py-4 last:pb-0 ...\"> <!-- ... --> </li> {/each}</ul>\n```\n\nExample:\n```text\n<ul> {#each people as person} <li class=\"py-4 only:py-0 ...\"> <!-- ... --> </li> {/each}</ul>\n```\n\nExample:\n```text\n<table> {#each people as person} <tr class=\"bg-white odd:bg-gray-100 ...\"> <!-- ... --> </tr> {/each}</table>\n```\n\nExample:\n```text\n<table> {#each people as person} <tr class=\"bg-white even:bg-gray-100 ...\"> <!-- ... --> </tr> {/each}</table>\n```\n\nExample:\n```text\n<nav> <img src=\"/logo.svg\" alt=\"Vandelay Industries\" /> {#each links as link} <a href=\"#\" class=\"ml-2 first-of-type:ml-6 ...\"> <!-- ... --> </a> {/each}</nav>\n```\n\nExample:\n```text\n<nav> <img src=\"/logo.svg\" alt=\"Vandelay Industries\" /> {#each links as link} <a href=\"#\" class=\"mr-2 last-of-type:mr-6 ...\"> <!-- ... --> </a> {/each} <button>More</button></nav>\n```\n\nExample:\n```text\n<nav> <img src=\"/logo.svg\" alt=\"Vandelay Industries\" /> {#each links as link} <a href=\"#\" class=\"mx-2 only-of-type:mx-6 ...\"> <!-- ... --> </a> {/each} <button>More</button></nav>\n```\n\nExample:\n```text\n<nav> <img src=\"/logo.svg\" alt=\"Vandelay Industries\" /> {#each links as link} <a href=\"#\" class=\"mx-2 nth-3:mx-6 nth-[3n+1]:mx-7 ...\"> <!-- ... --> </a> {/each} <button>More</button></nav>\n```\n\nExample:\n```text\n<nav> <img src=\"/logo.svg\" alt=\"Vandelay Industries\" /> {#each links as link} <a href=\"#\" class=\"mx-2 nth-last-3:mx-6 nth-last-[3n+1]:mx-7 ...\"> <!-- ... --> </a> {/each} <button>More</button></nav>\n```\n\nExample:\n```text\n<nav> <img src=\"/logo.svg\" alt=\"Vandelay Industries\" /> {#each links as link} <a href=\"#\" class=\"mx-2 nth-of-type-3:mx-6 nth-of-type-[3n+1]:mx-7 ...\"> <!-- ... --> </a> {/each} <button>More</button></nav>\n```\n\nExample:\n```text\n<nav> <img src=\"/logo.svg\" alt=\"Vandelay Industries\" /> {#each links as link} <a href=\"#\" class=\"mx-2 nth-last-of-type-3:mx-6 nth-last-of-type-[3n+1]:mx-7 ...\"> <!-- ... --> </a> {/each} <button>More</button></nav>\n```\n\nExample:\n```text\n<ul> {#each people as person} <li class=\"empty:hidden ...\">{person.hobby}</li> {/each}</ul>\n```\n\nExample:\n```text\n<input class=\"disabled:opacity-75 ...\" />\n```\n\nExample:\n```text\n<input class=\"enabled:hover:border-gray-400 disabled:opacity-75 ...\" />\n```\n\nExample:\n```text\n<input type=\"checkbox\" class=\"appearance-none checked:bg-blue-500 ...\" />\n```\n\nExample:\n```text\n<input type=\"checkbox\" class=\"appearance-none indeterminate:bg-gray-300 ...\" />\n```\n\nExample:\n```text\n<input type=\"checkbox\" class=\"default:outline-2 ...\" />\n```\n\nExample:\n```text\n<input class=\"border optional:border-red-500 ...\" />\n```\n\nExample:\n```text\n<input required class=\"border required:border-red-500 ...\" />\n```\n\nExample:\n```text\n<input required class=\"border valid:border-green-500 ...\" />\n```\n\nExample:\n```text\n<input required class=\"border invalid:border-red-500 ...\" />\n```\n\nExample:\n```text\n<input required class=\"border user-valid:border-green-500\" />\n```\n\nExample:\n```text\n<input required class=\"border user-invalid:border-red-500\" />\n```\n\nExample:\n```text\n<input min=\"1\" max=\"5\" class=\"in-range:border-green-500 ...\" />\n```\n\nExample:\n```text\n<input min=\"1\" max=\"5\" class=\"out-of-range:border-red-500 ...\" />\n```\n\nExample:\n```text\n<input class=\"placeholder-shown:border-gray-500 ...\" placeholder=\"you@example.com\" />\n```\n\nExample:\n```text\n<details class=\"details-content:bg-gray-100 ...\"> <summary>Details</summary> This is a secret.</details>\n```\n\nExample:\n```text\n<input class=\"autofill:bg-yellow-200 ...\" />\n```\n\nExample:\n```text\n<input class=\"read-only:bg-gray-100 ...\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.144Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":110,"totalLines":551,"estimatedTokens":5187}}20{"id":"doc-break_after_layout_tailwind_css-e377d4c8","source":"documentation","title":"break-after - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/break-after","text":"Example:\n```text\n<div class=\"columns-2\"> <p>Well, let me tell you something, ...</p> <p class=\"break-after-column\">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p></div>\n```\n\nExample:\n```text\n<div class=\"break-after-column md:break-after-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.144Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":86}}21{"id":"doc-break_inside_layout_tailwind_css-44df9757","source":"documentation","title":"break-inside - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/break-inside","text":"Example:\n```text\n<div class=\"columns-2\"> <p>Well, let me tell you something, ...</p> <p class=\"break-inside-avoid-column\">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p></div>\n```\n\nExample:\n```text\n<div class=\"break-inside-avoid-column md:break-inside-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.144Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":90}}22{"id":"doc-box_sizing_layout_tailwind_css-a34fd3ad","source":"documentation","title":"box-sizing - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/box-sizing","text":"Example:\n```text\n<div class=\"box-border size-32 border-4 p-4 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"box-content size-32 border-4 p-4 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"box-content md:box-border ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.144Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":71}}23{"id":"doc-break_before_layout_tailwind_css-f9062222","source":"documentation","title":"break-before - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/break-before","text":"Example:\n```text\n<div class=\"columns-2\"> <p>Well, let me tell you something, ...</p> <p class=\"break-before-column\">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p></div>\n```\n\nExample:\n```text\n<div class=\"break-before-column md:break-before-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.144Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":87}}24{"id":"doc-float_layout_tailwind_css-bed52d3c","source":"documentation","title":"float - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/float","text":"Example:\n```text\n<article> <img class=\"float-right ...\" src=\"/img/mountains.jpg\" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>\n```\n\nExample:\n```text\n<article> <img class=\"float-left ...\" src=\"/img/mountains.jpg\" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>\n```\n\nExample:\n```text\n<article> <img class=\"float-start ...\" src=\"/img/mountains.jpg\" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article><article dir=\"rtl\"> <img class=\"float-start ...\" src=\"/img/mountains.jpg\" /> <p>... ربما يمكننا العيش بدون مكتبات، أشخاص مثلي ومثلك. ربما. بالتأكيد</p></article>\n```\n\nExample:\n```text\n<article> <img class=\"float-none ...\" src=\"/img/mountains.jpg\" /> <p>Maybe we can live without libraries, people like you and me. ...</p></article>\n```\n\nExample:\n```text\n<img class=\"float-right md:float-left\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.145Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":239}}25{"id":"doc-isolation_layout_tailwind_css-7738926a","source":"documentation","title":"isolation - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/isolation","text":"Example:\n```text\n<div class=\"isolate ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"isolate md:isolation-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.145Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":42}}26{"id":"doc-object_fit_layout_tailwind_css-0ecea756","source":"documentation","title":"object-fit - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/object-fit","text":"Example:\n```text\n<img class=\"h-48 w-96 object-cover ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"h-48 w-96 object-contain ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"h-48 w-96 object-fill ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"h-48 w-96 object-scale-down ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"h-48 w-96 object-none ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"object-contain md:object-cover\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.145Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":141}}27{"id":"doc-object_position_layout_tailwind_css-8c752883","source":"documentation","title":"object-position - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/object-position","text":"Example:\n```text\n<img class=\"size-24 object-top-left ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-top ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-top-right ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-left ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-center ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-right ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-bottom-left ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-bottom ...\" src=\"/img/mountains.jpg\" /><img class=\"size-24 object-bottom-right ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"object-[25%_75%] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"object-(--my-object) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"object-center md:object-top ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.145Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":227}}28{"id":"doc-overscroll_behavior_layout_tailwind_css-06da1839","source":"documentation","title":"overscroll-behavior - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/overscroll-behavior","text":"Example:\n```text\n<div class=\"overscroll-contain ...\">Well, let me tell you something, ...</div>\n```\n\nExample:\n```text\n<div class=\"overscroll-none ...\">Well, let me tell you something, ...</div>\n```\n\nExample:\n```text\n<div class=\"overscroll-auto ...\">Well, let me tell you something, ...</div>\n```\n\nExample:\n```text\n<div class=\"overscroll-auto md:overscroll-contain ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.145Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":102}}29{"id":"doc-visibility_layout_tailwind_css-ae4e8094","source":"documentation","title":"visibility - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/visibility","text":"Example:\n```text\n<div class=\"grid grid-cols-3 gap-4\"> <div>01</div> <div class=\"invisible ...\">02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<table> <thead> <tr> <th>Invoice #</th> <th>Client</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>#100</td> <td>Pendant Publishing</td> <td>$2,000.00</td> </tr> <tr class=\"collapse\"> <td>#101</td> <td>Kruger Industrial Smoothing</td> <td>$545.00</td> </tr> <tr> <td>#102</td> <td>J. Peterman</td> <td>$10,000.25</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 gap-4\"> <div>01</div> <div class=\"visible ...\">02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"visible md:invisible ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.146Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":203}}30{"id":"doc-clear_layout_tailwind_css-d65dabe0","source":"documentation","title":"clear - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/clear","text":"Example:\n```text\n<article> <img class=\"float-left ...\" src=\"/img/snow-mountains.jpg\" /> <img class=\"float-right ...\" src=\"/img/green-mountains.jpg\" /> <p class=\"clear-left ...\">Maybe we can live without libraries...</p></article>\n```\n\nExample:\n```text\n<article> <img class=\"float-left ...\" src=\"/img/green-mountains.jpg\" /> <img class=\"float-right ...\" src=\"/img/snow-mountains.jpg\" /> <p class=\"clear-right ...\">Maybe we can live without libraries...</p></article>\n```\n\nExample:\n```text\n<article> <img class=\"float-left ...\" src=\"/img/snow-mountains.jpg\" /> <img class=\"float-right ...\" src=\"/img/green-mountains.jpg\" /> <p class=\"clear-both ...\">Maybe we can live without libraries...</p></article>\n```\n\nExample:\n```text\n<article dir=\"rtl\"> <img class=\"float-left ...\" src=\"/img/green-mountains.jpg\" /> <img class=\"float-right ...\" src=\"/img/green-mountains.jpg\" /> <p class=\"clear-end ...\">...ربما يمكننا العيش بدون مكتبات،</p></article>\n```\n\nExample:\n```text\n<article> <img class=\"float-left ...\" src=\"/img/green-mountains.jpg\" /> <img class=\"float-right ...\" src=\"/img/snow-mountains.jpg\" /> <p class=\"clear-none ...\">Maybe we can live without libraries...</p></article>\n```\n\nExample:\n```text\n<p class=\"clear-left md:clear-none ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.146Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":327}}31{"id":"doc-display_layout_tailwind_css-1bbcc758","source":"documentation","title":"display - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/display","text":"Example:\n```text\n<p> When controlling the flow of text, using the CSS property <span class=\"inline\">display: inline</span> will cause the text inside the element to wrap normally.</p><p> While using the property <span class=\"inline-block\">display: inline-block</span> will wrap the element to prevent the text inside from extending beyond its parent.</p><p> Lastly, using the property <span class=\"block\">display: block</span> will put the element on its own line and fill its parent.</p>\n```\n\nExample:\n```text\n<div class=\"p-4\"> <div class=\"flow-root ...\"> <div class=\"my-4 ...\">Well, let me tell you something, ...</div> </div> <div class=\"flow-root ...\"> <div class=\"my-4 ...\">Sure, go ahead, laugh if you want...</div> </div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-center\"> <img src=\"path/to/image.jpg\" /> <div> <strong>Andrew Alfred</strong> <span>Technical advisor</span> </div></div>\n```\n\nExample:\n```text\n<p> Today I spent most of the day researching ways to ... <span class=\"inline-flex items-baseline\"> <img src=\"/img/kramer.jpg\" class=\"mx-1 size-5 self-center rounded-full\" /> <span>Kramer</span> </span> keeps telling me there is no way to make it work, that ...</p>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 grid-rows-3 gap-4\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<span class=\"inline-grid grid-cols-3 gap-4\"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span><span class=\"inline-grid grid-cols-3 gap-4\"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"flex-1 ...\">01</div> <div class=\"contents\"> <div class=\"flex-1 ...\">02</div> <div class=\"flex-1 ...\">03</div> </div> <div class=\"flex-1 ...\">04</div></div>\n```\n\nExample:\n```text\n<div class=\"table w-full ...\"> <div class=\"table-header-group ...\"> <div class=\"table-row\"> <div class=\"table-cell text-left ...\">Song</div> <div class=\"table-cell text-left ...\">Artist</div> <div class=\"table-cell text-left ...\">Year</div> </div> </div> <div class=\"table-row-group\"> <div class=\"table-row\"> <div class=\"table-cell ...\">The Sliding Mr. Bones (Next Stop, Pottersville)</div> <div class=\"table-cell ...\">Malcolm Lockyer</div> <div class=\"table-cell ...\">1961</div> </div> <div class=\"table-row\"> <div class=\"table-cell ...\">Witchy Woman</div> <div class=\"table-cell ...\">The Eagles</div> <div class=\"table-cell ...\">1972</div> </div> <div class=\"table-row\"> <div class=\"table-cell ...\">Shining Star</div> <div class=\"table-cell ...\">Earth, Wind, and Fire</div> <div class=\"table-cell ...\">1975</div> </div> </div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"hidden ...\">01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<a href=\"#\"> <svg><!-- ... --></svg> <span class=\"sr-only\">Settings</span></a>\n```\n\nExample:\n```text\n<a href=\"#\"> <svg><!-- ... --></svg> <span class=\"sr-only sm:not-sr-only\">Settings</span></a>\n```\n\nExample:\n```text\n<div class=\"flex md:inline-flex ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.146Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":12,"totalLines":61,"estimatedTokens":812}}32{"id":"doc-position_layout_tailwind_css-2e806662","source":"documentation","title":"position - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/position","text":"Example:\n```text\n<div class=\"static ...\"> <p>Static parent</p> <div class=\"absolute bottom-0 left-0 ...\"> <p>Absolute child</p> </div></div>\n```\n\nExample:\n```text\n<div class=\"relative ...\"> <p>Relative parent</p> <div class=\"absolute bottom-0 left-0 ...\"> <p>Absolute child</p> </div></div>\n```\n\nExample:\n```text\n<div class=\"static ...\"> <!-- Static parent --> <div class=\"static ...\"><p>Static child</p></div> <div class=\"inline-block ...\"><p>Static sibling</p></div> <!-- Static parent --> <div class=\"absolute ...\"><p>Absolute child</p></div> <div class=\"inline-block ...\"><p>Static sibling</p></div></div>\n```\n\nExample:\n```text\n<div class=\"relative\"> <div class=\"fixed top-0 right-0 left-0\">Contacts</div> <div> <div> <img src=\"/img/andrew.jpg\" /> <strong>Andrew Alfred</strong> </div> <div> <img src=\"/img/debra.jpg\" /> <strong>Debra Houston</strong> </div> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div> <div> <div class=\"sticky top-0 ...\">A</div> <div> <div> <img src=\"/img/andrew.jpg\" /> <strong>Andrew Alfred</strong> </div> <div> <img src=\"/img/aisha.jpg\" /> <strong>Aisha Houston</strong> </div> <!-- ... --> </div> </div> <div> <div class=\"sticky top-0\">B</div> <div> <div> <img src=\"/img/bob.jpg\" /> <strong>Bob Alfred</strong> </div> <!-- ... --> </div> </div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"relative md:absolute ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.147Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":390}}33{"id":"doc-top_right_bottom_left_layout_tailwind_css-b9275e9d","source":"documentation","title":"top / right / bottom / left - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/top-right-bottom-left","text":"Example:\n```text\n<!-- Pin to top left corner --><div class=\"relative size-32 ...\"> <div class=\"absolute top-0 left-0 size-16 ...\">01</div></div><!-- Span top edge --><div class=\"relative size-32 ...\"> <div class=\"absolute inset-x-0 top-0 h-16 ...\">02</div></div><!-- Pin to top right corner --><div class=\"relative size-32 ...\"> <div class=\"absolute top-0 right-0 size-16 ...\">03</div></div><!-- Span left edge --><div class=\"relative size-32 ...\"> <div class=\"absolute inset-y-0 left-0 w-16 ...\">04</div></div><!-- Fill entire parent --><div class=\"relative size-32 ...\"> <div class=\"absolute inset-0 ...\">05</div></div><!-- Span right edge --><div class=\"relative size-32 ...\"> <div class=\"absolute inset-y-0 right-0 w-16 ...\">06</div></div><!-- Pin to bottom left corner --><div class=\"relative size-32 ...\"> <div class=\"absolute bottom-0 left-0 size-16 ...\">07</div></div><!-- Span bottom edge --><div class=\"relative size-32 ...\"> <div class=\"absolute inset-x-0 bottom-0 h-16 ...\">08</div></div><!-- Pin to bottom right corner --><div class=\"relative size-32 ...\"> <div class=\"absolute right-0 bottom-0 size-16 ...\">09</div></div>\n```\n\nExample:\n```text\n<div class=\"relative size-32 ...\"> <div class=\"absolute -top-4 -left-4 size-14 ...\"></div></div>\n```\n\nExample:\n```text\n<div dir=\"ltr\"> <div class=\"relative size-32 ...\"> <div class=\"absolute inset-s-0 top-0 size-14 ...\"></div> </div> <div> <div dir=\"rtl\"> <div class=\"relative size-32 ...\"> <div class=\"absolute inset-s-0 top-0 size-14 ...\"></div> </div> <div></div> </div> </div></div>\n```\n\nExample:\n```text\n<div class=\"inset-[3px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"inset-(--my-position) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"top-4 md:top-6 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.148Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":472}}34{"id":"doc-grid_auto_flow_flexbox_grid_tailwind_css-919f8a77","source":"documentation","title":"grid-auto-flow - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/grid-auto-flow","text":"Example:\n```text\n<div class=\"grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...\"> <div class=\"col-span-2\">01</div> <div class=\"col-span-2\">02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col md:grid-flow-row ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.148Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":79}}35{"id":"doc-overflow_layout_tailwind_css-09d71f17","source":"documentation","title":"overflow - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/overflow","text":"Example:\n```text\n<div class=\"overflow-visible ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"overflow-hidden ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"overflow-x-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-32 overflow-y-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"overflow-x-scroll ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"overflow-y-scroll ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"overflow-scroll ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"overflow-auto md:overflow-scroll ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.148Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":181}}36{"id":"doc-grid_template_rows_flexbox_grid_tailwind_css-104034d5","source":"documentation","title":"grid-template-rows - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/grid-template-rows","text":"Example:\n```text\n<div class=\"grid grid-flow-col grid-rows-4 gap-4\"> <div>01</div> <!-- ... --> <div>09</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col grid-rows-4 gap-4\"> <div>01</div> <!-- ... --> <div>05</div> <div class=\"row-span-3 grid grid-rows-subgrid gap-4\"> <div class=\"row-start-2\">06</div> </div> <div>07</div> <!-- ... --> <div>10</div></div>\n```\n\nExample:\n```text\n<div class=\"grid-rows-[200px_minmax(900px,1fr)_100px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid-rows-(--my-grid-rows) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-rows-2 md:grid-rows-6 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.148Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":171}}37{"id":"doc-flex_direction_flexbox_grid_tailwind_css-7f831698","source":"documentation","title":"flex-direction - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/flex-direction","text":"Example:\n```text\n<div class=\"flex flex-row ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-row-reverse ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-col ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-col-reverse ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-col md:flex-row ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":134}}38{"id":"doc-grid_row_flexbox_grid_tailwind_css-4429fb1d","source":"documentation","title":"grid-row - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/grid-row","text":"Example:\n```text\n<div class=\"grid grid-flow-col grid-rows-3 gap-4\"> <div class=\"row-span-3 ...\">01</div> <div class=\"col-span-2 ...\">02</div> <div class=\"col-span-2 row-span-2 ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col grid-rows-3 gap-4\"> <div class=\"row-span-2 row-start-2 ...\">01</div> <div class=\"row-span-2 row-end-3 ...\">02</div> <div class=\"row-start-1 row-end-4 ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"row-[span_16_/_span_16] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"row-(--my-rows) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"row-span-3 md:row-span-4 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":172}}39{"id":"doc-gap_flexbox_grid_tailwind_css-06459e43","source":"documentation","title":"gap - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/gap","text":"Example:\n```text\n<div class=\"grid grid-cols-2 gap-4\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 gap-x-8 gap-y-4\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"gap-[10vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"gap-(--my-gap) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid gap-4 md:gap-6 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":132}}40{"id":"doc-z_index_layout_tailwind_css-1c97cd9a","source":"documentation","title":"z-index - Layout - Tailwind CSS","url":"https://tailwindcss.com/docs/z-index","text":"Example:\n```text\n<div class=\"z-40 ...\">05</div><div class=\"z-30 ...\">04</div><div class=\"z-20 ...\">03</div><div class=\"z-10 ...\">02</div><div class=\"z-0 ...\">01</div>\n```\n\nExample:\n```text\n<div class=\"...\">05</div><div class=\"...\">04</div><div class=\"-z-10 ...\">03</div><div class=\"...\">02</div><div class=\"...\">01</div>\n```\n\nExample:\n```text\n<div class=\"z-[calc(var(--index)+1)] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"z-(--my-z) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"z-0 md:z-50 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":142}}41{"id":"doc-grid_template_columns_flexbox_grid_tailwind_css-84785aea","source":"documentation","title":"grid-template-columns - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/grid-template-columns","text":"Example:\n```text\n<div class=\"grid grid-cols-4 gap-4\"> <div>01</div> <!-- ... --> <div>09</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-4 gap-4\"> <div>01</div> <!-- ... --> <div>05</div> <div class=\"col-span-3 grid grid-cols-subgrid gap-4\"> <div class=\"col-start-2\">06</div> </div></div>\n```\n\nExample:\n```text\n<div class=\"grid-cols-[200px_minmax(900px,_1fr)_100px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid-cols-(--my-grid-cols) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-1 md:grid-cols-6 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.149Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":153}}42{"id":"doc-flex_wrap_flexbox_grid_tailwind_css-47de8524","source":"documentation","title":"flex-wrap - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/flex-wrap","text":"Example:\n```text\n<div class=\"flex flex-nowrap\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-wrap\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-wrap-reverse\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-wrap md:flex-wrap-reverse ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":106}}43{"id":"doc-flex_grow_flexbox_grid_tailwind_css-a48884ea","source":"documentation","title":"flex-grow - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/flex-grow","text":"Example:\n```text\n<div class=\"flex ...\"> <div class=\"size-14 flex-none ...\">01</div> <div class=\"size-14 grow ...\">02</div> <div class=\"size-14 flex-none ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"size-14 grow-3 ...\">01</div> <div class=\"size-14 grow-7 ...\">02</div> <div class=\"size-14 grow-3 ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"size-14 grow ...\">01</div> <div class=\"size-14 grow-0 ...\">02</div> <div class=\"size-14 grow ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"grow-[25vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grow-(--my-grow) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grow md:grow-0 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":192}}44{"id":"doc-grid_auto_columns_flexbox_grid_tailwind_css-b3cbb775","source":"documentation","title":"grid-auto-columns - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/grid-auto-columns","text":"Example:\n```text\n<div class=\"grid auto-cols-max grid-flow-col\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"auto-cols-[minmax(0,2fr)] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"auto-cols-(--my-auto-cols) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col auto-cols-max md:auto-cols-min ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":104}}45{"id":"doc-grid_column_flexbox_grid_tailwind_css-c95d793c","source":"documentation","title":"grid-column - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/grid-column","text":"Example:\n```text\n<div class=\"grid grid-cols-3 gap-4\"> <div class=\"...\">01</div> <div class=\"...\">02</div> <div class=\"...\">03</div> <div class=\"col-span-2 ...\">04</div> <div class=\"...\">05</div> <div class=\"...\">06</div> <div class=\"col-span-2 ...\">07</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-6 gap-4\"> <div class=\"col-span-4 col-start-2 ...\">01</div> <div class=\"col-start-1 col-end-3 ...\">02</div> <div class=\"col-span-2 col-end-7 ...\">03</div> <div class=\"col-start-1 col-end-7 ...\">04</div></div>\n```\n\nExample:\n```text\n<div class=\"col-[16_/_span_16] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"col-(--my-columns) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"col-span-2 md:col-span-6 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":198}}46{"id":"doc-order_flexbox_grid_tailwind_css-83bd4b53","source":"documentation","title":"order - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/order","text":"Example:\n```text\n<div class=\"flex justify-between ...\"> <div class=\"order-3 ...\">01</div> <div class=\"order-1 ...\">02</div> <div class=\"order-2 ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-between ...\"> <div class=\"order-last ...\">01</div> <div class=\"...\">02</div> <div class=\"order-first ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"-order-1\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"order-[min(var(--total-items),10)] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"order-(--my-order) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"order-first md:order-last ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":170}}47{"id":"doc-flex_flexbox_grid_tailwind_css-5dc343c7","source":"documentation","title":"flex - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/flex","text":"Example:\n```text\n<div class=\"flex\"> <div class=\"w-14 flex-none ...\">01</div> <div class=\"w-64 flex-1 ...\">02</div> <div class=\"w-32 flex-1 ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex\"> <div class=\"w-14 flex-none ...\">01</div> <div class=\"w-64 flex-initial ...\">02</div> <div class=\"w-32 flex-initial ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"w-14 flex-none ...\">01</div> <div class=\"w-64 flex-auto ...\">02</div> <div class=\"w-32 flex-auto ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"w-14 flex-none ...\">01</div> <div class=\"w-32 flex-none ...\">02</div> <div class=\"flex-1 ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex-[3_1_auto] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"flex-(--my-flex) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"flex-none md:flex-1 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.150Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":235}}48{"id":"doc-flex_basis_flexbox_grid_tailwind_css-7c6cf07a","source":"documentation","title":"flex-basis - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/flex-basis","text":"Example:\n```text\n<div class=\"flex flex-row\"> <div class=\"basis-64\">01</div> <div class=\"basis-64\">02</div> <div class=\"basis-128\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-row\"> <div class=\"basis-3xs\">01</div> <div class=\"basis-2xs\">02</div> <div class=\"basis-xs\">03</div> <div class=\"basis-sm\">04</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-row\"> <div class=\"basis-1/3\">01</div> <div class=\"basis-2/3\">02</div></div>\n```\n\nExample:\n```text\n<div class=\"basis-[30vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"basis-(--my-basis) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-row\"> <div class=\"basis-1/4 md:basis-1/3\">01</div> <div class=\"basis-1/4 md:basis-1/3\">02</div> <div class=\"basis-1/2 md:basis-1/3\">03</div></div>\n```\n\nExample:\n```text\n@theme { --container-4xs: 14rem; }\n```\n\nExample:\n```text\n<div class=\"basis-4xs\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":249}}49{"id":"doc-flex_shrink_flexbox_grid_tailwind_css-84947a5f","source":"documentation","title":"flex-shrink - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/flex-shrink","text":"Example:\n```text\n<div class=\"flex ...\"> <div class=\"h-14 w-14 flex-none ...\">01</div> <div class=\"h-14 w-64 shrink ...\">02</div> <div class=\"h-14 w-14 flex-none ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"h-16 flex-1 ...\">01</div> <div class=\"h-16 w-32 shrink-0 ...\">02</div> <div class=\"h-16 flex-1 ...\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"shrink-[calc(100vw-var(--sidebar))] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"shrink-(--my-shrink) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"shrink md:shrink-0 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":158}}50{"id":"doc-align_items_flexbox_grid_tailwind_css-c81a9d98","source":"documentation","title":"align-items - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/align-items","text":"Example:\n```text\n<div class=\"flex items-stretch ...\"> <div class=\"py-4\">01</div> <div class=\"py-12\">02</div> <div class=\"py-8\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-start ...\"> <div class=\"py-4\">01</div> <div class=\"py-12\">02</div> <div class=\"py-8\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-center ...\"> <div class=\"py-4\">01</div> <div class=\"py-12\">02</div> <div class=\"py-8\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-end ...\"> <div class=\"py-4\">01</div> <div class=\"py-12\">02</div> <div class=\"py-8\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-baseline ...\"> <div class=\"pt-2 pb-6\">01</div> <div class=\"pt-8 pb-12\">02</div> <div class=\"pt-12 pb-4\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-[1fr_auto] items-baseline-last\"> <div> <img src=\"img/spencer-sharp.jpg\" /> <h4>Spencer Sharp</h4> <p>Working on the future of astronaut recruitment at Space Recruit.</p> </div> <p>spacerecruit.com</p></div>\n```\n\nExample:\n```text\n<div class=\"flex items-stretch md:items-center ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":284}}51{"id":"doc-min_height_sizing_tailwind_css-5e8c7b73","source":"documentation","title":"min-height - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/min-height","text":"Example:\n```text\n<div class=\"h-20 ...\"> <div class=\"min-h-80 ...\">min-h-80</div> <div class=\"min-h-64 ...\">min-h-64</div> <div class=\"min-h-48 ...\">min-h-48</div> <div class=\"min-h-40 ...\">min-h-40</div> <div class=\"min-h-32 ...\">min-h-32</div> <div class=\"min-h-24 ...\">min-h-24</div></div>\n```\n\nExample:\n```text\n<div class=\"min-h-full ...\">min-h-full</div><div class=\"min-h-9/10 ...\">min-h-9/10</div><div class=\"min-h-3/4 ...\">min-h-3/4</div><div class=\"min-h-1/2 ...\">min-h-1/2</div><div class=\"min-h-1/3 ...\">min-h-1/3</div>\n```\n\nExample:\n```text\n<div class=\"min-h-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"min-h-(--my-min-height) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-24 min-h-0 md:min-h-full ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":212}}52{"id":"doc-place_content_flexbox_grid_tailwind_css-a0af33fe","source":"documentation","title":"place-content - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/place-content","text":"Example:\n```text\n<div class=\"grid h-48 grid-cols-2 place-content-center gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-48 grid-cols-2 place-content-start gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-48 grid-cols-2 place-content-end gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-48 grid-cols-2 place-content-between gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-48 grid-cols-2 place-content-around gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-48 grid-cols-2 place-content-evenly gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-48 grid-cols-2 place-content-stretch gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"grid place-content-start md:place-content-center ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.151Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":301}}53{"id":"doc-justify_items_flexbox_grid_tailwind_css-ab765590","source":"documentation","title":"justify-items - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/justify-items","text":"Example:\n```text\n<div class=\"grid justify-items-start ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col justify-items-end ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col justify-items-end-safe ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col justify-items-center ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-flow-col justify-items-center-safe ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-stretch ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-start md:justify-items-center ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":244}}54{"id":"doc-justify_self_flexbox_grid_tailwind_css-e7992a84","source":"documentation","title":"justify-self - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/justify-self","text":"Example:\n```text\n<div class=\"grid justify-items-stretch ...\"> <!-- ... --> <div class=\"justify-self-auto ...\">02</div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-stretch ...\"> <!-- ... --> <div class=\"justify-self-start ...\">02</div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-stretch ...\"> <!-- ... --> <div class=\"justify-self-center ...\">02</div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-stretch ...\"> <!-- ... --> <div class=\"justify-self-center-safe ...\">02</div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-stretch ...\"> <!-- ... --> <div class=\"justify-self-end ...\">02</div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-stretch ...\"> <!-- ... --> <div class=\"justify-self-end-safe ...\">02</div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"grid justify-items-start ...\"> <!-- ... --> <div class=\"justify-self-stretch ...\">02</div> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"justify-self-start md:justify-self-end ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":287}}55{"id":"doc-place_items_flexbox_grid_tailwind_css-d17b0259","source":"documentation","title":"place-items - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/place-items","text":"Example:\n```text\n<div class=\"grid grid-cols-3 place-items-start gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 place-items-end gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 place-items-center gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 place-items-stretch gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid place-items-start md:place-items-center ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":211}}56{"id":"doc-place_self_flexbox_grid_tailwind_css-4b04999c","source":"documentation","title":"place-self - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/place-self","text":"Example:\n```text\n<div class=\"grid grid-cols-3 gap-4 ...\"> <div>01</div> <div class=\"place-self-auto ...\">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 gap-4 ...\"> <div>01</div> <div class=\"place-self-start ...\">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 gap-4 ...\"> <div>01</div> <div class=\"place-self-center ...\">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 gap-4 ...\"> <div>01</div> <div class=\"place-self-end ...\">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 gap-4 ...\"> <div>01</div> <div class=\"place-self-stretch ...\">02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>\n```\n\nExample:\n```text\n<div class=\"place-self-start md:place-self-end ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":262}}57{"id":"doc-min_width_sizing_tailwind_css-c088f326","source":"documentation","title":"min-width - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/min-width","text":"Example:\n```text\n<div class=\"w-20 ...\"> <div class=\"min-w-80 ...\">min-w-80</div> <div class=\"min-w-64 ...\">min-w-64</div> <div class=\"min-w-48 ...\">min-w-48</div> <div class=\"min-w-40 ...\">min-w-40</div> <div class=\"min-w-32 ...\">min-w-32</div> <div class=\"min-w-24 ...\">min-w-24</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"min-w-3/4 ...\">min-w-3/4</div> <div class=\"w-full ...\">w-full</div></div>\n```\n\nExample:\n```text\n<div class=\"w-40 ...\"> <div class=\"min-w-lg ...\">min-w-lg</div> <div class=\"min-w-md ...\">min-w-md</div> <div class=\"min-w-sm ...\">min-w-sm</div> <div class=\"min-w-xs ...\">min-w-xs</div> <div class=\"min-w-2xs ...\">min-w-2xs</div> <div class=\"min-w-3xs ...\">min-w-3xs</div></div>\n```\n\nExample:\n```text\n<div class=\"min-w-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"min-w-(--my-min-width) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"w-24 min-w-full md:min-w-0 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.152Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":263}}58{"id":"doc-align_self_flexbox_grid_tailwind_css-44145f22","source":"documentation","title":"align-self - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/align-self","text":"Example:\n```text\n<div class=\"flex items-stretch ...\"> <div>01</div> <div class=\"self-auto ...\">02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-stretch ...\"> <div>01</div> <div class=\"self-start ...\">02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-stretch ...\"> <div>01</div> <div class=\"self-center ...\">02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-stretch ...\"> <div>01</div> <div class=\"self-end ...\">02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex items-stretch ...\"> <div>01</div> <div class=\"self-stretch ...\">02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"self-baseline pt-2 pb-6\">01</div> <div class=\"self-baseline pt-8 pb-12\">02</div> <div class=\"self-baseline pt-12 pb-4\">03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-[1fr_auto]\"> <div> <img src=\"img/spencer-sharp.jpg\" /> <h4>Spencer Sharp</h4> <p class=\"self-baseline-last\">Working on the future of astronaut recruitment at Space Recruit.</p> </div> <p class=\"self-baseline-last\">spacerecruit.com</p></div>\n```\n\nExample:\n```text\n<div class=\"self-auto md:self-end ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.153Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":314}}59{"id":"doc-align_content_flexbox_grid_tailwind_css-c3ebbf47","source":"documentation","title":"align-content - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/align-content","text":"Example:\n```text\n<div class=\"grid h-56 grid-cols-3 content-start gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 content-center gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 content-end gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 content-between gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 content-around gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 content-evenly gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 content-stretch gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid h-56 grid-cols-3 content-normal gap-4 ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>\n```\n\nExample:\n```text\n<div class=\"grid content-start md:content-around ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.153Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":355}}60{"id":"doc-padding_spacing_tailwind_css-981b07bc","source":"documentation","title":"padding - Spacing - Tailwind CSS","url":"https://tailwindcss.com/docs/padding","text":"Example:\n```text\n<div class=\"p-8 ...\">p-8</div>\n```\n\nExample:\n```text\n<div class=\"pt-6 ...\">pt-6</div><div class=\"pr-4 ...\">pr-4</div><div class=\"pb-8 ...\">pb-8</div><div class=\"pl-2 ...\">pl-2</div>\n```\n\nExample:\n```text\n<div class=\"px-8 ...\">px-8</div>\n```\n\nExample:\n```text\n<div class=\"py-8 ...\">py-8</div>\n```\n\nExample:\n```text\n<div> <div dir=\"ltr\"> <div class=\"ps-8 ...\">ps-8</div> <div class=\"pe-8 ...\">pe-8</div> </div> <div dir=\"rtl\"> <div class=\"ps-8 ...\">ps-8</div> <div class=\"pe-8 ...\">pe-8</div> </div></div>\n```\n\nExample:\n```text\n<div class=\"pbs-8 ...\">pbs-8</div>\n```\n\nExample:\n```text\n<div class=\"p-[5px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"p-(--my-padding) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"py-4 md:py-8 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.153Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":51,"estimatedTokens":220}}61{"id":"doc-width_sizing_tailwind_css-6bd02520","source":"documentation","title":"width - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/width","text":"Example:\n```text\n<div class=\"w-96 ...\">w-96</div><div class=\"w-80 ...\">w-80</div><div class=\"w-64 ...\">w-64</div><div class=\"w-48 ...\">w-48</div><div class=\"w-40 ...\">w-40</div><div class=\"w-32 ...\">w-32</div><div class=\"w-24 ...\">w-24</div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"w-1/2 ...\">w-1/2</div> <div class=\"w-1/2 ...\">w-1/2</div></div><div class=\"flex ...\"> <div class=\"w-2/5 ...\">w-2/5</div> <div class=\"w-3/5 ...\">w-3/5</div></div><div class=\"flex ...\"> <div class=\"w-1/3 ...\">w-1/3</div> <div class=\"w-2/3 ...\">w-2/3</div></div><div class=\"flex ...\"> <div class=\"w-1/4 ...\">w-1/4</div> <div class=\"w-3/4 ...\">w-3/4</div></div><div class=\"flex ...\"> <div class=\"w-1/5 ...\">w-1/5</div> <div class=\"w-4/5 ...\">w-4/5</div></div><div class=\"flex ...\"> <div class=\"w-1/6 ...\">w-1/6</div> <div class=\"w-5/6 ...\">w-5/6</div></div><div class=\"w-full ...\">w-full</div>\n```\n\nExample:\n```text\n<div class=\"w-xl ...\">w-xl</div><div class=\"w-lg ...\">w-lg</div><div class=\"w-md ...\">w-md</div><div class=\"w-sm ...\">w-sm</div><div class=\"w-xs ...\">w-xs</div><div class=\"w-2xs ...\">w-2xs</div><div class=\"w-3xs ...\">w-3xs</div>\n```\n\nExample:\n```text\n<div class=\"w-screen\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"w-full md:w-auto\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"size-16 ...\">size-16</div><div class=\"size-20 ...\">size-20</div><div class=\"size-24 ...\">size-24</div><div class=\"size-32 ...\">size-32</div><div class=\"size-40 ...\">size-40</div>\n```\n\nExample:\n```text\n<div class=\"w-[5px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"w-(--my-width) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"w-1/2 md:w-full ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.153Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":51,"estimatedTokens":448}}62{"id":"doc-max_width_sizing_tailwind_css-fef00972","source":"documentation","title":"max-width - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/max-width","text":"Example:\n```text\n<div class=\"w-full max-w-96 ...\">max-w-96</div><div class=\"w-full max-w-80 ...\">max-w-80</div><div class=\"w-full max-w-64 ...\">max-w-64</div><div class=\"w-full max-w-48 ...\">max-w-48</div><div class=\"w-full max-w-40 ...\">max-w-40</div><div class=\"w-full max-w-32 ...\">max-w-32</div><div class=\"w-full max-w-24 ...\">max-w-24</div>\n```\n\nExample:\n```text\n<div class=\"w-full max-w-9/10 ...\">max-w-9/10</div><div class=\"w-full max-w-3/4 ...\">max-w-3/4</div><div class=\"w-full max-w-1/2 ...\">max-w-1/2</div><div class=\"w-full max-w-1/3 ...\">max-w-1/3</div>\n```\n\nExample:\n```text\n<div class=\"max-w-md ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"container\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"container mx-auto px-4\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-w-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-w-(--my-max-width) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-w-sm md:max-w-lg ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.154Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":272}}63{"id":"doc-justify_content_flexbox_grid_tailwind_css-1afe859f","source":"documentation","title":"justify-content - Flexbox & Grid - Tailwind CSS","url":"https://tailwindcss.com/docs/justify-content","text":"Example:\n```text\n<div class=\"flex justify-start ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-center ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-center-safe ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-end ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-end-safe ...\"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-between ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-around ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-evenly ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-[4rem_auto_4rem] justify-stretch ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-normal ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex justify-start md:justify-between ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.154Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":56,"estimatedTokens":328}}64{"id":"doc-translate_transforms_tailwind_css-229cccd1","source":"documentation","title":"translate - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/translate","text":"Example:\n```text\n<img class=\"-translate-6 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-2 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-8 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-translate-1/4 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-1/6 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-1/2 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-translate-x-4 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-x-2 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-x-1/2 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-translate-y-4 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-y-2 ...\" src=\"/img/mountains.jpg\" /><img class=\"translate-y-1/2 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<div class=\"transform-3d\"> <img class=\"-translate-z-8 rotate-x-50 rotate-z-45 ...\" src=\"/img/mountains.jpg\" /> <img class=\"translate-z-2 rotate-x-50 rotate-z-45 ...\" src=\"/img/mountains.jpg\" /> <img class=\"translate-z-1/2 rotate-x-50 rotate-z-45 ...\" src=\"/img/mountains.jpg\" /></div>\n```\n\nExample:\n```text\n<img class=\"translate-[3.142rad] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"translate-(--my-translate) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"translate-45 md:translate-60 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.154Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":348}}65{"id":"doc-skew_transforms_tailwind_css-e6823b1f","source":"documentation","title":"skew - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/skew","text":"Example:\n```text\n<img class=\"skew-3 ...\" src=\"/img/mountains.jpg\" /><img class=\"skew-6 ...\" src=\"/img/mountains.jpg\" /><img class=\"skew-12 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-skew-3 ...\" src=\"/img/mountains.jpg\" /><img class=\"-skew-6 ...\" src=\"/img/mountains.jpg\" /><img class=\"-skew-12 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-skew-x-12 ...\" src=\"/img/mountains.jpg\" /><img class=\"skew-x-6 ...\" src=\"/img/mountains.jpg\" /><img class=\"skew-x-12 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-skew-y-12 ...\" src=\"/img/mountains.jpg\" /><img class=\"skew-y-6 ...\" src=\"/img/mountains.jpg\" /><img class=\"skew-y-12 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"skew-[3.142rad] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"skew-(--my-skew) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"skew-3 md:skew-12 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.154Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":248}}66{"id":"doc-appearance_interactivity_tailwind_css-ca4459e8","source":"documentation","title":"appearance - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/appearance","text":"Example:\n```text\n<select> <option>Yes</option> <option>No</option> <option>Maybe</option></select><div class=\"grid\"> <select class=\"col-start-1 row-start-1 appearance-none bg-gray-50 dark:bg-gray-800 ...\"> <option>Yes</option> <option>No</option> <option>Maybe</option> </select> <svg class=\"pointer-events-none col-start-1 row-start-1 ...\"> <!-- ... --> </svg></div>\n```\n\nExample:\n```text\n<label> <div> <input type=\"checkbox\" class=\"appearance-none forced-colors:appearance-auto ...\" /> <svg class=\"invisible peer-checked:visible forced-colors:hidden ...\"> <!-- ... --> </svg> </div> Falls back to default appearance</label><label> <div> <input type=\"checkbox\" class=\"appearance-none ...\" /> <svg class=\"invisible peer-checked:visible ...\"> <!-- ... --> </svg> </div> Keeps custom appearance</label>\n```\n\nExample:\n```text\n<select class=\"appearance-auto md:appearance-none ...\"> <!-- ... --></select>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.155Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":243}}67{"id":"doc-rotate_transforms_tailwind_css-37eacb53","source":"documentation","title":"rotate - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/rotate","text":"Example:\n```text\n<img class=\"rotate-45 ...\" src=\"/img/mountains.jpg\" /><img class=\"rotate-90 ...\" src=\"/img/mountains.jpg\" /><img class=\"rotate-210 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-rotate-45 ...\" src=\"/img/mountains.jpg\" /><img class=\"-rotate-90 ...\" src=\"/img/mountains.jpg\" /><img class=\"-rotate-210 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"rotate-x-50 rotate-z-45 ...\" src=\"/img/mountains.jpg\" /><img class=\"rotate-x-15 -rotate-y-30 ...\" src=\"/img/mountains.jpg\" /><img class=\"rotate-y-25 rotate-z-30 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"rotate-[3.142rad] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"rotate-(--my-rotation) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"rotate-45 md:rotate-60 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.155Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":220}}68{"id":"doc-transition_delay_transitions_animation_tailwind_-19e96499","source":"documentation","title":"transition-delay - Transitions & Animation - Tailwind CSS","url":"https://tailwindcss.com/docs/transition-delay","text":"Example:\n```text\n<button class=\"transition delay-150 duration-300 ease-in-out ...\">Button A</button><button class=\"transition delay-300 duration-300 ease-in-out ...\">Button B</button><button class=\"transition delay-700 duration-300 ease-in-out ...\">Button C</button>\n```\n\nExample:\n```text\n<button type=\"button\" class=\"delay-300 motion-reduce:delay-0 ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"delay-[1s,250ms] ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"delay-(--my-delay) ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"delay-150 md:delay-300 ...\"> <!-- ... --></button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.155Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":164}}69{"id":"doc-animation_transitions_animation_tailwind_css-f27e6bef","source":"documentation","title":"animation - Transitions & Animation - Tailwind CSS","url":"https://tailwindcss.com/docs/animation","text":"Example:\n```text\n<button type=\"button\" class=\"bg-indigo-500 ...\" disabled> <svg class=\"mr-3 size-5 animate-spin ...\" viewBox=\"0 0 24 24\"> <!-- ... --> </svg> Processing…</button>\n```\n\nExample:\n```text\n<span class=\"relative flex size-3\"> <span class=\"absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75\"></span> <span class=\"relative inline-flex size-3 rounded-full bg-sky-500\"></span></span>\n```\n\nExample:\n```text\n<div class=\"mx-auto w-full max-w-sm rounded-md border border-blue-300 p-4\"> <div class=\"flex animate-pulse space-x-4\"> <div class=\"size-10 rounded-full bg-gray-200\"></div> <div class=\"flex-1 space-y-6 py-1\"> <div class=\"h-2 rounded bg-gray-200\"></div> <div class=\"space-y-3\"> <div class=\"grid grid-cols-3 gap-4\"> <div class=\"col-span-2 h-2 rounded bg-gray-200\"></div> <div class=\"col-span-1 h-2 rounded bg-gray-200\"></div> </div> <div class=\"h-2 rounded bg-gray-200\"></div> </div> </div> </div></div>\n```\n\nExample:\n```text\n<svg class=\"size-6 animate-bounce ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<button type=\"button\" class=\"bg-indigo-600 ...\" disabled> <svg class=\"mr-3 size-5 motion-safe:animate-spin ...\" viewBox=\"0 0 24 24\"> <!-- ... --> </svg> Processing</button>\n```\n\nExample:\n```text\n<div class=\"animate-[wiggle_1s_ease-in-out_infinite] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"animate-(--my-animation) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"animate-none md:animate-spin ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --animate-wiggle: wiggle 1s ease-in-out infinite; @keyframes wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }}\n```\n\nExample:\n```text\n<div class=\"animate-wiggle\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.155Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":51,"estimatedTokens":468}}70{"id":"doc-backface_visibility_transforms_tailwind_css-1a0734e5","source":"documentation","title":"backface-visibility - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/backface-visibility","text":"Example:\n```text\n<div class=\"size-20 ...\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 backface-hidden ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 backface-hidden ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 backface-hidden ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-hidden ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 backface-hidden ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 backface-hidden ...\">6</div></div><div class=\"size-20 ...\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 backface-visible ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 backface-visible ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 backface-visible ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 backface-visible ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 backface-visible ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 backface-visible ...\">6</div></div>\n```\n\nExample:\n```text\n<div class=\"backface-visible md:backface-hidden ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.155Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":301}}71{"id":"doc-transform_origin_transforms_tailwind_css-39dc9119","source":"documentation","title":"transform-origin - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/transform-origin","text":"Example:\n```text\n<img class=\"origin-center rotate-45 ...\" src=\"/img/mountains.jpg\" /><img class=\"origin-top-left rotate-12 ...\" src=\"/img/mountains.jpg\" /><img class=\"origin-bottom -rotate-12 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"origin-[33%_75%] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"origin-(--my-transform-origin) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"origin-center md:origin-top ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.156Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":130}}72{"id":"doc-transition_timing_function_transitions_animation-5cadb09e","source":"documentation","title":"transition-timing-function - Transitions & Animation - Tailwind CSS","url":"https://tailwindcss.com/docs/transition-timing-function","text":"Example:\n```text\n<button class=\"duration-300 ease-in ...\">Button A</button><button class=\"duration-300 ease-out ...\">Button B</button><button class=\"duration-300 ease-in-out ...\">Button C</button>\n```\n\nExample:\n```text\n<button class=\"ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"ease-(--my-ease) ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"ease-out md:ease-in ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n@theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }\n```\n\nExample:\n```text\n<button class=\"ease-in-expo\"> <!-- ... --></button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.156Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":165}}73{"id":"doc-perspective_transforms_tailwind_css-388c1fc8","source":"documentation","title":"perspective - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/perspective","text":"Example:\n```text\n<div class=\"size-20 perspective-dramatic ...\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 ...\">6</div></div><div class=\"size-20 perspective-normal ...\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 ...\">6</div></div>\n```\n\nExample:\n```text\n<div class=\"perspective-none ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"perspective-[750px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"perspective-(--my-perspective) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"perspective-midrange md:perspective-dramatic ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --perspective-remote: 1800px; }\n```\n\nExample:\n```text\n<div class=\"perspective-remote\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.156Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":361}}74{"id":"doc-zoom_transforms_tailwind_css-9a97bb3c","source":"documentation","title":"zoom - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/zoom","text":"Example:\n```text\n<div class=\"zoom-75 ...\"> <!-- ... --></div><div class=\"zoom-100 ...\"> <!-- ... --></div><div class=\"zoom-125 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"zoom-[1.1] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"zoom-(--my-zoom) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"zoom-100 hover:zoom-125 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"zoom-100 md:zoom-125 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.156Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":122}}75{"id":"doc-color_scheme_interactivity_tailwind_css-93c3a5fb","source":"documentation","title":"color-scheme - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/color-scheme","text":"Example:\n```text\n<div class=\"scheme-light ...\"> <input type=\"date\" /></div><div class=\"scheme-dark ...\"> <input type=\"date\" /></div><div class=\"scheme-light-dark ...\"> <input type=\"date\" /></div>\n```\n\nExample:\n```text\n<html class=\"scheme-light dark:scheme-dark ...\"> <!-- ... --></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.156Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":77}}76{"id":"doc-scale_transforms_tailwind_css-6b61109f","source":"documentation","title":"scale - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/scale","text":"Example:\n```text\n<img class=\"scale-75 ...\" src=\"/img/mountains.jpg\" /><img class=\"scale-100 ...\" src=\"/img/mountains.jpg\" /><img class=\"scale-125 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"scale-x-75 ...\" src=\"/img/mountains.jpg\" /><img class=\"scale-x-100 ...\" src=\"/img/mountains.jpg\" /><img class=\"scale-x-125 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"scale-y-75 ...\" src=\"/img/mountains.jpg\" /><img class=\"scale-y-100 ...\" src=\"/img/mountains.jpg\" /><img class=\"scale-y-125 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-scale-x-75 ...\" src=\"/img/mountains.jpg\" /><img class=\"-scale-100 ...\" src=\"/img/mountains.jpg\" /><img class=\"-scale-y-125 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"scale-[1.7] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"scale-(--my-scale) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"scale-95 hover:scale-120 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.156Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":256}}77{"id":"doc-cursor_interactivity_tailwind_css-4a89554a","source":"documentation","title":"cursor - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/cursor","text":"Example:\n```text\n<button class=\"cursor-pointer ...\">Submit</button><button class=\"cursor-progress ...\">Saving...</button><button class=\"cursor-not-allowed ...\" disabled>Confirm</button>\n```\n\nExample:\n```text\n<button class=\"cursor-[url(hand.cur),_pointer] ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"cursor-(--my-cursor) ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"cursor-not-allowed md:cursor-auto ...\"> <!-- ... --></button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.157Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":122}}78{"id":"doc-pointer_events_interactivity_tailwind_css-e720b13d","source":"documentation","title":"pointer-events - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/pointer-events","text":"Example:\n```text\n<div class=\"relative ...\"> <div class=\"pointer-events-auto absolute ...\"> <svg class=\"absolute h-5 w-5 text-gray-400\"> <!-- ... --> </svg> </div> <input type=\"text\" placeholder=\"Search\" class=\"...\" /></div><div class=\"relative ...\"> <div class=\"pointer-events-none absolute ...\"> <svg class=\"absolute h-5 w-5 text-gray-400\"> <!-- ... --> </svg> </div> <input type=\"text\" placeholder=\"Search\" class=\"...\" /></div>\n```\n\nExample:\n```text\n<div class=\"pointer-events-none md:pointer-events-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.157Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":145}}79{"id":"doc-scrollbar_gutter_interactivity_tailwind_css-c27a214a","source":"documentation","title":"scrollbar-gutter - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scrollbar-gutter","text":"Example:\n```text\n<div class=\"scrollbar-gutter-stable overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-gutter-both overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-gutter-auto overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-gutter-auto md:scrollbar-gutter-stable ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.157Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":103}}80{"id":"doc-touch_action_interactivity_tailwind_css-dc4491c2","source":"documentation","title":"touch-action - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/touch-action","text":"Example:\n```text\n<div class=\"h-48 w-full touch-auto overflow-auto ...\"> <img class=\"h-auto w-[150%] max-w-none\" src=\"...\" /></div><div class=\"h-48 w-full touch-none overflow-auto ...\"> <img class=\"h-auto w-[150%] max-w-none\" src=\"...\" /></div><div class=\"h-48 w-full touch-pan-x overflow-auto ...\"> <img class=\"h-auto w-[150%] max-w-none\" src=\"...\" /></div><div class=\"h-48 w-full touch-pan-y overflow-auto ...\"> <img class=\"h-auto w-[150%] max-w-none\" src=\"...\" /></div>\n```\n\nExample:\n```text\n<div class=\"touch-pan-x md:touch-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.157Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":145}}81{"id":"doc-scroll_snap_stop_interactivity_tailwind_css-a2d29498","source":"documentation","title":"scroll-snap-stop - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scroll-snap-stop","text":"Example:\n```text\n<div class=\"snap-x snap-mandatory ...\"> <div class=\"snap-center snap-always ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-center snap-always ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-center snap-always ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-center snap-always ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-center snap-always ...\"> <img src=\"/img/vacation-05.jpg\" /> </div> <div class=\"snap-center snap-always ...\"> <img src=\"/img/vacation-06.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-x ...\"> <div class=\"snap-center snap-normal ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-center snap-normal ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-center snap-normal ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-center snap-normal ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-center snap-normal ...\"> <img src=\"/img/vacation-05.jpg\" /> </div> <div class=\"snap-center snap-normal ...\"> <img src=\"/img/vacation-06.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-always md:snap-normal ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.157Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":322}}82{"id":"doc-accent_color_interactivity_tailwind_css-f15b3086","source":"documentation","title":"accent-color - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/accent-color","text":"Example:\n```text\n<label> <input type=\"checkbox\" checked /> Browser default</label><label> <input class=\"accent-pink-500\" type=\"checkbox\" checked /> Customized</label>\n```\n\nExample:\n```text\n<input class=\"accent-purple-500/25\" type=\"checkbox\" checked /><input class=\"accent-purple-500/75\" type=\"checkbox\" checked />\n```\n\nExample:\n```text\n<input class=\"accent-[#50d71e] ...\" type=\"checkbox\" />\n```\n\nExample:\n```text\n<input class=\"accent-(--my-accent-color) ...\" type=\"checkbox\" />\n```\n\nExample:\n```text\n<input class=\"accent-black hover:accent-pink-500\" type=\"checkbox\" />\n```\n\nExample:\n```text\n<input class=\"accent-black md:accent-pink-500 ...\" type=\"checkbox\" />\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<input class=\"accent-regal-blue\" type=\"checkbox\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.158Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":205}}83{"id":"doc-scrollbar_width_interactivity_tailwind_css-5e952a17","source":"documentation","title":"scrollbar-width - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scrollbar-width","text":"Example:\n```text\n<div class=\"scrollbar-auto overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-thin overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-none overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-none md:scrollbar-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.158Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":93}}84{"id":"doc-scroll_padding_interactivity_tailwind_css-bdc102e6","source":"documentation","title":"scroll-padding - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scroll-padding","text":"Example:\n```text\n<div class=\"snap-x scroll-pl-6 ...\"> <div class=\"snap-start ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-05.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div dir=\"ltr\"> <div class=\"snap-x scroll-ps-6 ...\"> <!-- ... --> </div></div><div dir=\"rtl\"> <div class=\"snap-x scroll-ps-6 ...\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-y scroll-pbs-6 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scroll-pl-[24rem] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scroll-pl-(--my-scroll-padding) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scroll-p-8 md:scroll-p-0 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.159Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":258}}85{"id":"doc-scroll_behavior_interactivity_tailwind_css-ab27404f","source":"documentation","title":"scroll-behavior - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scroll-behavior","text":"Example:\n```text\n<html class=\"scroll-smooth\"> <!-- ... --></html>\n```\n\nExample:\n```text\n<html class=\"scroll-smooth md:scroll-auto\"> <!-- ... --></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.159Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":43}}86{"id":"doc-resize_interactivity_tailwind_css-236e6fa1","source":"documentation","title":"resize - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/resize","text":"Example:\n```text\n<textarea class=\"resize rounded-md ...\"></textarea>\n```\n\nExample:\n```text\n<textarea class=\"resize-y rounded-md ...\"></textarea>\n```\n\nExample:\n```text\n<textarea class=\"resize-x rounded-md ...\"></textarea>\n```\n\nExample:\n```text\n<textarea class=\"resize-none rounded-md\"></textarea>\n```\n\nExample:\n```text\n<div class=\"resize-none md:resize ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.159Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":99}}87{"id":"doc-field_sizing_interactivity_tailwind_css-4cd09b70","source":"documentation","title":"field-sizing - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/field-sizing","text":"Example:\n```text\n<textarea class=\"field-sizing-content ...\" rows=\"2\"> Latex Salesman, Vanderlay Industries</textarea>\n```\n\nExample:\n```text\n<textarea class=\"field-sizing-fixed w-80 ...\" rows=\"2\"> Latex Salesman, Vanderlay Industries</textarea>\n```\n\nExample:\n```text\n<input class=\"field-sizing-content md:field-sizing-fixed ...\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.159Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":88}}88{"id":"doc-scroll_snap_type_interactivity_tailwind_css-10002c83","source":"documentation","title":"scroll-snap-type - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scroll-snap-type","text":"Example:\n```text\n<div class=\"snap-x ...\"> <div class=\"snap-center ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-05.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-06.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-x snap-mandatory ...\"> <div class=\"snap-center ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-05.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-06.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-x snap-proximity ...\"> <div class=\"snap-center ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-05.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-none md:snap-x ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.159Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":398}}89{"id":"doc-scroll_snap_align_interactivity_tailwind_css-2bb4b0ff","source":"documentation","title":"scroll-snap-align - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scroll-snap-align","text":"Example:\n```text\n<div class=\"snap-x ...\"> <div class=\"snap-center ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-05.jpg\" /> </div> <div class=\"snap-center ...\"> <img src=\"/img/vacation-06.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-x ...\"> <div class=\"snap-start ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-05.jpg\" /> </div> <div class=\"snap-start ...\"> <img src=\"/img/vacation-06.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-x ...\"> <div class=\"snap-end ...\"> <img src=\"/img/vacation-01.jpg\" /> </div> <div class=\"snap-end ...\"> <img src=\"/img/vacation-02.jpg\" /> </div> <div class=\"snap-end ...\"> <img src=\"/img/vacation-03.jpg\" /> </div> <div class=\"snap-end ...\"> <img src=\"/img/vacation-04.jpg\" /> </div> <div class=\"snap-end ...\"> <img src=\"/img/vacation-05.jpg\" /> </div> <div class=\"snap-end ...\"> <img src=\"/img/vacation-06.jpg\" /> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-center md:snap-start ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.159Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":405}}90{"id":"doc-play_cdn_tailwind_css-dbce83f4","source":"documentation","title":"Play CDN - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/play-cdn","text":"Example:\n```text\n<!doctype html><html> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script> </head> <body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1> </body></html>\n```\n\nExample:\n```text\n<!doctype html><html> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <script src=\"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4\"></script> <style type=\"text/tailwindcss\"> @theme { --color-clifford: #da373d; } </style> </head> <body> <h1 class=\"text-3xl font-bold underline text-clifford\"> Hello world! </h1> </body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.160Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":202}}91{"id":"doc-will_change_interactivity_tailwind_css-25d383cd","source":"documentation","title":"will-change - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/will-change","text":"Example:\n```text\n<div class=\"overflow-auto will-change-scroll\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"will-change-[top,left] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"will-change-(--my-properties) ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.160Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":69}}92{"id":"doc-caret_color_interactivity_tailwind_css-764d99ea","source":"documentation","title":"caret-color - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/caret-color","text":"Example:\n```text\n<textarea class=\"caret-pink-500 ...\"></textarea>\n```\n\nExample:\n```text\n<textarea class=\"caret-[#50d71e] ...\"></textarea>\n```\n\nExample:\n```text\n<textarea class=\"caret-(--my-caret-color) ...\"></textarea>\n```\n\nExample:\n```text\n<textarea class=\"caret-rose-500 md:caret-lime-600 ...\"></textarea>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<textarea class=\"caret-regal-blue\"></textarea>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.160Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":115}}93{"id":"doc-tailwind_cli_tailwind_css-c7dd57e6","source":"documentation","title":"Tailwind CLI - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/tailwind-cli","text":"Example:\n```text\nnpm install tailwindcss @tailwindcss/cli\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch\n```\n\nExample:\n```text\n<!doctype html><html><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link href=\"./output.css\" rel=\"stylesheet\"></head><body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1></body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.161Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":124}}94{"id":"doc-forced_color_adjust_accessibility_tailwind_css-ae942cab","source":"documentation","title":"forced-color-adjust - Accessibility - Tailwind CSS","url":"https://tailwindcss.com/docs/forced-color-adjust","text":"Example:\n```text\n<form> <img src=\"/img/shirt.jpg\" /> <div> <h3>Basic Tee</h3> <h3>$35</h3> <fieldset> <legend class=\"sr-only\">Choose a color</legend> <div class=\"forced-color-adjust-none ...\"> <label> <input class=\"sr-only\" type=\"radio\" name=\"color-choice\" value=\"White\" /> <span class=\"sr-only\">White</span> <span class=\"size-6 rounded-full border border-black/10 bg-white\"></span> </label> <!-- ... --> </div> </fieldset> </div></form>\n```\n\nExample:\n```text\n<form> <fieldset class=\"forced-color-adjust-none lg:forced-color-adjust-auto ...\"> <legend>Choose a color:</legend> <select class=\"hidden lg:block\"> <option value=\"White\">White</option> <option value=\"Gray\">Gray</option> <option value=\"Black\">Black</option> </select> <div class=\"lg:hidden\"> <label> <input class=\"sr-only\" type=\"radio\" name=\"color-choice\" value=\"White\" /> <!-- ... --> </label> <!-- ... --> </div> </fieldset></form>\n```\n\nExample:\n```text\n<div class=\"forced-color-adjust-none md:forced-color-adjust-auto ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.161Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":291}}95{"id":"doc-scroll_margin_interactivity_tailwind_css-68464ca1","source":"documentation","title":"scroll-margin - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scroll-margin","text":"Example:\n```text\n<div class=\"snap-x ...\"> <div class=\"snap-start scroll-ml-6 ...\"> <img src=\"/img/vacation-01.jpg\"/> </div> <div class=\"snap-start scroll-ml-6 ...\"> <img src=\"/img/vacation-02.jpg\"/> </div> <div class=\"snap-start scroll-ml-6 ...\"> <img src=\"/img/vacation-03.jpg\"/> </div> <div class=\"snap-start scroll-ml-6 ...\"> <img src=\"/img/vacation-04.jpg\"/> </div> <div class=\"snap-start scroll-ml-6 ...\"> <img src=\"/img/vacation-05.jpg\"/> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-start -scroll-ml-6 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div dir=\"ltr\"> <div class=\"snap-x ...\"> <div class=\"snap-start scroll-ms-6 ...\"> <img src=\"/img/vacation-01.jpg\"/> </div> <!-- ... --> </div></div><div dir=\"rtl\"> <div class=\"snap-x ...\"> <div class=\"snap-start scroll-ms-6 ...\"> <img src=\"/img/vacation-01.jpg\"/> </div> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"snap-y ...\"> <div class=\"snap-start scroll-mbs-6 ...\"> <!-- ... --> </div></div>\n```\n\nExample:\n```text\n<div class=\"scroll-ml-[24rem] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scroll-ml-(--my-scroll-margin) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scroll-m-8 md:scroll-m-0 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.162Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":340}}96{"id":"doc-user_select_interactivity_tailwind_css-c4d61912","source":"documentation","title":"user-select - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/user-select","text":"Example:\n```text\n<div class=\"select-none ...\">The quick brown fox jumps over the lazy dog.</div>\n```\n\nExample:\n```text\n<div class=\"select-text ...\">The quick brown fox jumps over the lazy dog.</div>\n```\n\nExample:\n```text\n<div class=\"select-all ...\">The quick brown fox jumps over the lazy dog.</div>\n```\n\nExample:\n```text\n<div class=\"select-auto ...\">The quick brown fox jumps over the lazy dog.</div>\n```\n\nExample:\n```text\n<div class=\"select-none md:select-all ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.162Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":127}}97{"id":"doc-installing_tailwind_css_with_postcss_tailwind_cs-aa5272eb","source":"documentation","title":"Installing Tailwind CSS with PostCSS - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/using-postcss","text":"Example:\n```text\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\nExample:\n```text\nexport default { plugins: { \"@tailwindcss/postcss\": {}, }}\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<!doctype html><html><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link href=\"/dist/styles.css\" rel=\"stylesheet\"></head><body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1></body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.162Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":135}}98{"id":"doc-stroke_width_svg_tailwind_css-111b4c32","source":"documentation","title":"stroke-width - SVG - Tailwind CSS","url":"https://tailwindcss.com/docs/stroke-width","text":"Example:\n```text\n<svg class=\"stroke-1 ...\"></svg><svg class=\"stroke-2 ...\"></svg>\n```\n\nExample:\n```text\n<div class=\"stroke-[1.5] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"stroke-(length:--my-stroke-width) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"stroke-1 md:stroke-2 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.162Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":87}}99{"id":"doc-installing_tailwind_css_with_vite_tailwind_css-d9e0d637","source":"documentation","title":"Installing Tailwind CSS with Vite - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/using-vite","text":"Example:\n```text\nnpm create vite@latest my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<!doctype html><html><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link href=\"/src/style.css\" rel=\"stylesheet\"></head><body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1></body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.162Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":169}}100{"id":"doc-scrollbar_color_interactivity_tailwind_css-990a70a5","source":"documentation","title":"scrollbar-color - Interactivity - Tailwind CSS","url":"https://tailwindcss.com/docs/scrollbar-color","text":"Example:\n```text\n<div class=\"scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-thumb-[#0f766e] scrollbar-track-[#ccfbf1] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-thumb-(--my-scrollbar-thumb) scrollbar-track-(--my-scrollbar-track) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-thumb-sky-700 hover:scrollbar-thumb-sky-500 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"scrollbar-thumb-slate-900 scrollbar-track-slate-200 md:scrollbar-thumb-sky-700 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<div class=\"scrollbar-thumb-regal-blue\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.166Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":226}}101{"id":"doc-stroke_svg_tailwind_css-410fa613","source":"documentation","title":"stroke - SVG - Tailwind CSS","url":"https://tailwindcss.com/docs/stroke","text":"Example:\n```text\n<svg class=\"stroke-cyan-500 ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<button class=\"bg-white text-pink-600 hover:bg-pink-600 hover:text-white ...\"> <svg class=\"size-5 stroke-current ...\" fill=\"none\"> <!-- ... --> </svg> Download file</button>\n```\n\nExample:\n```text\n<svg class=\"stroke-[#243c5a] ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"stroke-(--my-stroke-color) ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"stroke-cyan-500 md:stroke-cyan-700 ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<svg class=\"stroke-regal-blue\"> <!-- ... --></svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.166Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":172}}102{"id":"doc-fill_svg_tailwind_css-62ee0211","source":"documentation","title":"fill - SVG - Tailwind CSS","url":"https://tailwindcss.com/docs/fill","text":"Example:\n```text\n<svg class=\"fill-blue-500 ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<button class=\"bg-white text-indigo-600 hover:bg-indigo-600 hover:text-white ...\"> <svg class=\"size-5 fill-current ...\"> <!-- ... --> </svg> Check for updates</button>\n```\n\nExample:\n```text\n<svg class=\"fill-[#243c5a] ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"fill-(--my-fill-color) ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"fill-cyan-500 md:fill-cyan-700 ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<svg class=\"fill-regal-blue\"> <!-- ... --></svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.167Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":167}}103{"id":"doc-install_tailwind_css_with_ruby_on_rails_tailwind-6ec46b27","source":"documentation","title":"Install Tailwind CSS with Ruby on Rails - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails","text":"Example:\n```text\nrails new my-projectcd my-project\n```\n\nExample:\n```text\nbundle add tailwindcss-rails./bin/rails tailwindcss:install\n```\n\nExample:\n```text\n./bin/dev\n```\n\nExample:\n```text\n<h1 class=\"text-3xl font-bold underline\"> Hello world!</h1>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.167Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":67}}104{"id":"doc-install_tailwind_css_with_sveltekit_tailwind_css-f666e161","source":"documentation","title":"Install Tailwind CSS with SvelteKit - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/sveltekit","text":"Example:\n```text\nnpx sv create my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { sveltekit } from '@sveltejs/kit/vite';import { defineConfig } from 'vite';import tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [ tailwindcss(), sveltekit(), ],});\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\n<script> let { children } = $props(); import \"../app.css\";</script>{@render children()}\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<h1 class=\"text-3xl font-bold underline\"> Hello world!</h1><style lang=\"postcss\"> @reference \"tailwindcss\"; :global(html) { background-color: theme(--color-gray-100); }</style>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.167Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":192}}105{"id":"doc-install_tailwind_css_with_ember_js_tailwind_css-7dda14c1","source":"documentation","title":"Install Tailwind CSS with Ember.js - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/emberjs","text":"Example:\n```text\nnpx ember-cli@latest new my-project --no-welcomecd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite';import { extensions, classicEmberSupport, ember } from '@embroider/vite';import { babel } from '@rollup/plugin-babel';import tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [ tailwindcss(), classicEmberSupport(), ember(), // extra plugins here babel({ babelHelpers: 'runtime', extensions, }), ],});\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\n{{content-for \"head\"}}<link integrity=\"\" rel=\"stylesheet\" href=\"/@embroider/virtual/vendor.css\" /><link integrity=\"\" rel=\"stylesheet\" href=\"/@embroider/virtual/app.css\" /><link integrity=\"\" rel=\"stylesheet\" href=\"/app/styles/app.css\" />{{content-for \"head-footer\"}}\n```\n\nExample:\n```text\nnpm run start\n```\n\nExample:\n```text\nimport { pageTitle } from 'ember-page-title';<template> {{pageTitle \"MyProject\"}} <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1> {{outlet}}</template>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":285}}106{"id":"doc-install_tailwind_css_with_parcel_tailwind_css-bf17ba06","source":"documentation","title":"Install Tailwind CSS with Parcel - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/parcel","text":"Example:\n```text\nmkdir my-projectcd my-projectnpm init -ynpm install parcelmkdir srctouch src/index.html\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/postcss\n```\n\nExample:\n```text\n{ \"plugins\": { \"@tailwindcss/postcss\": {} }}\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpx parcel src/index.html\n```\n\nExample:\n```text\n<!doctype html><html> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <link href=\"./index.css\" type=\"text/css\" rel=\"stylesheet\" /> </head> <body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1> </body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":170}}107{"id":"doc-transform_transforms_tailwind_css-d1c72774","source":"documentation","title":"transform - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/transform","text":"Example:\n```text\n<div class=\"scale-150 transform-gpu\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"skew-y-3 md:transform-none\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"transform-[matrix(1,2,3,4,5,6)] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"transform-(--my-transform) ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":89}}108{"id":"doc-backdrop_filter_blur_filters_tailwind_css-17c01188","source":"documentation","title":"backdrop-filter: blur() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-blur","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-blur-none ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-blur-sm ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-blur-md ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-blur-[2px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-blur-(--my-backdrop-blur) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-blur-none md:backdrop-blur-lg ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --blur-2xs: 2px; }\n```\n\nExample:\n```text\n<div class=\"backdrop-blur-2xs\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":186}}109{"id":"doc-backdrop_filter_opacity_filters_tailwind_css-9db65ffa","source":"documentation","title":"backdrop-filter: opacity() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-opacity","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-invert backdrop-opacity-10 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-invert backdrop-opacity-60 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-invert backdrop-opacity-95 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-opacity-[.15] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-opacity-(--my-backdrop-filter-opacity) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-opacity-100 md:backdrop-opacity-60 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.168Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":174}}110{"id":"doc-backdrop_filter_hue_rotate_filters_tailwind_css-55b0cf9f","source":"documentation","title":"backdrop-filter: hue-rotate() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-hue-rotate","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-hue-rotate-90 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-hue-rotate-180 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-hue-rotate-270 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 -backdrop-hue-rotate-15 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 -backdrop-hue-rotate-45 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 -backdrop-hue-rotate-90 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-hue-rotate-[3.142rad] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-hue-rotate-(--my-backdrop-hue-rotation) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-hue-rotate-15 md:backdrop-hue-rotate-0 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.169Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":255}}111{"id":"doc-perspective_origin_transforms_tailwind_css-364de3a1","source":"documentation","title":"perspective-origin - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/perspective-origin","text":"Example:\n```text\n<div class=\"size-20 perspective-near perspective-origin-top-left ...\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 ...\">6</div></div><div class=\"size-20 perspective-near perspective-origin-bottom-right …\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 ...\">6</div></div>\n```\n\nExample:\n```text\n<div class=\"perspective-origin-[200%_150%] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"perspective-origin-(--my-perspective-origin) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"perspective-origin-center md:perspective-origin-bottom-left ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.169Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":330}}112{"id":"doc-table_layout_tables_tailwind_css-6c5b7e55","source":"documentation","title":"table-layout - Tables - Tailwind CSS","url":"https://tailwindcss.com/docs/table-layout","text":"Example:\n```text\n<table class=\"table-auto\"> <thead> <tr> <th>Song</th> <th>Artist</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<table class=\"table-fixed\"> <thead> <tr> <th>Song</th> <th>Artist</th> <th>Year</th> </tr> </thead> <tbody> <tr> <td>The Sliding Mr. Bones (Next Stop, Pottersville)</td> <td>Malcolm Lockyer</td> <td>1961</td> </tr> <tr> <td>Witchy Woman</td> <td>The Eagles</td> <td>1972</td> </tr> <tr> <td>Shining Star</td> <td>Earth, Wind, and Fire</td> <td>1975</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<div class=\"table-auto md:table-fixed ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.169Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":268}}113{"id":"doc-install_tailwind_css_with_angular_tailwind_css-7bff89fe","source":"documentation","title":"Install Tailwind CSS with Angular - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/angular","text":"Example:\n```text\nng new my-project --style csscd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/postcss postcss --force\n```\n\nExample:\n```text\n{ \"plugins\": { \"@tailwindcss/postcss\": {} }}\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nng serve\n```\n\nExample:\n```text\n<h1 class=\"text-3xl font-bold underline\"> Hello world!</h1>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.169Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":98}}114{"id":"doc-transform_style_transforms_tailwind_css-840fd18d","source":"documentation","title":"transform-style - Transforms - Tailwind CSS","url":"https://tailwindcss.com/docs/transform-style","text":"Example:\n```text\n<div class=\"size-20 transform-flat ...\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 ...\">6</div></div><div class=\"size-20 transform-3d ...\"> <div class=\"translate-z-12 rotate-x-0 bg-sky-300/75 ...\">1</div> <div class=\"-translate-z-12 rotate-y-18 bg-sky-300/75 ...\">2</div> <div class=\"translate-x-12 rotate-y-90 bg-sky-300/75 ...\">3</div> <div class=\"-translate-x-12 -rotate-y-90 bg-sky-300/75 ...\">4</div> <div class=\"-translate-y-12 rotate-x-90 bg-sky-300/75 ...\">5</div> <div class=\"translate-y-12 -rotate-x-90 bg-sky-300/75 ...\">6</div></div>\n```\n\nExample:\n```text\n<div class=\"transform-3d md:transform-flat ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.169Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":257}}115{"id":"doc-install_tailwind_css_with_laravel_tailwind_css-d6609884","source":"documentation","title":"Install Tailwind CSS with Laravel - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/laravel/vite","text":"Example:\n```text\nlaravel new my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), // … ],})\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source \"../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php\";@source \"../../storage/framework/views/*.php\";@source \"../**/*.blade.php\";@source \"../**/*.js\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<!doctype html><html> <head> <meta charset=\"utf-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> @vite('resources/css/app.css') </head> <body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1> </body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.169Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":218}}116{"id":"doc-install_tailwind_css_with_react_router_tailwind_-03194b11","source":"documentation","title":"Install Tailwind CSS with React Router - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/react-router","text":"Example:\n```text\nnpx create-react-router@latest my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { reactRouter } from \"@react-router/dev/vite\";import { defineConfig } from \"vite\";import tsconfigPaths from \"vite-tsconfig-paths\";import tailwindcss from \"@tailwindcss/vite\";export default defineConfig({ plugins: [ tailwindcss(), reactRouter(), tsconfigPaths(), ],});\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\nexport default function Home() { return ( <h1 className=\"text-3xl font-bold underline\"> Hello world! </h1> )}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":172}}117{"id":"doc-install_tailwind_css_with_next_js_tailwind_css-9ef79a7d","source":"documentation","title":"Install Tailwind CSS with Next.js - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/nextjs","text":"Example:\n```text\nnpx create-next-app@latest my-project --typescript --eslint --appcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/postcss postcss\n```\n\nExample:\n```text\nconst config = { plugins: { \"@tailwindcss/postcss\": {}, },};export default config;\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\nexport default function Home() { return ( <h1 className=\"text-3xl font-bold underline\"> Hello world! </h1> )}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":131}}118{"id":"doc-install_tailwind_css_with_meteor_tailwind_css-0b1167cd","source":"documentation","title":"Install Tailwind CSS with Meteor - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/meteor","text":"Example:\n```text\nnpx meteor create my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/postcss postcss postcss-load-config\n```\n\nExample:\n```text\nexport default { plugins: { \"@tailwindcss/postcss\": {}, },};\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run start\n```\n\nExample:\n```text\nexport const App = () => ( <h1 className=\"text-3xl font-bold underline\"> Hello world! </h1>)\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":115}}119{"id":"doc-install_tailwind_css_with_adonisjs_tailwind_css-d8808c7c","source":"documentation","title":"Install Tailwind CSS with AdonisJS - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/adonisjs","text":"Example:\n```text\nnpm init adonisjs@latest my-project -- --kit=webcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite'import adonisjs from '@adonisjs/vite/client'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), adonisjs({ // … }), ],})\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source \"../views\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<!doctype html><html> <head> <meta charset=\"utf-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1> </body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":205}}120{"id":"doc-install_tailwind_css_with_nuxt_tailwind_css-3758faa8","source":"documentation","title":"Install Tailwind CSS with Nuxt - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/nuxt","text":"Example:\n```text\nnpm create nuxt my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport tailwindcss from \"@tailwindcss/vite\";export default defineNuxtConfig({ compatibilityDate: \"2025-07-15\", devtools: { enabled: true }, vite: { plugins: [ tailwindcss(), ], },});\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nimport tailwindcss from \"@tailwindcss/vite\";export default defineNuxtConfig({ compatibilityDate: \"2025-07-15\", devtools: { enabled: true }, css: ['~/assets/css/main.css'], vite: { plugins: [ tailwindcss(), ], },});\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n<template> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1></template>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":200}}121{"id":"doc-install_tailwind_css_with_gatsby_tailwind_css-59bd4596","source":"documentation","title":"Install Tailwind CSS with Gatsby - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/gatsby","text":"Example:\n```text\ngatsby new my-projectcd my-project\n```\n\nExample:\n```text\nnpm install @tailwindcss/postcss tailwindcss postcss gatsby-plugin-postcss\n```\n\nExample:\n```text\nmodule.exports = { plugins: [ 'gatsby-plugin-postcss', // ... ],}\n```\n\nExample:\n```text\nmodule.exports = { plugins: { \"@tailwindcss/postcss\": {}, },};\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nimport './src/styles/global.css';\n```\n\nExample:\n```text\ngatsby develop\n```\n\nExample:\n```text\nexport default function IndexPage() { return ( <Layout> <h1 className=\"text-3xl font-bold underline\"> Hello world! </h1> </Layout> )}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":168}}122{"id":"doc-install_tailwind_css_with_solidjs_tailwind_css-7b44c539","source":"documentation","title":"Install Tailwind CSS with SolidJS - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/solidjs","text":"Example:\n```text\nnpx degit solidjs/templates/js my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite';import solidPlugin from 'vite-plugin-solid';import tailwindcss from '@tailwindcss/vite';export default defineConfig({ plugins: [ tailwindcss(), solidPlugin(), ], server: { port: 3000, }, build: { target: 'esnext', },});\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\nexport default function App() { return ( <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1> )}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.170Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":167}}123{"id":"doc-install_tailwind_css_with_symfony_tailwind_css-e5dae23c","source":"documentation","title":"Install Tailwind CSS with Symfony - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/symfony","text":"Example:\n```text\nsymfony new --webapp my-projectcd my-project\n```\n\nExample:\n```text\ncomposer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundlecomposer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/postcss postcss postcss-loader\n```\n\nExample:\n```text\nEncore .enablePostCssLoader();\n```\n\nExample:\n```text\nexport default { plugins: { \"@tailwindcss/postcss\": {}, },};\n```\n\nExample:\n```text\n@import \"tailwindcss\";@source not \"../../public\";\n```\n\nExample:\n```text\nnpm run watch\n```\n\nExample:\n```text\n<!doctype html><html> <head> <meta charset=\"utf-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} </head> <body> <h1 class=\"text-3xl font-bold underline\"> Hello world! </h1> </body></html>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":242}}124{"id":"doc-install_tailwind_css_with_tanstack_start_tailwin-ac63d29a","source":"documentation","title":"Install Tailwind CSS with TanStack Start - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/tanstack-start","text":"Example:\n```text\nnpx create-start-app@latest my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { tanstackStart } from '@tanstack/react-start/plugin/vite';import { defineConfig } from 'vite';import tsConfigPaths from 'vite-tsconfig-paths';import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss() tanstackStart(), tsConfigPaths(), ]});\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\n// other imports...import appCss from '../styles.css?url'export const Route = createRootRoute({ head: () => ({ meta: [ // your meta tags and site config ], links: [{ rel: 'stylesheet', href: appCss }], // other head config }), component: RootComponent,})\n```\n\nExample:\n```text\nimport { createFileRoute } from '@tanstack/react-router'export const Route = createFileRoute('/')({ component: App,})function App() { return ( <h1 className=\"text-3xl font-bold underline\"> Hello World! </h1> )}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":265}}125{"id":"doc-install_tailwind_css_with_astro_tailwind_css-5a7dcaf0","source":"documentation","title":"Install Tailwind CSS with Astro - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/astro","text":"Example:\n```text\nnpm create astro@latest my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\n// @ts-checkimport { defineConfig } from \"astro/config\";import tailwindcss from \"@tailwindcss/vite\";// https://astro.build/configexport default defineConfig({ vite: { plugins: [tailwindcss()], },});\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\n---import \"../styles/global.css\";---<h1 class=\"text-3xl font-bold underline\"> Hello world!</h1>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":143}}126{"id":"doc-install_tailwind_css_with_phoenix_tailwind_css-84ace7eb","source":"documentation","title":"Install Tailwind CSS with Phoenix - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/phoenix","text":"Example:\n```text\nmix phx.new myprojectcd myproject\n```\n\nExample:\n```text\ndefp deps do [ # … {:tailwind, \"~> 0.3\", runtime: Mix.env() == :dev}, ]end\n```\n\nExample:\n```text\nconfig :tailwind, version: \"4.1.10\", myproject: [ args: ~w( --input=assets/css/app.css --output=priv/static/assets/app.css ), cd: Path.expand(\"..\", __DIR__) ]\n```\n\nExample:\n```text\ndefp aliases do [ # … \"assets.deploy\": [ \"tailwind myproject --minify\", \"esbuild myproject --minify\", \"phx.digest\" ] ]end\n```\n\nExample:\n```text\nwatchers: [ # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args) esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]}, tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]}]\n```\n\nExample:\n```text\nmix tailwind.install\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\n// Remove this line if you add your own CSS build pipeline (e.g postcss).import \"../css/app.css\"\n```\n\nExample:\n```text\nmix phx.server\n```\n\nExample:\n```text\n<h1 class=\"text-3xl font-bold underline\"> Hello world!</h1>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":51,"estimatedTokens":285}}127{"id":"doc-install_tailwind_css_with_qwik_tailwind_css-0b2db324","source":"documentation","title":"Install Tailwind CSS with Qwik - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/qwik","text":"Example:\n```text\nnpm create qwik@latest empty my-projectcd my-project\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/vite\n```\n\nExample:\n```text\nimport { defineConfig } from 'vite'import { qwikVite } from \"@builder.io/qwik/optimizer\";import { qwikCity } from \"@builder.io/qwik-city/vite\";// …import tailwindcss from '@tailwindcss/vite'export default defineConfig(({ command, mode }): UserConfig => { return { plugins: [ tailwindcss(), qwikCity(), qwikVite(), tsconfigPaths(), ], // … }})\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\nimport { component$ } from '@builder.io/qwik'export default component$(() => { return ( <h1 class=\"text-3xl font-bold underline\"> Hello World! </h1> )})\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":204}}128{"id":"doc-install_tailwind_css_with_rspack_tailwind_css-b51a39b5","source":"documentation","title":"Install Tailwind CSS with Rspack - Tailwind CSS","url":"https://tailwindcss.com/docs/installation/framework-guides/rspack/react","text":"Example:\n```text\nnpm create rspack@latest\n```\n\nExample:\n```text\nnpm install tailwindcss @tailwindcss/postcss postcss postcss-loader\n```\n\nExample:\n```text\nexport default defineConfig({ // ... module: { rules: [ { test: /\\.css$/, use: [\"postcss-loader\"], type: \"css\", }, // ... ], },}\n```\n\nExample:\n```text\nexport default { plugins: { \"@tailwindcss/postcss\": {}, },};\n```\n\nExample:\n```text\n@import \"tailwindcss\";\n```\n\nExample:\n```text\nnpm run dev\n```\n\nExample:\n```text\nexport default function App() { return ( <h1 className=\"text-3xl font-bold underline\"> Hello world! </h1> )}\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.171Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":164}}129{"id":"doc-background_repeat_backgrounds_tailwind_css-331518c5","source":"documentation","title":"background-repeat - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-repeat","text":"Example:\n```text\n<div class=\"bg-[url(/img/clouds.svg)] bg-center bg-repeat ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-repeat md:bg-repeat-x ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.172Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":167}}130{"id":"doc-tab_size_typography_tailwind_css-481a1730","source":"documentation","title":"tab-size - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/tab-size","text":"Example:\n```text\nfunction indent() {\treturn 'tabbed';}\n```\n\nExample:\n```text\n<pre class=\"tab-2 ...\">function indent() { 	return 'tabbed' }</pre><pre class=\"tab-8 ...\">function indent() { 	return 'tabbed' }</pre>\n```\n\nExample:\n```text\n<pre class=\"tab-[12px] ...\"> <!-- ... --></pre>\n```\n\nExample:\n```text\n<pre class=\"tab-(--my-tab-size) ...\"> <!-- ... --></pre>\n```\n\nExample:\n```text\n<pre class=\"tab-4 md:tab-8 ...\"> <!-- ... --></pre>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.172Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":120}}131{"id":"doc-background_position_backgrounds_tailwind_css-0e830460","source":"documentation","title":"background-position - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-position","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] bg-top-left\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-top\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-top-right\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-left\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-center\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-right\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-bottom-left\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-bottom\"></div><div class=\"bg-[url(/img/mountains.jpg)] bg-bottom-right\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-position-[center_top_1rem] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-position-(--my-bg-position) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-center md:bg-top ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.172Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":207}}132{"id":"doc-hyphens_typography_tailwind_css-5ee03275","source":"documentation","title":"hyphens - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/hyphens","text":"Example:\n```text\n<p class=\"hyphens-none\"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>\n```\n\nExample:\n```text\n<p class=\"hyphens-manual\"> ... Kraftfahrzeug­haftpflichtversicherung is a ...</p>\n```\n\nExample:\n```text\n<p class=\"hyphens-auto\" lang=\"de\"> ... Kraftfahrzeughaftpflichtversicherung is a ...</p>\n```\n\nExample:\n```text\n<p class=\"hyphens-none md:hyphens-auto ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.172Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":111}}133{"id":"doc-overflow_wrap_typography_tailwind_css-e5763e0d","source":"documentation","title":"overflow-wrap - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/overflow-wrap","text":"Example:\n```text\n<p class=\"wrap-break-word\">The longest word in any of the major...</p>\n```\n\nExample:\n```text\n<div class=\"flex max-w-sm\"> <img class=\"size-16 rounded-full\" src=\"/img/profile.jpg\" /> <div class=\"wrap-break-word\"> <p class=\"font-medium\">Jay Riemenschneider</p> <p>jason.riemenschneider@vandelayindustries.com</p> </div></div><div class=\"flex max-w-sm\"> <img class=\"size-16 rounded-full\" src=\"/img/profile.jpg\" /> <div class=\"wrap-anywhere\"> <p class=\"font-medium\">Jay Riemenschneider</p> <p>jason.riemenschneider@vandelayindustries.com</p> </div></div>\n```\n\nExample:\n```text\n<p class=\"wrap-normal\">The longest word in any of the major...</p>\n```\n\nExample:\n```text\n<p class=\"wrap-normal md:wrap-break-word ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.172Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":199}}134{"id":"doc-background_attachment_backgrounds_tailwind_css-5a07c386","source":"documentation","title":"background-attachment - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-attachment","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] bg-fixed ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] bg-local ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] bg-scroll ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-local md:bg-fixed ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.173Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":97}}135{"id":"doc-vertical_align_typography_tailwind_css-530a7217","source":"documentation","title":"vertical-align - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/vertical-align","text":"Example:\n```text\n<span class=\"inline-block align-baseline\">The quick brown fox...</span>\n```\n\nExample:\n```text\n<span class=\"inline-block align-top\">The quick brown fox...</span>\n```\n\nExample:\n```text\n<span class=\"inline-block align-middle\">The quick brown fox...</span>\n```\n\nExample:\n```text\n<span class=\"inline-block align-bottom\">The quick brown fox...</span>\n```\n\nExample:\n```text\n<span class=\"inline-block align-text-top\">The quick brown fox...</span>\n```\n\nExample:\n```text\n<span class=\"inline-block align-text-bottom\">The quick brown fox...</span>\n```\n\nExample:\n```text\n<span class=\"align-[4px] ...\"> <!-- ... --></span>\n```\n\nExample:\n```text\n<span class=\"align-(--my-alignment) ...\"> <!-- ... --></span>\n```\n\nExample:\n```text\n<span class=\"align-middle md:align-top ...\"> <!-- ... --></span>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.173Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":205}}136{"id":"doc-mask_composite_effects_tailwind_css-ec8f6e3f","source":"documentation","title":"mask-composite - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-composite","text":"Example:\n```text\n<div class=\"mask-add mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]\"></div><div class=\"mask-subtract mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]\"></div><div class=\"mask-intersect mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]\"></div><div class=\"mask-exclude mask-[url(/img/circle.png),url(/img/circle.png)] mask-position-[30%_50%,70%_50%] bg-[url(/img/mountains.jpg)]\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-add md:mask-subtract ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.173Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":172}}137{"id":"doc-mask_clip_effects_tailwind_css-333ace7f","source":"documentation","title":"mask-clip - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-clip","text":"Example:\n```text\n<div class=\"mask-clip-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-clip-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-clip-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-clip-border md:mask-clip-padding ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.173Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":118}}138{"id":"doc-background_size_backgrounds_tailwind_css-c4601ebc","source":"documentation","title":"background-size - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-size","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] bg-cover bg-center\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] bg-contain bg-center\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-size-[auto_100px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-size-(--my-image-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-auto md:bg-contain ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.173Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":137}}139{"id":"doc-background_image_backgrounds_tailwind_css-e1a29b07","source":"documentation","title":"background-image - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-image","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"h-14 bg-linear-to-r from-cyan-500 to-blue-500\"></div><div class=\"h-14 bg-linear-to-t from-sky-500 to-indigo-500\"></div><div class=\"h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500\"></div><div class=\"h-14 bg-linear-65 from-purple-500 to-pink-500\"></div>\n```\n\nExample:\n```text\n<div class=\"size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700\"></div><div class=\"size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%\"></div><div class=\"size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%\"></div>\n```\n\nExample:\n```text\n<div class=\"size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%\"></div><div class=\"size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600\"></div><div class=\"size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-linear-to-r/srgb from-indigo-500 to-teal-400\"></div><div class=\"bg-linear-to-r/hsl from-indigo-500 to-teal-400\"></div><div class=\"bg-linear-to-r/oklab from-indigo-500 to-teal-400\"></div><div class=\"bg-linear-to-r/oklch from-indigo-500 to-teal-400\"></div><div class=\"bg-linear-to-r/longer from-indigo-500 to-teal-400\"></div><div class=\"bg-linear-to-r/shorter from-indigo-500 to-teal-400\"></div><div class=\"bg-linear-to-r/increasing from-indigo-500 to-teal-400\"></div><div class=\"bg-linear-to-r/decreasing from-indigo-500 to-teal-400\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-none\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-linear-(--my-gradient) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"from-purple-400 md:from-yellow-500 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<div class=\"from-regal-blue\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.174Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":66,"estimatedTokens":570}}140{"id":"doc-outline_style_borders_tailwind_css-6c1af0cd","source":"documentation","title":"outline-style - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/outline-style","text":"Example:\n```text\n<button class=\"outline-2 outline-offset-2 outline-solid ...\">Button A</button><button class=\"outline-2 outline-offset-2 outline-dashed ...\">Button B</button><button class=\"outline-2 outline-offset-2 outline-dotted ...\">Button C</button><button class=\"outline-3 outline-offset-2 outline-double ...\">Button D</button>\n```\n\nExample:\n```text\n<input class=\"focus:border-indigo-600 focus:outline-hidden ...\" type=\"text\" />\n```\n\nExample:\n```text\n<div class=\"focus-within:outline-2 focus-within:outline-indigo-600 ...\"> <textarea class=\"outline-none ...\" placeholder=\"Leave a comment...\" /> <button class=\"...\" type=\"button\">Post</button></div>\n```\n\nExample:\n```text\n<div class=\"outline md:outline-dashed ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.174Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":190}}141{"id":"doc-outline_offset_borders_tailwind_css-22e4cd76","source":"documentation","title":"outline-offset - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/outline-offset","text":"Example:\n```text\n<button class=\"outline-2 outline-offset-0 ...\">Button A</button><button class=\"outline-2 outline-offset-2 ...\">Button B</button><button class=\"outline-2 outline-offset-4 ...\">Button C</button>\n```\n\nExample:\n```text\n<div class=\"outline-offset-[2vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"outline-offset-(--my-outline-offset) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"outline md:outline-offset-2 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.174Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":124}}142{"id":"doc-outline_width_borders_tailwind_css-e15815ea","source":"documentation","title":"outline-width - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/outline-width","text":"Example:\n```text\n<button class=\"outline outline-offset-2 ...\">Button A</button><button class=\"outline-2 outline-offset-2 ...\">Button B</button><button class=\"outline-4 outline-offset-2 ...\">Button C</button>\n```\n\nExample:\n```text\n<button class=\"outline-offset-2 outline-sky-500 focus:outline-2 ...\">Save Changes</button>\n```\n\nExample:\n```text\n<div class=\"outline-[2vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"outline-(length:--my-outline-width) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"outline md:outline-2 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.174Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":148}}143{"id":"doc-border_radius_borders_tailwind_css-51900926","source":"documentation","title":"border-radius - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/border-radius","text":"Example:\n```text\n<div class=\"rounded-sm ...\"></div><div class=\"rounded-md ...\"></div><div class=\"rounded-lg ...\"></div><div class=\"rounded-xl ...\"></div>\n```\n\nExample:\n```text\n<div class=\"rounded-t-lg ...\"></div><div class=\"rounded-r-lg ...\"></div><div class=\"rounded-b-lg ...\"></div><div class=\"rounded-l-lg ...\"></div>\n```\n\nExample:\n```text\n<div class=\"rounded-tl-lg ...\"></div><div class=\"rounded-tr-lg ...\"></div><div class=\"rounded-br-lg ...\"></div><div class=\"rounded-bl-lg ...\"></div>\n```\n\nExample:\n```text\n<div dir=\"ltr\"> <div class=\"rounded-s-lg ...\"></div></div><div dir=\"rtl\"> <div class=\"rounded-s-lg ...\"></div></div>\n```\n\nExample:\n```text\n<button class=\"rounded-full ...\">Save Changes</button>\n```\n\nExample:\n```text\n<button class=\"rounded-none ...\">Save Changes</button>\n```\n\nExample:\n```text\n<div class=\"rounded-[2vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"rounded-(--my-radius) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"rounded md:rounded-lg ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --radius-5xl: 3rem; }\n```\n\nExample:\n```text\n<div class=\"rounded-5xl\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.175Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":56,"estimatedTokens":291}}144{"id":"doc-opacity_effects_tailwind_css-891adafb","source":"documentation","title":"opacity - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/opacity","text":"Example:\n```text\n<button class=\"bg-indigo-500 opacity-100 ...\"></button><button class=\"bg-indigo-500 opacity-75 ...\"></button><button class=\"bg-indigo-500 opacity-50 ...\"></button><button class=\"bg-indigo-500 opacity-25 ...\"></button>\n```\n\nExample:\n```text\n<input class=\"opacity-100 disabled:opacity-75 ...\" type=\"text\" />\n```\n\nExample:\n```text\n<button class=\"opacity-[.67] ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"opacity-(--my-opacity) ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"opacity-50 md:opacity-100 ...\"> <!-- ... --></button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.175Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":151}}145{"id":"doc-mix_blend_mode_effects_tailwind_css-57a075c1","source":"documentation","title":"mix-blend-mode - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mix-blend-mode","text":"Example:\n```text\n<div class=\"flex justify-center -space-x-14\"> <div class=\"bg-blue-500 mix-blend-multiply ...\"></div> <div class=\"bg-pink-500 mix-blend-multiply ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"isolate flex justify-center -space-x-14\"> <div class=\"bg-yellow-500 mix-blend-multiply ...\"></div> <div class=\"bg-green-500 mix-blend-multiply ...\"></div></div><div class=\"flex justify-center -space-x-14\"> <div class=\"bg-yellow-500 mix-blend-multiply ...\"></div> <div class=\"bg-green-500 mix-blend-multiply ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"mix-blend-multiply md:mix-blend-overlay ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.175Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":166}}146{"id":"doc-border_style_borders_tailwind_css-98f8c5ff","source":"documentation","title":"border-style - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/border-style","text":"Example:\n```text\n<div class=\"border-2 border-solid ...\"></div><div class=\"border-2 border-dashed ...\"></div><div class=\"border-2 border-dotted ...\"></div><div class=\"border-4 border-double ...\"></div>\n```\n\nExample:\n```text\n<button class=\"border-none ...\">Save Changes</button>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 divide-x-3 divide-dashed divide-indigo-500\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"border-solid md:border-dotted ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.175Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":133}}147{"id":"doc-background_blend_mode_effects_tailwind_css-c12cf046","source":"documentation","title":"background-blend-mode - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/background-blend-mode","text":"Example:\n```text\n<div class=\"bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-multiply ...\"></div><div class=\"bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-soft-light ...\"></div><div class=\"bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-overlay ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-blue-500 bg-[url(/img/mountains.jpg)] bg-blend-lighten md:bg-blend-darken ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.176Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":105}}148{"id":"doc-mask_mode_effects_tailwind_css-68c5966e","source":"documentation","title":"mask-mode - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-mode","text":"Example:\n```text\n<div class=\"mask-alpha mask-r-from-black mask-r-from-50% mask-r-to-transparent bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-luminance mask-r-from-white mask-r-from-50% mask-r-to-black bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-alpha md:mask-luminance ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.176Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":90}}149{"id":"doc-background_color_backgrounds_tailwind_css-80d7c976","source":"documentation","title":"background-color - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-color","text":"Example:\n```text\n<button class=\"bg-blue-500 ...\">Button A</button><button class=\"bg-cyan-500 ...\">Button B</button><button class=\"bg-pink-500 ...\">Button C</button>\n```\n\nExample:\n```text\n<button class=\"bg-sky-500/100 ...\"></button><button class=\"bg-sky-500/75 ...\"></button><button class=\"bg-sky-500/50 ...\"></button>\n```\n\nExample:\n```text\n<div class=\"bg-[#50d71e] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"bg-(--my-color) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<button class=\"bg-indigo-500 hover:bg-fuchsia-500 ...\">Save changes</button>\n```\n\nExample:\n```text\n<div class=\"bg-blue-500 md:bg-green-500 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<div class=\"bg-regal-blue\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.176Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":201}}150{"id":"doc-border_width_borders_tailwind_css-bb8718fe","source":"documentation","title":"border-width - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/border-width","text":"Example:\n```text\n<div class=\"border border-indigo-600 ...\"></div><div class=\"border-2 border-indigo-600 ...\"></div><div class=\"border-4 border-indigo-600 ...\"></div><div class=\"border-8 border-indigo-600 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"border-t-4 border-indigo-500 ...\"></div><div class=\"border-r-4 border-indigo-500 ...\"></div><div class=\"border-b-4 border-indigo-500 ...\"></div><div class=\"border-l-4 border-indigo-500 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"border-x-4 border-indigo-500 ...\"></div><div class=\"border-y-4 border-indigo-500 ...\"></div>\n```\n\nExample:\n```text\n<div dir=\"ltr\"> <div class=\"border-s-4 ...\"></div></div><div dir=\"rtl\"> <div class=\"border-s-4 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"border-bs-4 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 divide-x-4\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-col-reverse divide-y-4 divide-y-reverse divide-gray-200\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"border-[2vw] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"border-(length:--my-border-width) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"border-2 md:border-t-4 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.177Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":51,"estimatedTokens":326}}151{"id":"doc-mask_origin_effects_tailwind_css-0108c52b","source":"documentation","title":"mask-origin - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-origin","text":"Example:\n```text\n<div class=\"mask-origin-border border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-origin-padding border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-origin-content border-3 p-1.5 mask-[url(/img/circle.png)] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-origin-border md:mask-origin-padding ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.177Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":121}}152{"id":"doc-backdrop_filter_filters_tailwind_css-ce524788","source":"documentation","title":"backdrop-filter - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)] ...\"> <div class=\"backdrop-blur-xs ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)] ...\"> <div class=\"backdrop-grayscale ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)] ...\"> <div class=\"backdrop-blur-xs backdrop-grayscale ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-blur-md backdrop-brightness-150 md:backdrop-filter-none\"></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-filter-[url('filters.svg#filter-id')] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-filter-(--my-backdrop-filter) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-blur-sm hover:backdrop-filter-none ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-blur-sm md:backdrop-filter-none ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.177Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":214}}153{"id":"doc-outline_color_borders_tailwind_css-ef7c48b7","source":"documentation","title":"outline-color - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/outline-color","text":"Example:\n```text\n<button class=\"outline-2 outline-offset-2 outline-blue-500 ...\">Button A</button><button class=\"outline-2 outline-offset-2 outline-cyan-500 ...\">Button B</button><button class=\"outline-2 outline-offset-2 outline-pink-500 ...\">Button C</button>\n```\n\nExample:\n```text\n<button class=\"outline-2 outline-blue-500/100 ...\">Button A</button><button class=\"outline-2 outline-blue-500/75 ...\">Button B</button><button class=\"outline-2 outline-blue-500/50 ...\">Button C</button>\n```\n\nExample:\n```text\n<div class=\"outline-[#243c5a] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"outline-(--my-color) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"outline md:outline-blue-400 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<div class=\"outline-regal-blue\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.179Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":222}}154{"id":"doc-mask_size_effects_tailwind_css-4d4b9a09","source":"documentation","title":"mask-size - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-size","text":"Example:\n```text\n<div class=\"mask-cover mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-contain mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-auto mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-size-[auto_100px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-size-(--my-mask-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-auto md:mask-contain ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.179Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":155}}155{"id":"doc-mask_type_effects_tailwind_css-3d406b6a","source":"documentation","title":"mask-type - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-type","text":"Example:\n```text\n<svg> <mask id=\"blob1\" class=\"mask-type-alpha fill-gray-700/70\"> <path d=\"...\"></path> </mask> <image href=\"/img/mountains.jpg\" height=\"100%\" width=\"100%\" mask=\"url(#blob1)\" /></svg><svg> <mask id=\"blob2\" class=\"mask-type-luminance fill-gray-700/70\"> <path d=\"...\"></path> </mask> <image href=\"/img/mountains.jpg\" height=\"100%\" width=\"100%\" mask=\"url(#blob2)\" /></svg>\n```\n\nExample:\n```text\n<mask class=\"mask-type-alpha md:mask-type-luminance ...\"> <!-- ... --></mask>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.179Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":129}}156{"id":"doc-mask_image_effects_tailwind_css-a2fa243e","source":"documentation","title":"mask-image - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-image","text":"Example:\n```text\n<div class=\"mask-[url(/img/scribble.png)] bg-[url(/img/mountains.jpg)] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-t-from-50% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-r-from-30% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-x-from-70% mask-x-to-90% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-y-from-70% mask-y-to-90% bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"-mask-linear-50 mask-linear-from-60% mask-linear-to-80% bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"flex items-center gap-4\"> <img class=\"mask-radial-[100%_100%] mask-radial-from-75% mask-radial-at-left ...\" src=\"/img/keyboard.png\" /> <div class=\"font-medium\"> <p class=\"font-mono text-xs text-blue-500 uppercase dark:text-blue-400\">Speed</p> <p class=\"mt-2 text-base text-gray-700 dark:text-gray-300\">Built for power users</p> <p class=\"mt-1 text-sm leading-relaxed text-balance text-gray-500\"> Work faster than ever with customizable keyboard shortcuts </p> </div></div>\n```\n\nExample:\n```text\n<div class=\"mask-radial-at-top-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-top mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-top-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-center mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-bottom-left mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-bottom mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-at-bottom-right mask-radial-from-100% bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-radial-closest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-closest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-farthest-side mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-radial-farthest-corner mask-radial-from-100% mask-radial-at-[30%_30%] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"flex items-center gap-5 rounded-xl bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800\"> <div class=\"grid grid-cols-1 grid-rows-1\"> <div class=\"border-4 border-gray-100 dark:border-gray-700 ...\"></div> <div class=\"border-4 border-amber-500 mask-conic-from-75% mask-conic-to-75% dark:border-amber-400 ...\"></div> </div> <div class=\"w-0 flex-1 text-sm text-gray-950 dark:text-white\"> <p class=\"font-medium\">Storage used: 75%</p> <p class=\"mt-1 text-gray-500 dark:text-gray-400\"><span class=\"font-medium\">0.48 GB</span> out of 2 GB remaining</p> </div></div>\n```\n\nExample:\n```text\n<div class=\"mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-none\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-linear-[70deg,transparent_10%,black,transparent_80%] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-linear-(--my-mask) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-radial-from-70% md:mask-radial-from-50% ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<div class=\"mask-radial-from-regal-blue\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.180Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":15,"totalLines":76,"estimatedTokens":1055}}157{"id":"doc-filter_grayscale_filters_tailwind_css-13592876","source":"documentation","title":"filter: grayscale() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-grayscale","text":"Example:\n```text\n<img class=\"grayscale-0 ...\" src=\"/img/mountains.jpg\" /><img class=\"grayscale-25 ...\" src=\"/img/mountains.jpg\" /><img class=\"grayscale-50 ...\" src=\"/img/mountains.jpg\" /><img class=\"grayscale ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"grayscale-[0.5] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"grayscale-(--my-grayscale) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"grayscale md:grayscale-0 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.180Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":132}}158{"id":"doc-text_shadow_effects_tailwind_css-045b5b0a","source":"documentation","title":"text-shadow - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/text-shadow","text":"Example:\n```text\n<p class=\"text-shadow-2xs ...\">The quick brown fox...</p><p class=\"text-shadow-xs ...\">The quick brown fox...</p><p class=\"text-shadow-sm ...\">The quick brown fox...</p><p class=\"text-shadow-md ...\">The quick brown fox...</p><p class=\"text-shadow-lg ...\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"text-shadow-lg ...\">The quick brown fox...</p><p class=\"text-shadow-lg/20 ...\">The quick brown fox...</p><p class=\"text-shadow-lg/30 ...\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<button class=\"text-sky-950 text-shadow-2xs text-shadow-sky-300 ...\">Book a demo</button><button class=\"text-gray-950 dark:text-white dark:text-shadow-2xs ...\">See pricing</button>\n```\n\nExample:\n```text\n<p class=\"text-shadow-lg dark:text-shadow-none\"> <!-- ... --></p>\n```\n\nExample:\n```text\n<p class=\"text-shadow-[0_35px_35px_rgb(0_0_0_/_0.25)] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"text-shadow-(--my-text-shadow) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"text-shadow-none md:text-shadow-lg ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --text-shadow-xl: 0 35px 35px rgb(0, 0, 0 / 0.25); }\n```\n\nExample:\n```text\n<p class=\"text-shadow-xl\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<p class=\"text-shadow-regal-blue\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.181Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":56,"estimatedTokens":365}}159{"id":"doc-filter_blur_filters_tailwind_css-a913cfd9","source":"documentation","title":"filter: blur() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-blur","text":"Example:\n```text\n<img class=\"blur-none\" src=\"/img/mountains.jpg\" /><img class=\"blur-sm\" src=\"/img/mountains.jpg\" /><img class=\"blur-lg\" src=\"/img/mountains.jpg\" /><img class=\"blur-2xl\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"blur-[2px] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"blur-(--my-blur) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"blur-none md:blur-lg ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n@theme { --blur-2xs: 2px; }\n```\n\nExample:\n```text\n<img class=\"blur-2xs\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.181Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":151}}160{"id":"doc-filter_contrast_filters_tailwind_css-b5d3cf28","source":"documentation","title":"filter: contrast() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-contrast","text":"Example:\n```text\n<img class=\"contrast-50 ...\" src=\"/img/mountains.jpg\" /><img class=\"contrast-100 ...\" src=\"/img/mountains.jpg\" /><img class=\"contrast-125 ...\" src=\"/img/mountains.jpg\" /><img class=\"contrast-200 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"contrast-[.25] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"contrast-(--my-contrast) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"contrast-125 md:contrast-150 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.182Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":133}}161{"id":"doc-filter_filters_tailwind_css-42072f36","source":"documentation","title":"filter - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter","text":"Example:\n```text\n<img class=\"blur-xs\" src=\"/img/mountains.jpg\" /><img class=\"grayscale\" src=\"/img/mountains.jpg\" /><img class=\"blur-xs grayscale\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"blur-md brightness-150 invert md:filter-none\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"filter-[url('filters.svg#filter-id')] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"filter-(--my-filter) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"blur-sm hover:filter-none ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"blur-sm md:filter-none ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.182Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":169}}162{"id":"doc-filter_hue_rotate_filters_tailwind_css-f585471a","source":"documentation","title":"filter: hue-rotate() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-hue-rotate","text":"Example:\n```text\n<img class=\"hue-rotate-15\" src=\"/img/mountains.jpg\" /><img class=\"hue-rotate-90\" src=\"/img/mountains.jpg\" /><img class=\"hue-rotate-180\" src=\"/img/mountains.jpg\" /><img class=\"hue-rotate-270\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"-hue-rotate-15\" src=\"/img/mountains.jpg\" /><img class=\"-hue-rotate-45\" src=\"/img/mountains.jpg\" /><img class=\"-hue-rotate-90\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"hue-rotate-[3.142rad] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"hue-rotate-(--my-hue-rotate) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"hue-rotate-60 md:hue-rotate-0 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.182Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":181}}163{"id":"doc-filter_brightness_filters_tailwind_css-76feebcf","source":"documentation","title":"filter: brightness() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-brightness","text":"Example:\n```text\n<img class=\"brightness-50 ...\" src=\"/img/mountains.jpg\" /><img class=\"brightness-100 ...\" src=\"/img/mountains.jpg\" /><img class=\"brightness-125 ...\" src=\"/img/mountains.jpg\" /><img class=\"brightness-200 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"brightness-[1.75] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"brightness-(--my-brightness) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"brightness-110 md:brightness-150 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.182Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":138}}164{"id":"doc-filter_invert_filters_tailwind_css-23fc46b7","source":"documentation","title":"filter: invert() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-invert","text":"Example:\n```text\n<img class=\"invert-0\" src=\"/img/mountains.jpg\" /><img class=\"invert-20\" src=\"/img/mountains.jpg\" /><img class=\"invert\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"invert-[.25] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"invert-(--my-inversion) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"invert md:invert-0 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.182Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":110}}165{"id":"doc-mask_repeat_effects_tailwind_css-a0b55306","source":"documentation","title":"mask-repeat - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-repeat","text":"Example:\n```text\n<div class=\"mask-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-repeat-x mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-repeat-y mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)]...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-repeat-space mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-repeat-round mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-no-repeat mask-[url(/img/circle.png)] mask-size-[50px_50px] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-repeat md:mask-repeat-x ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.182Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":235}}166{"id":"doc-filter_saturate_filters_tailwind_css-160fa6ef","source":"documentation","title":"filter: saturate() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-saturate","text":"Example:\n```text\n<img class=\"saturate-50 ...\" src=\"/img/mountains.jpg\" /><img class=\"saturate-100 ...\" src=\"/img/mountains.jpg\" /><img class=\"saturate-150 ...\" src=\"/img/mountains.jpg\" /><img class=\"saturate-200 ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"saturate-[.25] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"saturate-(--my-saturation) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"saturate-50 md:saturate-150 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.183Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":134}}167{"id":"doc-mask_position_effects_tailwind_css-6032e6b9","source":"documentation","title":"mask-position - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/mask-position","text":"Example:\n```text\n<div class=\"mask-top-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-top mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-top-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-center mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-bottom-left mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-bottom mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div><div class=\"mask-bottom-right mask-[url(/img/circle.png)] mask-size-[50%] bg-[url(/img/mountains.jpg)] ...\"></div>\n```\n\nExample:\n```text\n<div class=\"mask-position-[center_top_1rem] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-position-(--my-mask-position) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mask-center md:mask-top ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.183Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":322}}168{"id":"doc-filter_sepia_filters_tailwind_css-b8f49086","source":"documentation","title":"filter: sepia() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-sepia","text":"Example:\n```text\n<img class=\"sepia-0\" src=\"/img/mountains.jpg\" /><img class=\"sepia-50\" src=\"/img/mountains.jpg\" /><img class=\"sepia\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"sepia-[.25] ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"sepia-(--my-sepia) ...\" src=\"/img/mountains.jpg\" />\n```\n\nExample:\n```text\n<img class=\"sepia md:sepia-0 ...\" src=\"/img/mountains.jpg\" />\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.183Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":107}}169{"id":"doc-transition_behavior_transitions_animation_tailwi-b56a14f1","source":"documentation","title":"transition-behavior - Transitions & Animation - Tailwind CSS","url":"https://tailwindcss.com/docs/transition-behavior","text":"Example:\n```text\n<label class=\"peer ...\"> <input type=\"checkbox\" checked /></label><button class=\"hidden transition-all not-peer-has-checked:opacity-0 peer-has-checked:block ...\"> I hide</button><label class=\"peer ...\"> <input type=\"checkbox\" checked /></label><button class=\"hidden transition-all transition-discrete not-peer-has-checked:opacity-0 peer-has-checked:block ...\"> I fade out</button>\n```\n\nExample:\n```text\n<button class=\"transition-discrete md:transition-normal ...\"> <!-- ... --></button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.183Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":132}}170{"id":"doc-transition_property_transitions_animation_tailwi-7492b6cc","source":"documentation","title":"transition-property - Transitions & Animation - Tailwind CSS","url":"https://tailwindcss.com/docs/transition-property","text":"Example:\n```text\n<button class=\"bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ...\"> Save Changes</button>\n```\n\nExample:\n```text\n<button class=\"transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"transition-[height] ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"transition-(--my-properties) ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"transition-none md:transition-all ...\"> <!-- ... --></button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.183Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":162}}171{"id":"doc-transition_duration_transitions_animation_tailwi-cbdfd519","source":"documentation","title":"transition-duration - Transitions & Animation - Tailwind CSS","url":"https://tailwindcss.com/docs/transition-duration","text":"Example:\n```text\n<button class=\"transition duration-150 ease-in-out ...\">Button A</button><button class=\"transition duration-300 ease-in-out ...\">Button B</button><button class=\"transition duration-700 ease-in-out ...\">Button C</button>\n```\n\nExample:\n```text\n<button type=\"button\" class=\"duration-300 motion-reduce:duration-0 ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"duration-[1s,15s] ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"duration-(--my-duration) ...\"> <!-- ... --></button>\n```\n\nExample:\n```text\n<button class=\"duration-0 md:duration-150 ...\"> <!-- ... --></button>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.183Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":160}}172{"id":"doc-backdrop_filter_invert_filters_tailwind_css-69246358","source":"documentation","title":"backdrop-filter: invert() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-invert","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-invert-0 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-invert-65 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-invert ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-invert-[.25] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-invert-(--my-backdrop-inversion) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-invert-0 md:backdrop-invert ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":156}}173{"id":"doc-backdrop_filter_saturate_filters_tailwind_css-2403c592","source":"documentation","title":"backdrop-filter: saturate() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-saturate","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-saturate-50 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-saturate-125 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-saturate-200 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-saturate-[.25] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-saturate-(--my-backdrop-saturation) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-saturate-50 md:backdrop-saturate-150 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":163}}174{"id":"doc-backdrop_filter_contrast_filters_tailwind_css-efd8982f","source":"documentation","title":"backdrop-filter: contrast() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-contrast","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-contrast-50 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-contrast-200 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-contrast-[.25] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-contrast-(--my-backdrop-contrast) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-contrast-125 md:backdrop-contrast-150 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":136}}175{"id":"doc-backdrop_filter_sepia_filters_tailwind_css-209d8a05","source":"documentation","title":"backdrop-filter: sepia() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-sepia","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-sepia-0 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-sepia-50 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-sepia ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-sepia-[.25] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-sepia-(--my-backdrop-sepia) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-sepia md:backdrop-sepia-0 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":154}}176{"id":"doc-backdrop_filter_grayscale_filters_tailwind_css-f1f9ba2a","source":"documentation","title":"backdrop-filter: grayscale() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-grayscale","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-grayscale-0 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-grayscale-50 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-grayscale-200 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-grayscale-[0.5] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-grayscale-(--my-backdrop-grayscale) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-grayscale md:backdrop-grayscale-0 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":163}}177{"id":"doc-caption_side_tables_tailwind_css-59b522e3","source":"documentation","title":"caption-side - Tables - Tailwind CSS","url":"https://tailwindcss.com/docs/caption-side","text":"Example:\n```text\n<table> <caption class=\"caption-top\"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>\"Stone Cold\" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret \"The Hitman\" Hart</td> <td>The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<table> <caption class=\"caption-bottom\"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>\"Stone Cold\" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret \"The Hitman\" Hart</td> <td>The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<caption class=\"caption-top md:caption-bottom ...\"> <!-- ... --></caption>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.184Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":295}}178{"id":"doc-border_spacing_tables_tailwind_css-0271ec38","source":"documentation","title":"border-spacing - Tables - Tailwind CSS","url":"https://tailwindcss.com/docs/border-spacing","text":"Example:\n```text\n<table class=\"border-separate border-spacing-2 border border-gray-400 dark:border-gray-500\"> <thead> <tr> <th class=\"border border-gray-300 dark:border-gray-600\">State</th> <th class=\"border border-gray-300 dark:border-gray-600\">City</th> </tr> </thead> <tbody> <tr> <td class=\"border border-gray-300 dark:border-gray-700\">Indiana</td> <td class=\"border border-gray-300 dark:border-gray-700\">Indianapolis</td> </tr> <tr> <td class=\"border border-gray-300 dark:border-gray-700\">Ohio</td> <td class=\"border border-gray-300 dark:border-gray-700\">Columbus</td> </tr> <tr> <td class=\"border border-gray-300 dark:border-gray-700\">Michigan</td> <td class=\"border border-gray-300 dark:border-gray-700\">Detroit</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<table class=\"border-spacing-[7px] ...\"> <!-- ... --></table>\n```\n\nExample:\n```text\n<table class=\"border-spacing-(--my-border-spacing) ...\"> <!-- ... --></table>\n```\n\nExample:\n```text\n<table class=\"border-spacing-2 md:border-spacing-4 ...\"> <!-- ... --></table>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.185Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":293}}179{"id":"doc-filter_drop_shadow_filters_tailwind_css-c4cfdaaf","source":"documentation","title":"filter: drop-shadow() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/filter-drop-shadow","text":"Example:\n```text\n<svg class=\"drop-shadow-md ...\"> <!-- ... --></svg><svg class=\"drop-shadow-lg ...\"> <!-- ... --></svg><svg class=\"drop-shadow-xl ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"fill-white drop-shadow-xl ...\">...</svg><svg class=\"fill-white drop-shadow-xl/25 ...\">...</svg><svg class=\"fill-white drop-shadow-xl/50 ...\">...</svg>\n```\n\nExample:\n```text\n<svg class=\"fill-cyan-500 drop-shadow-lg drop-shadow-cyan-500/50 ...\">...</svg><svg class=\"fill-indigo-500 drop-shadow-lg drop-shadow-indigo-500/50 ...\">...</svg>\n```\n\nExample:\n```text\n<svg class=\"drop-shadow-lg dark:drop-shadow-none\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"drop-shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"drop-shadow-(--my-drop-shadow) ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n<svg class=\"drop-shadow-md md:drop-shadow-xl ...\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n@theme { --drop-shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }\n```\n\nExample:\n```text\n<svg class=\"drop-shadow-3xl\"> <!-- ... --></svg>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<svg class=\"drop-shadow-regal-blue\"> <!-- ... --></svg>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.186Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":56,"estimatedTokens":311}}180{"id":"doc-box_shadow_effects_tailwind_css-6d818c99","source":"documentation","title":"box-shadow - Effects - Tailwind CSS","url":"https://tailwindcss.com/docs/box-shadow","text":"Example:\n```text\n<div class=\"shadow-md ...\"></div><div class=\"shadow-lg ...\"></div><div class=\"shadow-xl ...\"></div>\n```\n\nExample:\n```text\n<div class=\"shadow-xl ...\"></div><div class=\"shadow-xl/20 ...\"></div><div class=\"shadow-xl/30 ...\"></div>\n```\n\nExample:\n```text\n<button class=\"bg-cyan-500 shadow-lg shadow-cyan-500/50 ...\">Subscribe</button><button class=\"bg-blue-500 shadow-lg shadow-blue-500/50 ...\">Subscribe</button><button class=\"bg-indigo-500 shadow-lg shadow-indigo-500/50 ...\">Subscribe</button>\n```\n\nExample:\n```text\n<div class=\"inset-shadow-2xs ...\"></div><div class=\"inset-shadow-xs ...\"></div><div class=\"inset-shadow-sm ...\"></div>\n```\n\nExample:\n```text\n<div class=\"inset-shadow-sm inset-shadow-indigo-500 ...\"></div><div class=\"inset-shadow-sm inset-shadow-indigo-500/50 ...\"></div>\n```\n\nExample:\n```text\n<button class=\"ring ...\">Subscribe</button><button class=\"ring-2 ...\">Subscribe</button><button class=\"ring-4 ...\">Subscribe</button>\n```\n\nExample:\n```text\n<button class=\"ring-2 ring-blue-500 ...\">Subscribe</button><button class=\"ring-2 ring-blue-500/50 ...\">Subscribe</button>\n```\n\nExample:\n```text\n<button class=\"inset-ring ...\">Subscribe</button><button class=\"inset-ring-2 ...\">Subscribe</button><button class=\"inset-ring-4 ...\">Subscribe</button>\n```\n\nExample:\n```text\n<button class=\"inset-ring-2 inset-ring-blue-500 ...\">Subscribe</button><button class=\"inset-ring-2 inset-ring-blue-500/50 ...\">Subscribe</button>\n```\n\nExample:\n```text\n<div class=\"shadow-none ...\"></div>\n```\n\nExample:\n```text\n<div class=\"shadow-[0_35px_35px_rgba(0,0,0,0.25)] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"shadow-(--my-shadow) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"shadow-none md:shadow-lg ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --shadow-3xl: 0 35px 35px rgba(0, 0, 0, 0.25); }\n```\n\nExample:\n```text\n<div class=\"shadow-3xl\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --inset-shadow-md: inset 0 2px 3px rgba(0, 0, 0, 0.25); }\n```\n\nExample:\n```text\n<div class=\"inset-shadow-md\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<div class=\"shadow-regal-blue\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.189Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":19,"totalLines":96,"estimatedTokens":558}}181{"id":"doc-text_indent_typography_tailwind_css-29586cba","source":"documentation","title":"text-indent - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-indent","text":"Example:\n```text\n<p class=\"indent-8\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"-indent-8\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"indent-[50%] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"indent-(--my-indentation) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"indent-4 md:indent-8 ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.189Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":116}}182{"id":"doc-list_style_position_typography_tailwind_css-9353615f","source":"documentation","title":"list-style-position - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/list-style-position","text":"Example:\n```text\n<ul class=\"list-inside\"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul><ul class=\"list-outside\"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul>\n```\n\nExample:\n```text\n<ul class=\"list-outside md:list-inside ...\"> <!-- ... --></ul>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.189Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":74}}183{"id":"doc-line_clamp_typography_tailwind_css-75adc094","source":"documentation","title":"line-clamp - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/line-clamp","text":"Example:\n```text\n<article> <time>Mar 10, 2020</time> <h2>Boost your conversion rate</h2> <p class=\"line-clamp-3\"> Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim. </p> <div> <img src=\"/img/lindsay.jpg\" /> Lindsay Walton </div></article>\n```\n\nExample:\n```text\n<p class=\"line-clamp-3 lg:line-clamp-none\"> <!-- ... --></p>\n```\n\nExample:\n```text\n<p class=\"line-clamp-[calc(var(--characters)/100)] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"line-clamp-(--my-line-count) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<div class=\"line-clamp-3 md:line-clamp-4 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.190Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":273}}184{"id":"doc-block_size_sizing_tailwind_css-303e5fb1","source":"documentation","title":"block-size - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/block-size","text":"Example:\n```text\n<div class=\"block-96 ...\">block-96</div><div class=\"block-80 ...\">block-80</div><div class=\"block-64 ...\">block-64</div><div class=\"block-48 ...\">block-48</div><div class=\"block-40 ...\">block-40</div><div class=\"block-32 ...\">block-32</div><div class=\"block-24 ...\">block-24</div>\n```\n\nExample:\n```text\n<div class=\"block-full ...\">block-full</div><div class=\"block-9/10 ...\">block-9/10</div><div class=\"block-3/4 ...\">block-3/4</div><div class=\"block-1/2 ...\">block-1/2</div><div class=\"block-1/3 ...\">block-1/3</div>\n```\n\nExample:\n```text\n<div class=\"block-screen\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-dvh\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-lvh\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-svh\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-[32rem] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-(--my-block-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-1/2 md:block-full ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.190Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":10,"totalLines":51,"estimatedTokens":278}}185{"id":"doc-max_inline_size_sizing_tailwind_css-095a87f9","source":"documentation","title":"max-inline-size - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/max-inline-size","text":"Example:\n```text\n<div class=\"inline-full max-inline-96 ...\">max-inline-96</div><div class=\"inline-full max-inline-80 ...\">max-inline-80</div><div class=\"inline-full max-inline-64 ...\">max-inline-64</div><div class=\"inline-full max-inline-48 ...\">max-inline-48</div><div class=\"inline-full max-inline-40 ...\">max-inline-40</div><div class=\"inline-full max-inline-32 ...\">max-inline-32</div>\n```\n\nExample:\n```text\n<div class=\"inline-full max-inline-9/10 ...\">max-inline-9/10</div><div class=\"inline-full max-inline-3/4 ...\">max-inline-3/4</div><div class=\"inline-full max-inline-1/2 ...\">max-inline-1/2</div><div class=\"inline-full max-inline-1/3 ...\">max-inline-1/3</div>\n```\n\nExample:\n```text\n<div class=\"max-inline-md ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-inline-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-inline-(--my-max-inline-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-inline-sm md:max-inline-lg ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.190Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":269}}186{"id":"doc-font_stretch_typography_tailwind_css-a438cf97","source":"documentation","title":"font-stretch - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-stretch","text":"Example:\n```text\n<p class=\"font-stretch-extra-condensed\">The quick brown fox...</p><p class=\"font-stretch-condensed\">The quick brown fox...</p><p class=\"font-stretch-normal\">The quick brown fox...</p><p class=\"font-stretch-expanded\">The quick brown fox...</p><p class=\"font-stretch-extra-expanded\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"font-stretch-50%\">The quick brown fox...</p><p class=\"font-stretch-100%\">The quick brown fox...</p><p class=\"font-stretch-150%\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"font-stretch-[66.66%] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"font-stretch-(--my-font-width) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<div class=\"font-stretch-normal md:font-stretch-expanded ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.190Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":209}}187{"id":"doc-font_style_typography_tailwind_css-cb547430","source":"documentation","title":"font-style - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-style","text":"Example:\n```text\n<p class=\"italic ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"not-italic ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"italic md:not-italic ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.190Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":64}}188{"id":"doc-font_feature_settings_typography_tailwind_css-337986a3","source":"documentation","title":"font-feature-settings - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-feature-settings","text":"Example:\n```text\n<p class=\"font-features-['smcp'] ...\">This text uses small caps.</p>\n```\n\nExample:\n```text\n<p class=\"font-features-['smcp','onum'] ...\">This text uses small caps and oldstyle numbers.</p>\n```\n\nExample:\n```text\n<p class=\"font-features-(--my-features) ...\"> <!-- ... --></p>\n```\n\nExample:\n```text\n<p class=\"font-features-['tnum'] md:font-features-['smcp'] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.191Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":108}}189{"id":"doc-font_smoothing_typography_tailwind_css-0e94a13c","source":"documentation","title":"font-smoothing - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-smoothing","text":"Example:\n```text\n<p class=\"antialiased ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"subpixel-antialiased ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"antialiased md:subpixel-antialiased ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.191Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":71}}190{"id":"doc-font_weight_typography_tailwind_css-b9c33b3a","source":"documentation","title":"font-weight - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-weight","text":"Example:\n```text\n<p class=\"font-light ...\">The quick brown fox ...</p><p class=\"font-normal ...\">The quick brown fox ...</p><p class=\"font-medium ...\">The quick brown fox ...</p><p class=\"font-semibold ...\">The quick brown fox ...</p><p class=\"font-bold ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"font-[1000] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"font-(weight:--my-font-weight) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"font-normal md:font-bold ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --font-weight-extrablack: 1000; }\n```\n\nExample:\n```text\n<div class=\"font-extrablack\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.191Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":183}}191{"id":"doc-max_block_size_sizing_tailwind_css-50d02130","source":"documentation","title":"max-block-size - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/max-block-size","text":"Example:\n```text\n<div class=\"block-96 ...\"> <div class=\"block-full max-block-80 ...\">max-block-80</div> <div class=\"block-full max-block-64 ...\">max-block-64</div> <div class=\"block-full max-block-48 ...\">max-block-48</div> <div class=\"block-full max-block-40 ...\">max-block-40</div> <div class=\"block-full max-block-32 ...\">max-block-32</div></div>\n```\n\nExample:\n```text\n<div class=\"block-96 ...\"> <div class=\"block-full max-block-9/10 ...\">max-block-9/10</div> <div class=\"block-full max-block-3/4 ...\">max-block-3/4</div> <div class=\"block-full max-block-1/2 ...\">max-block-1/2</div> <div class=\"block-full max-block-full ...\">max-block-full</div></div>\n```\n\nExample:\n```text\n<div class=\"max-block-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-block-(--my-max-block-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-48 max-block-full md:max-block-screen ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.191Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":252}}192{"id":"doc-font_family_typography_tailwind_css-51b1598d","source":"documentation","title":"font-family - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-family","text":"Example:\n```text\n<p class=\"font-sans ...\">The quick brown fox ...</p><p class=\"font-serif ...\">The quick brown fox ...</p><p class=\"font-mono ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"font-[Open_Sans] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"font-(family-name:--my-font) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"font-sans md:font-serif ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --font-display: \"Oswald\", sans-serif; }\n```\n\nExample:\n```text\n<div class=\"font-display\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --font-display: \"Oswald\", sans-serif; --font-display--font-feature-settings: \"cv02\", \"cv03\", \"cv04\", \"cv11\"; --font-display--font-variation-settings: \"opsz\" 32; }\n```\n\nExample:\n```text\n@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url(\"/fonts/Oswald.woff2\") format(\"woff2\");}\n```\n\nExample:\n```text\n@import url(\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\");@import \"tailwindcss\";@theme { --font-roboto: \"Roboto\", sans-serif; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.191Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":291}}193{"id":"doc-height_sizing_tailwind_css-5cf78b27","source":"documentation","title":"height - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/height","text":"Example:\n```text\n<div class=\"h-96 ...\">h-96</div><div class=\"h-80 ...\">h-80</div><div class=\"h-64 ...\">h-64</div><div class=\"h-48 ...\">h-48</div><div class=\"h-40 ...\">h-40</div><div class=\"h-32 ...\">h-32</div><div class=\"h-24 ...\">h-24</div>\n```\n\nExample:\n```text\n<div class=\"h-full ...\">h-full</div><div class=\"h-9/10 ...\">h-9/10</div><div class=\"h-3/4 ...\">h-3/4</div><div class=\"h-1/2 ...\">h-1/2</div><div class=\"h-1/3 ...\">h-1/3</div>\n```\n\nExample:\n```text\n<div class=\"h-screen\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-dvh\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-lvh\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-svh\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"size-16 ...\">size-16</div><div class=\"size-20 ...\">size-20</div><div class=\"size-24 ...\">size-24</div><div class=\"size-32 ...\">size-32</div><div class=\"size-40 ...\">size-40</div>\n```\n\nExample:\n```text\n<div class=\"h-[32rem] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-(--my-height) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-1/2 md:h-full ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.192Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":56,"estimatedTokens":298}}194{"id":"doc-max_height_sizing_tailwind_css-153776e1","source":"documentation","title":"max-height - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/max-height","text":"Example:\n```text\n<div class=\"h-96 ...\"> <div class=\"h-full max-h-80 ...\">max-h-80</div> <div class=\"h-full max-h-64 ...\">max-h-64</div> <div class=\"h-full max-h-48 ...\">max-h-48</div> <div class=\"h-full max-h-40 ...\">max-h-40</div> <div class=\"h-full max-h-32 ...\">max-h-32</div> <div class=\"h-full max-h-24 ...\">max-h-24</div></div>\n```\n\nExample:\n```text\n<div class=\"h-96 ...\"> <div class=\"h-full max-h-9/10 ...\">max-h-9/10</div> <div class=\"h-full max-h-3/4 ...\">max-h-3/4</div> <div class=\"h-full max-h-1/2 ...\">max-h-1/2</div> <div class=\"h-full max-h-1/4 ...\">max-h-1/4</div> <div class=\"h-full max-h-full ...\">max-h-full</div></div>\n```\n\nExample:\n```text\n<div class=\"max-h-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"max-h-(--my-max-height) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"h-48 max-h-full md:max-h-screen ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.192Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":242}}195{"id":"doc-margin_spacing_tailwind_css-c317015f","source":"documentation","title":"margin - Spacing - Tailwind CSS","url":"https://tailwindcss.com/docs/margin","text":"Example:\n```text\n<div class=\"m-8 ...\">m-8</div>\n```\n\nExample:\n```text\n<div class=\"mt-6 ...\">mt-6</div><div class=\"mr-4 ...\">mr-4</div><div class=\"mb-8 ...\">mb-8</div><div class=\"ml-2 ...\">ml-2</div>\n```\n\nExample:\n```text\n<div class=\"mx-8 ...\">mx-8</div>\n```\n\nExample:\n```text\n<div class=\"my-8 ...\">my-8</div>\n```\n\nExample:\n```text\n<div class=\"h-16 w-36 bg-sky-400 opacity-20 ...\"></div><div class=\"-mt-8 bg-sky-300 ...\">-mt-8</div>\n```\n\nExample:\n```text\n<div> <div dir=\"ltr\"> <div class=\"ms-8 ...\">ms-8</div> <div class=\"me-8 ...\">me-8</div> </div> <div dir=\"rtl\"> <div class=\"ms-8 ...\">ms-8</div> <div class=\"me-8 ...\">me-8</div> </div></div>\n```\n\nExample:\n```text\n<div class=\"mbs-8 ...\">mbs-8</div>\n```\n\nExample:\n```text\n<div class=\"flex space-x-4 ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"flex flex-row-reverse space-x-4 space-x-reverse ...\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"m-[5px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"m-(--my-margin) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"mt-4 md:mt-8 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.192Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":66,"estimatedTokens":312}}196{"id":"doc-font_size_typography_tailwind_css-60f8c313","source":"documentation","title":"font-size - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-size","text":"Example:\n```text\n<p class=\"text-sm ...\">The quick brown fox ...</p><p class=\"text-base ...\">The quick brown fox ...</p><p class=\"text-lg ...\">The quick brown fox ...</p><p class=\"text-xl ...\">The quick brown fox ...</p><p class=\"text-2xl ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"text-sm/6 ...\">So I started to walk into the water...</p><p class=\"text-sm/7 ...\">So I started to walk into the water...</p><p class=\"text-sm/8 ...\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"text-[14px] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"text-(length:--my-text-size) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"text-sm md:text-base ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --text-tiny: 0.625rem; }\n```\n\nExample:\n```text\n<div class=\"text-tiny\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.193Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":271}}197{"id":"doc-font_variant_numeric_typography_tailwind_css-60f39cff","source":"documentation","title":"font-variant-numeric - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/font-variant-numeric","text":"Example:\n```text\n<p class=\"ordinal ...\">1st</p>\n```\n\nExample:\n```text\n<p class=\"slashed-zero ...\">0</p>\n```\n\nExample:\n```text\n<p class=\"lining-nums ...\">1234567890</p>\n```\n\nExample:\n```text\n<p class=\"oldstyle-nums ...\">1234567890</p>\n```\n\nExample:\n```text\n<p class=\"proportional-nums ...\">12121</p><p class=\"proportional-nums ...\">90909</p>\n```\n\nExample:\n```text\n<p class=\"tabular-nums ...\">12121</p><p class=\"tabular-nums ...\">90909</p>\n```\n\nExample:\n```text\n<p class=\"diagonal-fractions ...\">1/2 3/4 5/6</p>\n```\n\nExample:\n```text\n<p class=\"stacked-fractions ...\">1/2 3/4 5/6</p>\n```\n\nExample:\n```text\n<dl class=\"...\"> <dt class=\"...\">Subtotal</dt> <dd class=\"text-right slashed-zero tabular-nums ...\">$100.00</dd> <dt class=\"...\">Tax</dt> <dd class=\"text-right slashed-zero tabular-nums ...\">$14.50</dd> <dt class=\"...\">Total</dt> <dd class=\"text-right slashed-zero tabular-nums ...\">$114.50</dd></dl>\n```\n\nExample:\n```text\n<p class=\"slashed-zero tabular-nums md:normal-nums ...\"> <!-- ... --></p>\n```\n\nExample:\n```text\n<p class=\"proportional-nums md:tabular-nums ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.193Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":11,"totalLines":56,"estimatedTokens":283}}198{"id":"doc-inline_size_sizing_tailwind_css-74024ead","source":"documentation","title":"inline-size - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/inline-size","text":"Example:\n```text\n<div class=\"inline-96 ...\">inline-96</div><div class=\"inline-80 ...\">inline-80</div><div class=\"inline-64 ...\">inline-64</div><div class=\"inline-48 ...\">inline-48</div><div class=\"inline-40 ...\">inline-40</div><div class=\"inline-32 ...\">inline-32</div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"inline-1/2 ...\">inline-1/2</div> <div class=\"inline-1/2 ...\">inline-1/2</div></div><div class=\"flex ...\"> <div class=\"inline-2/5 ...\">inline-2/5</div> <div class=\"inline-3/5 ...\">inline-3/5</div></div><div class=\"flex ...\"> <div class=\"inline-1/3 ...\">inline-1/3</div> <div class=\"inline-2/3 ...\">inline-2/3</div></div><div class=\"inline-full ...\">inline-full</div>\n```\n\nExample:\n```text\n<div class=\"inline-xl ...\">inline-xl</div><div class=\"inline-lg ...\">inline-lg</div><div class=\"inline-md ...\">inline-md</div><div class=\"inline-sm ...\">inline-sm</div><div class=\"inline-xs ...\">inline-xs</div><div class=\"inline-2xs ...\">inline-2xs</div><div class=\"inline-3xs ...\">inline-3xs</div>\n```\n\nExample:\n```text\n<div class=\"inline-screen\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"inline-full md:inline-auto\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"inline-[5px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"inline-(--my-inline-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"inline-1/2 md:inline-full ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.193Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":9,"totalLines":46,"estimatedTokens":372}}199{"id":"doc-text_wrap_typography_tailwind_css-9f112a5c","source":"documentation","title":"text-wrap - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-wrap","text":"Example:\n```text\n<article class=\"text-wrap\"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>\n```\n\nExample:\n```text\n<article class=\"text-nowrap\"> <h3>Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>\n```\n\nExample:\n```text\n<article> <h3 class=\"text-balance\">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>\n```\n\nExample:\n```text\n<article> <h3 class=\"text-pretty\">Beloved Manhattan soup stand closes</h3> <p>New Yorkers are facing the winter chill...</p></article>\n```\n\nExample:\n```text\n<h1 class=\"text-pretty md:text-balance ...\"> <!-- ... --></h1>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.193Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":184}}200{"id":"doc-min_inline_size_sizing_tailwind_css-03c213d5","source":"documentation","title":"min-inline-size - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/min-inline-size","text":"Example:\n```text\n<div class=\"inline-20 ...\"> <div class=\"min-inline-80 ...\">min-inline-80</div> <div class=\"min-inline-64 ...\">min-inline-64</div> <div class=\"min-inline-48 ...\">min-inline-48</div> <div class=\"min-inline-40 ...\">min-inline-40</div> <div class=\"min-inline-32 ...\">min-inline-32</div> <div class=\"min-inline-24 ...\">min-inline-24</div></div>\n```\n\nExample:\n```text\n<div class=\"flex ...\"> <div class=\"min-inline-3/4 ...\">min-inline-3/4</div> <div class=\"inline-full ...\">inline-full</div></div>\n```\n\nExample:\n```text\n<div class=\"inline-40 ...\"> <div class=\"min-inline-lg ...\">min-inline-lg</div> <div class=\"min-inline-md ...\">min-inline-md</div> <div class=\"min-inline-sm ...\">min-inline-sm</div> <div class=\"min-inline-xs ...\">min-inline-xs</div> <div class=\"min-inline-2xs ...\">min-inline-2xs</div> <div class=\"min-inline-3xs ...\">min-inline-3xs</div></div>\n```\n\nExample:\n```text\n<div class=\"min-inline-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"min-inline-(--my-min-inline-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"inline-24 min-inline-full md:min-inline-0 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.193Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":308}}201{"id":"doc-letter_spacing_typography_tailwind_css-0c6f9a1c","source":"documentation","title":"letter-spacing - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/letter-spacing","text":"Example:\n```text\n<p class=\"tracking-tight ...\">The quick brown fox ...</p><p class=\"tracking-normal ...\">The quick brown fox ...</p><p class=\"tracking-wide ...\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n@theme { --tracking-1: 0em; --tracking-2: 0.025em; --tracking-3: 0.05em; --tracking-4: 0.1em;}\n```\n\nExample:\n```text\n<p class=\"-tracking-2\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"tracking-[.25em] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"tracking-(--my-tracking) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"tracking-tight md:tracking-wide ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --tracking-tightest: -0.075em; }\n```\n\nExample:\n```text\n<p class=\"tracking-tightest\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.194Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":212}}202{"id":"doc-min_block_size_sizing_tailwind_css-12cd3fc8","source":"documentation","title":"min-block-size - Sizing - Tailwind CSS","url":"https://tailwindcss.com/docs/min-block-size","text":"Example:\n```text\n<div class=\"block-20 ...\"> <div class=\"min-block-80 ...\">min-block-80</div> <div class=\"min-block-64 ...\">min-block-64</div> <div class=\"min-block-48 ...\">min-block-48</div> <div class=\"min-block-40 ...\">min-block-40</div> <div class=\"min-block-32 ...\">min-block-32</div></div>\n```\n\nExample:\n```text\n<div class=\"min-block-full ...\">min-block-full</div><div class=\"min-block-9/10 ...\">min-block-9/10</div><div class=\"min-block-3/4 ...\">min-block-3/4</div><div class=\"min-block-1/2 ...\">min-block-1/2</div><div class=\"min-block-1/3 ...\">min-block-1/3</div>\n```\n\nExample:\n```text\n<div class=\"min-block-[220px] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"min-block-(--my-min-block-size) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"block-24 min-block-0 md:min-block-full ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.194Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":229}}203{"id":"doc-list_style_image_typography_tailwind_css-3b240874","source":"documentation","title":"list-style-image - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/list-style-image","text":"Example:\n```text\n<ul class=\"list-image-[url(/img/checkmark.png)]\"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul>\n```\n\nExample:\n```text\n<ul class=\"list-image-(--my-list-image)\"> <!-- ... --></ul>\n```\n\nExample:\n```text\n<ul class=\"list-image-none\"> <!-- ... --></ul>\n```\n\nExample:\n```text\n<ul class=\"list-image-none md:list-image-[url(/img/checkmark.png)] ...\"> <!-- ... --></ul>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.194Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":104}}204{"id":"doc-line_height_typography_tailwind_css-21e9efbc","source":"documentation","title":"line-height - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/line-height","text":"Example:\n```text\n<p class=\"text-base/6 ...\">So I started to walk into the water...</p><p class=\"text-base/7 ...\">So I started to walk into the water...</p><p class=\"text-base/8 ...\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"text-sm leading-6\">So I started to walk into the water...</p><p class=\"text-sm leading-7\">So I started to walk into the water...</p><p class=\"text-sm leading-8\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"text-2xl leading-none ...\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"leading-[1.5] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"leading-(--my-line-height) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"leading-5 md:leading-6 ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --spacing: 1px; }\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.194Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":225}}205{"id":"doc-text_decoration_style_typography_tailwind_css-170b49ff","source":"documentation","title":"text-decoration-style - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-decoration-style","text":"Example:\n```text\n<p class=\"underline decoration-solid\">The quick brown fox...</p><p class=\"underline decoration-double\">The quick brown fox...</p><p class=\"underline decoration-dotted\">The quick brown fox...</p><p class=\"underline decoration-dashed\">The quick brown fox...</p><p class=\"underline decoration-wavy\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"underline md:decoration-dashed ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.194Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":116}}206{"id":"doc-text_align_typography_tailwind_css-cfe0a3eb","source":"documentation","title":"text-align - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-align","text":"Example:\n```text\n<p class=\"text-left\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"text-right\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"text-center\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<p class=\"text-justify\">So I started to walk into the water...</p>\n```\n\nExample:\n```text\n<div dir=\"rtl\" lang=\"ar\"> <p class=\"text-end\">فبدأت بالسير نحو الماء...</p></div>\n```\n\nExample:\n```text\n<p class=\"text-left md:text-center ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.195Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":142}}207{"id":"doc-text_transform_typography_tailwind_css-b1798547","source":"documentation","title":"text-transform - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-transform","text":"Example:\n```text\n<p class=\"uppercase\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"lowercase\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"capitalize\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"normal-case\">The quick brown fox ...</p>\n```\n\nExample:\n```text\n<p class=\"capitalize md:uppercase ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.195Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":5,"totalLines":26,"estimatedTokens":99}}208{"id":"doc-text_overflow_typography_tailwind_css-07baa3ec","source":"documentation","title":"text-overflow - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-overflow","text":"Example:\n```text\n<p class=\"truncate\">The longest word in any of the major...</p>\n```\n\nExample:\n```text\n<p class=\"overflow-hidden text-ellipsis\">The longest word in any of the major...</p>\n```\n\nExample:\n```text\n<p class=\"overflow-hidden text-clip\">The longest word in any of the major...</p>\n```\n\nExample:\n```text\n<p class=\"text-ellipsis md:text-clip ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.195Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":102}}209{"id":"doc-border_color_borders_tailwind_css-9e247db3","source":"documentation","title":"border-color - Borders - Tailwind CSS","url":"https://tailwindcss.com/docs/border-color","text":"Example:\n```text\n<div class=\"border-4 border-indigo-500 ...\"></div><div class=\"border-4 border-purple-500 ...\"></div><div class=\"border-4 border-sky-500 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"border-4 border-indigo-500/100 ...\"></div><div class=\"border-4 border-indigo-500/75 ...\"></div><div class=\"border-4 border-indigo-500/50 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"border-4 border-indigo-200 border-t-indigo-500 ...\"></div><div class=\"border-4 border-indigo-200 border-r-indigo-500 ...\"></div><div class=\"border-4 border-indigo-200 border-b-indigo-500 ...\"></div><div class=\"border-4 border-indigo-200 border-l-indigo-500 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"border-4 border-indigo-200 border-x-indigo-500 ...\"></div><div class=\"border-4 border-indigo-200 border-y-indigo-500 ...\"></div>\n```\n\nExample:\n```text\n<div dir=\"ltr\"> <div class=\"border-s-indigo-500 ...\"></div></div><div dir=\"rtl\"> <div class=\"border-s-indigo-500 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"border-bs-indigo-500 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"grid grid-cols-3 divide-x-4 divide-indigo-500\"> <div>01</div> <div>02</div> <div>03</div></div>\n```\n\nExample:\n```text\n<div class=\"border-[#243c5a] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"border-(--my-border) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<input class=\"border-2 border-gray-700 focus:border-pink-600 ...\" />\n```\n\nExample:\n```text\n<div class=\"border-blue-500 md:border-green-500 ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<div class=\"border-regal-blue\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.207Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":13,"totalLines":66,"estimatedTokens":417}}210{"id":"doc-text_decoration_line_typography_tailwind_css-7627ef7b","source":"documentation","title":"text-decoration-line - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-decoration-line","text":"Example:\n```text\n<p class=\"underline\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"overline\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"line-through\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"no-underline\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p>The <a href=\"...\" class=\"no-underline hover:underline ...\">quick brown fox</a> jumps over the lazy dog.</p>\n```\n\nExample:\n```text\n<a class=\"no-underline md:underline ...\" href=\"...\"> <!-- ... --></a>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.207Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":131}}211{"id":"doc-background_clip_backgrounds_tailwind_css-743890d0","source":"documentation","title":"background-clip - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-clip","text":"Example:\n```text\n<div class=\"border-4 bg-indigo-500 bg-clip-border p-3\"></div><div class=\"border-4 bg-indigo-500 bg-clip-padding p-3\"></div><div class=\"border-4 bg-indigo-500 bg-clip-content p-3\"></div>\n```\n\nExample:\n```text\n<p class=\"bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl font-extrabold text-transparent ...\"> Hello world</p>\n```\n\nExample:\n```text\n<div class=\"bg-clip-border md:bg-clip-padding ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.207Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":117}}212{"id":"doc-text_decoration_thickness_typography_tailwind_cs-ab773701","source":"documentation","title":"text-decoration-thickness - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-decoration-thickness","text":"Example:\n```text\n<p class=\"underline decoration-1\">The quick brown fox...</p><p class=\"underline decoration-2\">The quick brown fox...</p><p class=\"underline decoration-4\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"decoration-[0.25rem] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"decoration-(length:--my-decoration-thickness) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"underline md:decoration-4 ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.208Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":132}}213{"id":"doc-text_underline_offset_typography_tailwind_css-2dd7f102","source":"documentation","title":"text-underline-offset - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-underline-offset","text":"Example:\n```text\n<p class=\"underline underline-offset-1\">The quick brown fox...</p><p class=\"underline underline-offset-2\">The quick brown fox...</p><p class=\"underline underline-offset-4\">The quick brown fox...</p><p class=\"underline underline-offset-8\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"underline-offset-[3px] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"underline-offset-(--my-underline-offset) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"underline md:underline-offset-4 ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.208Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":154}}214{"id":"doc-word_break_typography_tailwind_css-23f4ef11","source":"documentation","title":"word-break - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/word-break","text":"Example:\n```text\n<p class=\"break-normal\">The longest word in any of the major...</p>\n```\n\nExample:\n```text\n<p class=\"break-all\">The longest word in any of the major...</p>\n```\n\nExample:\n```text\n<p class=\"break-keep\">抗衡不屈不挠...</p>\n```\n\nExample:\n```text\n<p class=\"break-normal md:break-all ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.208Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":87}}215{"id":"doc-white_space_typography_tailwind_css-1e7752e4","source":"documentation","title":"white-space - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/white-space","text":"Example:\n```text\n<p class=\"whitespace-normal\">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>\n```\n\nExample:\n```text\n<p class=\"overflow-auto whitespace-nowrap\">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>\n```\n\nExample:\n```text\n<p class=\"overflow-auto whitespace-pre\">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>\n```\n\nExample:\n```text\n<p class=\"whitespace-pre-line\">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>\n```\n\nExample:\n```text\n<p class=\"whitespace-pre-wrap\">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>\n```\n\nExample:\n```text\n<p class=\"whitespace-break-spaces\">Hey everyone!It's almost 2022 and we still don't know if there are aliens living among us, or do we? Maybe the person writing this is an alien.You will never know.</p>\n```\n\nExample:\n```text\n<p class=\"whitespace-pre md:whitespace-normal ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.208Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":7,"totalLines":36,"estimatedTokens":395}}216{"id":"doc-text_decoration_color_typography_tailwind_css-a3f49e93","source":"documentation","title":"text-decoration-color - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/text-decoration-color","text":"Example:\n```text\n<p> I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at <a class=\"underline decoration-sky-500\">My Company, Inc</a>. Outside of work, I like to <a class=\"underline decoration-pink-500\">watch pod-racing</a> and have <a class=\"underline decoration-indigo-500\">light-saber</a> fights.</p>\n```\n\nExample:\n```text\n<p> I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at <a class=\"underline decoration-sky-500/30\">My Company, Inc</a>. Outside of work, I like to <a class=\"underline decoration-pink-500/30\">watch pod-racing</a> and have <a class=\"underline decoration-indigo-500/30\">light-saber</a> fights.</p>\n```\n\nExample:\n```text\n<p class=\"decoration-[#50d71e] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"decoration-(--my-color) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p>The <a href=\"...\" class=\"underline hover:decoration-pink-500 ...\">quick brown fox</a> jumps over the lazy dog.</p>\n```\n\nExample:\n```text\n<p class=\"underline decoration-sky-600 md:decoration-blue-400 ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<p class=\"decoration-regal-blue\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.209Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":326}}217{"id":"doc-content_typography_tailwind_css-59da1988","source":"documentation","title":"content - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/content","text":"Example:\n```text\n<p>Higher resolution means more than just a better-quality image. With aRetina 6K display, <a class=\"text-blue-600 after:content-['_↗']\" href=\"...\">Pro Display XDR</a> gives you nearly 40 percent more screen real estate thana 5K display.</p>\n```\n\nExample:\n```text\n<p before=\"Hello World\" class=\"before:content-[attr(before)] ...\"> <!-- ... --></p>\n```\n\nExample:\n```text\n<p class=\"before:content-['Hello_World'] ...\"></p>\n```\n\nExample:\n```text\n<p class=\"before:content-['Hello\\_World']\"></p>\n```\n\nExample:\n```text\n<p class=\"content-(--my-content)\"></p>\n```\n\nExample:\n```text\n<p class=\"before:content-['Mobile'] md:before:content-['Desktop'] ...\"></p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.209Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":6,"totalLines":31,"estimatedTokens":172}}218{"id":"doc-list_style_type_typography_tailwind_css-45af5f88","source":"documentation","title":"list-style-type - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/list-style-type","text":"Example:\n```text\n<ul class=\"list-disc\"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul><ol class=\"list-decimal\"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ol><ul class=\"list-none\"> <li>Now this is a story all about how, my life got flipped-turned upside down</li> <!-- ... --></ul>\n```\n\nExample:\n```text\n<ol class=\"list-[upper-roman] ...\"> <!-- ... --></ol>\n```\n\nExample:\n```text\n<ol class=\"list-(--my-marker) ...\"> <!-- ... --></ol>\n```\n\nExample:\n```text\n<ul class=\"list-none md:list-disc ...\"> <!-- ... --></ul>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.210Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":162}}219{"id":"doc-background_origin_backgrounds_tailwind_css-c75902bc","source":"documentation","title":"background-origin - Backgrounds - Tailwind CSS","url":"https://tailwindcss.com/docs/background-origin","text":"Example:\n```text\n<div class=\"border-4 bg-[url(/img/mountains.jpg)] bg-origin-border p-3 ...\"></div><div class=\"border-4 bg-[url(/img/mountains.jpg)] bg-origin-padding p-3 ...\"></div><div class=\"border-4 bg-[url(/img/mountains.jpg)] bg-origin-content p-3 ...\"></div>\n```\n\nExample:\n```text\n<div class=\"bg-origin-border md:bg-origin-padding ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.210Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":2,"totalLines":11,"estimatedTokens":96}}220{"id":"doc-color_typography_tailwind_css-a8740b47","source":"documentation","title":"color - Typography - Tailwind CSS","url":"https://tailwindcss.com/docs/color","text":"Example:\n```text\n<p class=\"text-blue-600 dark:text-sky-400\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"text-blue-600/100 dark:text-sky-400/100\">The quick brown fox...</p><p class=\"text-blue-600/75 dark:text-sky-400/75\">The quick brown fox...</p><p class=\"text-blue-600/50 dark:text-sky-400/50\">The quick brown fox...</p><p class=\"text-blue-600/25 dark:text-sky-400/25\">The quick brown fox...</p>\n```\n\nExample:\n```text\n<p class=\"text-[#50d71e] ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"text-(--my-color) ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n<p class=\"...\"> Oh I gotta get on that <a class=\"underline hover:text-blue-600 dark:hover:text-blue-400\" href=\"https://en.wikipedia.org/wiki/Internet\">internet</a>, I'm late on everything!</p>\n```\n\nExample:\n```text\n<p class=\"text-blue-600 md:text-green-600 ...\"> Lorem ipsum dolor sit amet...</p>\n```\n\nExample:\n```text\n@theme { --color-regal-blue: #243c5a; }\n```\n\nExample:\n```text\n<p class=\"text-regal-blue\"> Lorem ipsum dolor sit amet...</p>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.211Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":8,"totalLines":41,"estimatedTokens":270}}221{"id":"doc-backdrop_filter_brightness_filters_tailwind_css-cd3797a9","source":"documentation","title":"backdrop-filter: brightness() - Filters - Tailwind CSS","url":"https://tailwindcss.com/docs/backdrop-filter-brightness","text":"Example:\n```text\n<div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-brightness-50 ...\"></div></div><div class=\"bg-[url(/img/mountains.jpg)]\"> <div class=\"bg-white/30 backdrop-brightness-150 ...\"></div></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-brightness-[1.75] ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-brightness-(--my-backdrop-brightness) ...\"> <!-- ... --></div>\n```\n\nExample:\n```text\n<div class=\"backdrop-brightness-110 md:backdrop-brightness-150 ...\"> <!-- ... --></div>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.211Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":4,"totalLines":21,"estimatedTokens":140}}222{"id":"doc-border_collapse_tables_tailwind_css-b2744ad7","source":"documentation","title":"border-collapse - Tables - Tailwind CSS","url":"https://tailwindcss.com/docs/border-collapse","text":"Example:\n```text\n<table class=\"border-collapse border border-gray-400 ...\"> <thead> <tr> <th class=\"border border-gray-300 ...\">State</th> <th class=\"border border-gray-300 ...\">City</th> </tr> </thead> <tbody> <tr> <td class=\"border border-gray-300 ...\">Indiana</td> <td class=\"border border-gray-300 ...\">Indianapolis</td> </tr> <tr> <td class=\"border border-gray-300 ...\">Ohio</td> <td class=\"border border-gray-300 ...\">Columbus</td> </tr> <tr> <td class=\"border border-gray-300 ...\">Michigan</td> <td class=\"border border-gray-300 ...\">Detroit</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<table class=\"border-separate border border-gray-400 ...\"> <thead> <tr> <th class=\"border border-gray-300 ...\">State</th> <th class=\"border border-gray-300 ...\">City</th> </tr> </thead> <tbody> <tr> <td class=\"border border-gray-300 ...\">Indiana</td> <td class=\"border border-gray-300 ...\">Indianapolis</td> </tr> <tr> <td class=\"border border-gray-300 ...\">Ohio</td> <td class=\"border border-gray-300 ...\">Columbus</td> </tr> <tr> <td class=\"border border-gray-300 ...\">Michigan</td> <td class=\"border border-gray-300 ...\">Detroit</td> </tr> </tbody></table>\n```\n\nExample:\n```text\n<table class=\"border-collapse md:border-separate ...\"> <!-- ... --></table>\n```\n\n<|endofdoc|>","metadata":{"transformedAt":"2026-08-18T15:21:47.211Z","totalSectionsIncluded":0,"totalCodeBlocksIncluded":3,"totalLines":16,"estimatedTokens":353}}223