@jonathanconway/tailwindjs

Version:

Tailwind as Javascript functions for code completion and type safety.

3 lines • 153 kB

text/typescript

export const translate = { url: "https://tailwindcss.com/docs/translate", html: "<!DOCTYPE html><html lang=\"en\" class=\"dark [--scroll-mt:9.875rem] lg:[--scroll-mt:6.3125rem] [scrollbar-gutter:stable]\"><head><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"description\" content=\"Utilities for translating elements with transform.\"/><meta property=\"og:description\" content=\"Utilities for translating elements with transform.\"/><meta name=\"twitter:description\" content=\"Utilities for translating elements with transform.\"/><meta name=\"twitter:card\" content=\"summary_large_image\"/><meta name=\"twitter:site\" content=\"@tailwindcss\"/><meta name=\"twitter:image\" content=\"https://tailwindcss.com/api/og?path=/docs/translate\"/><meta name=\"twitter:creator\" content=\"@tailwindcss\"/><meta property=\"og:url\" content=\"https://tailwindcss.com/docs/translate\"/><meta property=\"og:type\" content=\"article\"/><meta property=\"og:image\" content=\"https://tailwindcss.com/api/og?path=/docs/translate\"/><link rel=\"alternate\" type=\"application/rss+xml\" title=\"RSS 2.0\" href=\"/feeds/feed.xml\"/><link rel=\"alternate\" type=\"application/atom+xml\" title=\"Atom 1.0\" href=\"/feeds/atom.xml\"/><link rel=\"alternate\" type=\"application/json\" title=\"JSON Feed\" href=\"/feeds/feed.json\"/><link rel=\"preconnect\" href=\"https://KNPXZI5B0M-dsn.algolia.net\" crossorigin=\"true\"/><title>Translate - Tailwind CSS</title><meta name=\"twitter:title\" content=\"Translate - Tailwind CSS\"/><meta property=\"og:title\" content=\"Translate - Tailwind CSS\"/><meta name=\"next-head-count\" content=\"19\"/><link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/favicons/apple-touch-icon.png?v=3\"/><link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicons/favicon-32x32.png?v=3\"/><link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicons/favicon-16x16.png?v=3\"/><link rel=\"manifest\" href=\"/favicons/site.webmanifest?v=3\"/><link rel=\"mask-icon\" href=\"/favicons/safari-pinned-tab.svg?v=3\" color=\"#38bdf8\"/><link rel=\"shortcut icon\" href=\"/favicons/favicon.ico?v=3\"/><meta name=\"apple-mobile-web-app-title\" content=\"Tailwind CSS\"/><meta name=\"application-name\" content=\"Tailwind CSS\"/><meta name=\"msapplication-TileColor\" content=\"#38bdf8\"/><meta name=\"msapplication-config\" content=\"/favicons/browserconfig.xml?v=3\"/><meta name=\"theme-color\" content=\"#f8fafc\"/><script>\n try {\n if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark')\n document.querySelector('meta[name=\"theme-color\"]').setAttribute('content', '#0B1120')\n } else {\n document.documentElement.classList.remove('dark')\n }\n } catch (_) {}\n </script><link data-next-font=\"size-adjust\" rel=\"preconnect\" href=\"/\" crossorigin=\"anonymous\"/><link rel=\"preload\" href=\"/_next/static/css/88a0131b5314c0ab.css\" as=\"style\"/><link rel=\"stylesheet\" href=\"/_next/static/css/88a0131b5314c0ab.css\" data-n-g=\"\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js\"></script><script src=\"/_next/static/chunks/webpack-e81585bb9a6b8f4d.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-ce84985cd166733a.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-78bff94cbf1c228a.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-859e43e85576339f.js\" defer=\"\"></script><script src=\"/_next/static/chunks/05d954cf-f5d397979a22acf6.js\" defer=\"\"></script><script src=\"/_next/static/chunks/2219-3adb802a0f13e080.js\" defer=\"\"></script><script src=\"/_next/static/chunks/3056-1b2a0cc39e87061f.js\" defer=\"\"></script><script src=\"/_next/static/chunks/9495-61b0984eb599c09e.js\" defer=\"\"></script><script src=\"/_next/static/chunks/224-70ad103243b99f00.js\" defer=\"\"></script><script src=\"/_next/static/chunks/7308-6b45a2f94d851e5f.js\" defer=\"\"></script><script src=\"/_next/static/chunks/368-d3670b1d5d78e462.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/docs/translate-1ea7a51895d767df.js\" defer=\"\"></script><script src=\"/_next/static/WfiJAnsJN9aN_ZEdCSILF/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/WfiJAnsJN9aN_ZEdCSILF/_ssgManifest.js\" defer=\"\"></script></head><body class=\"antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900\"><div id=\"__next\"><div class=\"absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none\"><div class=\"w-[108rem] flex-none flex justify-end\"><picture><source srcSet=\"/_next/static/media/docs@30.8b9a76a2.avif\" type=\"image/avif\"/><img src=\"/_next/static/media/docs@tinypng.d9e4dcdc.png\" alt=\"\" class=\"w-[71.75rem] flex-none max-w-none dark:hidden\" decoding=\"async\"/></picture><picture><source srcSet=\"/_next/static/media/docs-dark@30.1a9f8cbf.avif\" type=\"image/avif\"/><img src=\"/_next/static/media/docs-dark@tinypng.1bbe175e.png\" alt=\"\" class=\"w-[90rem] flex-none max-w-none hidden dark:block\" decoding=\"async\"/></picture></div></div><div class=\"sticky top-0 z-40 w-full backdrop-blur flex-none transition-colors duration-500 lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-white/95 supports-backdrop-blur:bg-white/60 dark:bg-transparent\"><div class=\"max-w-8xl mx-auto\"><div class=\"py-4 border-b border-slate-900/10 lg:px-8 lg:border-0 dark:border-slate-300/10 mx-4 lg:mx-0\"><div class=\"relative flex items-center\"><a class=\"mr-3 flex-none w-[2.0625rem] overflow-hidden md:w-auto\" href=\"/\"><span class=\"sr-only\">Tailwind CSS home page</span><svg viewBox=\"0 0 248 31\" class=\"text-slate-900 dark:text-white w-auto h-5\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z\" fill=\"#38bdf8\"></path><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z\" fill=\"currentColor\"></path></svg></a><div class=\"relative\" data-headlessui-state=\"\"><button class=\"text-xs leading-5 font-semibold bg-slate-400/10 rounded-full py-1 px-3 flex items-center space-x-2 hover:bg-slate-400/20 dark:highlight-white/5\" id=\"headlessui-menu-button-:Rqcr6:\" type=\"button\" aria-haspopup=\"menu\" aria-expanded=\"false\" data-headlessui-state=\"\">v3.4.3<svg width=\"6\" height=\"3\" class=\"ml-2 overflow-visible\" aria-hidden=\"true\"><path d=\"M0 0L3 3L6 0\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path></svg></button></div><a href=\"/blog/tailwindcss-v3-4\" class=\"ml-3 text-xs leading-5 font-medium text-sky-600 dark:text-sky-400 bg-sky-400/10 rounded-full py-1 px-3 hidden xl:flex items-center hover:bg-sky-400/20\"><strong class=\"font-semibold\">Tailwind CSS v3.4</strong><svg width=\"2\" height=\"2\" fill=\"currentColor\" aria-hidden=\"true\" class=\"ml-2 text-sky-600 dark:text-sky-400/70\"><circle cx=\"1\" cy=\"1\" r=\"1\"></circle></svg><span class=\"ml-2\">Dynamic viewport units, :has(), subgrid, and more</span><svg width=\"3\" height=\"6\" class=\"ml-3 overflow-visible text-sky-300 dark:text-sky-400\" aria-hidden=\"true\"><path d=\"M0 0L3 3L0 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></a><div class=\"relative hidden lg:flex items-center ml-auto\"><nav class=\"text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200\"><ul class=\"flex space-x-8\"><li><a class=\"hover:text-sky-500 dark:hover:text-sky-400\" href=\"/docs/installation\">Docs</a></li><li><a href=\"https://tailwindui.com/?ref=top\" class=\"hover:text-sky-500 dark:hover:text-sky-400\">Components</a></li><li><a class=\"hover:text-sky-500 dark:hover:text-sky-400\" href=\"/blog\">Blog</a></li><li><a class=\"hover:text-sky-500 dark:hover:text-sky-400\" href=\"/showcase\">Showcase</a></li></ul></nav><div class=\"flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800\"><div class=\"sr-only\" id=\"headlessui-label-:R1lkcr6:\" data-headlessui-state=\"\">Theme</div><button type=\"button\" id=\"headlessui-listbox-button-:R2lkcr6:\" aria-haspopup=\"listbox\" aria-expanded=\"false\" data-headlessui-state=\"\"><span class=\"dark:hidden\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"w-6 h-6\"><path d=\"M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\" class=\"fill-sky-400/20 stroke-sky-500\"></path><path d=\"M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836\" class=\"stroke-sky-500\"></path></svg></span><span class=\"hidden dark:inline\"><svg viewBox=\"0 0 24 24\" fill=\"none\" class=\"w-6 h-6\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z\" class=\"fill-sky-400/20\"></path><path d=\"m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z\" class=\"fill-sky-500\"></path><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z\" class=\"fill-sky-500\"></path></svg></span></button><a href=\"https://github.com/tailwindlabs/tailwindcss\" class=\"ml-6 block text-slate-400 hover:text-slate-500 dark:hover:text-slate-300\"><span class=\"sr-only\">Tailwind CSS on GitHub</span><svg viewBox=\"0 0 16 16\" class=\"w-5 h-5\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\"></path></svg></a></div></div><button type=\"button\" class=\"ml-auto text-slate-500 w-8 h-8 -my-1 flex items-center justify-center hover:text-slate-600 lg:hidden dark:text-slate-400 dark:hover:text-slate-300\"><span class=\"sr-only\">Search</span><svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m19 19-3.5-3.5\"></path><circle cx=\"11\" cy=\"11\" r=\"6\"></circle></svg></button><div class=\"ml-2 -my-1 lg:hidden\"><button type=\"button\" class=\"text-slate-500 w-8 h-8 flex items-center justify-center hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300\"><span class=\"sr-only\">Navigation</span><svg width=\"24\" height=\"24\" fill=\"none\" aria-hidden=\"true\"><path d=\"M12 6v.01M12 12v.01M12 18v.01M12 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg></button><div hidden=\"\" style=\"position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none\"></div></div></div></div><div class=\"flex items-center p-4 border-b border-slate-900/10 lg:hidden dark:border-slate-50/[0.06]\"><button type=\"button\" class=\"text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300\"><span class=\"sr-only\">Navigation</span><svg width=\"24\" height=\"24\"><path d=\"M5 6h14M5 12h14M5 18h14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"></path></svg></button><ol class=\"ml-4 flex text-sm leading-6 whitespace-nowrap min-w-0\"><li class=\"flex items-center\">Transforms<svg width=\"3\" height=\"6\" aria-hidden=\"true\" class=\"mx-3 overflow-visible text-slate-400\"><path d=\"M0 0L3 3L0 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path></svg></li><li class=\"font-semibold text-slate-900 truncate dark:text-slate-200\">Translate</li></ol></div></div></div><div><div class=\"max-w-8xl mx-auto px-4 sm:px-6 md:px-8\"><div class=\"hidden lg:block fixed z-20 inset-0 top-[3.8125rem] left-[max(0px,calc(50%-45rem))] right-auto w-[19rem] pb-10 pl-8 pr-6 overflow-y-auto\"><nav id=\"nav\" class=\"lg:text-sm lg:leading-6 relative\"><div class=\"sticky top-0 -ml-0.5 pointer-events-none\"><div class=\"h-10 bg-white dark:bg-slate-900\"></div><div class=\"bg-white dark:bg-slate-900 relative pointer-events-auto\"><button type=\"button\" class=\"hidden w-full lg:flex items-center text-sm leading-6 text-slate-400 rounded-md ring-1 ring-slate-900/10 shadow-sm py-1.5 pl-2 pr-3 hover:ring-slate-300 dark:bg-slate-800 dark:highlight-white/5 dark:hover:bg-slate-700\"><svg width=\"24\" height=\"24\" fill=\"none\" aria-hidden=\"true\" class=\"mr-3 flex-none\"><path d=\"m19 19-3.5-3.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><circle cx=\"11\" cy=\"11\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></circle></svg>Quick search...</button></div><div class=\"h-8 bg-gradient-to-b from-white dark:from-slate-900\"></div></div><ul><li><a class=\"group flex items-center lg:text-sm lg:leading-6 mb-4 font-semibold text-sky-500 dark:text-sky-400\" href=\"/docs/installation\"><div class=\"mr-4 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-sky-200 dark:group-hover:bg-sky-500 dark:bg-sky-500 dark:highlight-white/10\"><svg class=\"h-6 w-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.5 7c1.093 0 2.117.27 3 .743V17a6.345 6.345 0 0 0-3-.743c-1.093 0-2.617.27-3.5.743V7.743C5.883 7.27 7.407 7 8.5 7Z\" class=\"fill-sky-200 group-hover:fill-sky-500 dark:fill-sky-300 dark:group-hover:fill-sky-300\"></path><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.5 7c1.093 0 2.617.27 3.5.743V17c-.883-.473-2.407-.743-3.5-.743s-2.117.27-3 .743V7.743a6.344 6.344 0 0 1 3-.743Z\" class=\"fill-sky-400 group-hover:fill-sky-500 dark:fill-sky-200 dark:group-hover:fill-sky-200\"></path></svg></div>Documentation</a></li><li><a class=\"group flex items-center lg:text-sm lg:leading-6 mb-4 font-medium text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"https://tailwindui.com/components?ref=sidebar\"><div class=\"mr-4 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-indigo-200 dark:group-hover:bg-indigo-500 dark:bg-slate-800 dark:highlight-white/5\"><svg class=\"h-6 w-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"m6 9 6-3 6 3v6l-6 3-6-3V9Z\" class=\"fill-indigo-100 group-hover:fill-indigo-200 dark:fill-slate-400\"></path><path d=\"m6 9 6 3v7l-6-3V9Z\" class=\"fill-indigo-300 group-hover:fill-indigo-400 dark:group-hover:fill-indigo-300 dark:fill-slate-500\"></path><path d=\"m18 9-6 3v7l6-3V9Z\" class=\"fill-indigo-400 group-hover:fill-indigo-500 dark:group-hover:fill-indigo-400 dark:fill-slate-600\"></path></svg></div>Components</a></li><li><a class=\"group flex items-center lg:text-sm lg:leading-6 mb-4 font-medium text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"https://tailwindui.com/templates?ref=sidebar\"><div class=\"mr-4 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-fuchsia-200 dark:group-hover:bg-fuchsia-600 dark:bg-slate-800 dark:highlight-white/5\"><svg class=\"h-6 w-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 6C6.89543 6 6 6.89543 6 8V16C6 17.1046 6.89543 18 8 18H10.5C11.0523 18 11.5 17.5523 11.5 17V12C11.5 10.6193 12.6193 9.5 14 9.5H18V8C18 6.89543 17.1046 6 16 6H8ZM7.25 8C7.25 7.58579 7.58579 7.25 8 7.25H8.01C8.42421 7.25 8.76 7.58579 8.76 8C8.76 8.41421 8.42421 8.75 8.01 8.75H8C7.58579 8.75 7.25 8.41421 7.25 8ZM10 7.25C9.58579 7.25 9.25 7.58579 9.25 8C9.25 8.41421 9.58579 8.75 10 8.75H10.01C10.4242 8.75 10.76 8.41421 10.76 8C10.76 7.58579 10.4242 7.25 10.01 7.25H10Z\" fill=\"#E879F9\" class=\"fill-fuchsia-400 group-hover:fill-fuchsia-500 dark:group-hover:fill-fuchsia-300 dark:fill-slate-400\"></path><path d=\"M13 12C13 11.4477 13.4477 11 14 11H17C17.5523 11 18 11.4477 18 12V17C18 17.5523 17.5523 18 17 18H14C13.4477 18 13 17.5523 13 17V12Z\" fill=\"#F0ABFC\" class=\"fill-fuchsia-300 group-hover:fill-fuchsia-400 dark:fill-slate-500\"></path></svg></div>Templates</a></li><li><a class=\"group flex items-center lg:text-sm lg:leading-6 mb-4 font-medium text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"https://www.youtube.com/tailwindlabs\"><div class=\"mr-4 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-pink-200 dark:group-hover:bg-pink-500 dark:bg-slate-800 dark:highlight-white/5\"><svg class=\"h-6 w-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z\" class=\"fill-pink-400 group-hover:fill-pink-500 dark:group-hover:fill-pink-300 dark:fill-slate-600\"></path><path d=\"M11.082 9.107a.685.685 0 0 0-.72-.01.757.757 0 0 0-.362.653v4.5c0 .27.138.52.362.653.224.133.5.13.72-.01l3.571-2.25A.758.758 0 0 0 15 12a.758.758 0 0 0-.347-.643l-3.571-2.25Z\" class=\"fill-pink-50 group-hover:fill-pink-100 dark:group-hover:fill-white dark:fill-slate-400\"></path></svg></div>Screencasts</a></li><li><a class=\"group flex items-center lg:text-sm lg:leading-6 mb-4 font-medium text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"https://play.tailwindcss.com\"><div class=\"mr-4 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-blue-200 dark:group-hover:bg-blue-500 dark:bg-slate-800 dark:highlight-white/5\"><svg class=\"h-6 w-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 12a7 7 0 0 1 7-7h2a7 7 0 1 1 0 14h-2a7 7 0 0 1-7-7Z\" class=\"fill-blue-400 group-hover:fill-blue-500 dark:group-hover:fill-blue-400 dark:fill-slate-600\"></path><path d=\"M10.25 9.75 7.75 12l2.5 2.25\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"stroke-blue-50 dark:stroke-slate-400 dark:group-hover:stroke-white dark:stroke-slate-400\"></path><path d=\"m13.75 9.75 2.5 2.25-2.5 2.25\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"stroke-blue-200 dark:group-hover:stroke-white dark:stroke-slate-400\"></path></svg></div>Playground</a></li><li><a class=\"group flex items-center lg:text-sm lg:leading-6 mb-4 font-medium text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/resources\"><div class=\"mr-4 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-purple-200 dark:group-hover:bg-purple-400 dark:bg-slate-800 dark:highlight-white/5\"><svg class=\"h-6 w-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 8a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8ZM6 15a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-1Z\" class=\"fill-purple-400 group-hover:fill-purple-500 dark:group-hover:fill-purple-300 dark:fill-slate-600\"></path><path d=\"M13 8a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2V8Z\" class=\"fill-purple-200 group-hover:fill-purple-300 dark:group-hover:fill-white dark:fill-slate-400\"></path><path d=\"M13 15a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-1Z\" class=\"fill-purple-400 group-hover:fill-purple-500 dark:group-hover:fill-purple-300 dark:fill-slate-600\"></path></svg></div><span class=\"\">Resources</span></a></li><li><a class=\"group flex items-center lg:text-sm lg:leading-6 mb-4 font-medium text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"https://github.com/tailwindlabs/tailwindcss/discussions\"><div class=\"mr-4 rounded-md ring-1 ring-slate-900/5 shadow-sm group-hover:shadow group-hover:ring-slate-900/10 dark:ring-0 dark:shadow-none dark:group-hover:shadow-none dark:group-hover:highlight-white/10 group-hover:shadow-violet-200 dark:group-hover:bg-violet-500 dark:bg-slate-800 dark:highlight-white/5\"><svg class=\"h-6 w-6\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11 5a6 6 0 0 0-4.687 9.746c.215.27.315.62.231.954l-.514 2.058a1 1 0 0 0 1.485 1.1l2.848-1.71c.174-.104.374-.15.576-.148H13a6 6 0 0 0 0-12h-2Z\" class=\"fill-violet-400 group-hover:fill-violet-500 dark:group-hover:fill-violet-300 dark:fill-slate-600\"></path><circle cx=\"12\" cy=\"11\" r=\"1\" class=\"fill-white dark:group-hover:fill-white dark:fill-slate-400\"></circle><circle cx=\"9\" cy=\"11\" r=\"1\" class=\"fill-violet-200 dark:group-hover:fill-white dark:fill-slate-400\"></circle><circle cx=\"15\" cy=\"11\" r=\"1\" class=\"fill-violet-200 dark:fill-slate-400 dark:group-hover:fill-white\"></circle></svg></div>Community</a></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Getting Started</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/installation\">Installation</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/editor-setup\">Editor Setup</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/using-with-preprocessors\">Using with Preprocessors</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/optimizing-for-production\">Optimizing for Production</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/browser-support\">Browser Support</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/upgrade-guide\">Upgrade Guide</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Core Concepts</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/utility-first\">Utility-First Fundamentals</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/hover-focus-and-other-states\">Hover, Focus, and Other States</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/responsive-design\">Responsive Design</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/dark-mode\">Dark Mode</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/reusing-styles\">Reusing Styles</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/adding-custom-styles\">Adding Custom Styles</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/functions-and-directives\">Functions & Directives</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Customization</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/configuration\">Configuration</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/content-configuration\">Content</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/theme\">Theme</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/screens\">Screens</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/customizing-colors\">Colors</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/customizing-spacing\">Spacing</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/plugins\">Plugins</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/presets\">Presets</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Base Styles</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/preflight\">Preflight</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Layout</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/aspect-ratio\">Aspect Ratio</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/container\">Container</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/columns\">Columns</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/break-after\">Break After</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/break-before\">Break Before</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/break-inside\">Break Inside</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/box-decoration-break\">Box Decoration Break</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/box-sizing\">Box Sizing</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/display\">Display</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/float\">Floats</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/clear\">Clear</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/isolation\">Isolation</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/object-fit\">Object Fit</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/object-position\">Object Position</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/overflow\">Overflow</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/overscroll-behavior\">Overscroll Behavior</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/position\">Position</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/top-right-bottom-left\">Top / Right / Bottom / Left</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/visibility\">Visibility</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/z-index\">Z-Index</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Flexbox & Grid</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/flex-basis\">Flex Basis</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/flex-direction\">Flex Direction</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/flex-wrap\">Flex Wrap</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/flex\">Flex</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/flex-grow\">Flex Grow</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/flex-shrink\">Flex Shrink</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/order\">Order</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/grid-template-columns\">Grid Template Columns</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/grid-column\">Grid Column Start / End</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/grid-template-rows\">Grid Template Rows</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/grid-row\">Grid Row Start / End</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/grid-auto-flow\">Grid Auto Flow</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/grid-auto-columns\">Grid Auto Columns</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/grid-auto-rows\">Grid Auto Rows</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/gap\">Gap</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/justify-content\">Justify Content</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/justify-items\">Justify Items</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/justify-self\">Justify Self</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/align-content\">Align Content</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/align-items\">Align Items</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/align-self\">Align Self</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/place-content\">Place Content</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/place-items\">Place Items</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/place-self\">Place Self</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Spacing</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/padding\">Padding</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/margin\">Margin</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/space\">Space Between</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Sizing</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/width\">Width</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/min-width\">Min-Width</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/max-width\">Max-Width</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/height\">Height</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/min-height\">Min-Height</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/max-height\">Max-Height</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/size\">Size</a></li></ul></li><li class=\"mt-12 lg:mt-8\"><h5 class=\"mb-8 lg:mb-3 font-semibold text-slate-900 dark:text-slate-200\">Typography</h5><ul class=\"space-y-6 lg:space-y-2 border-l border-slate-100 dark:border-slate-800\"><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/font-family\">Font Family</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/font-size\">Font Size</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/font-smoothing\">Font Smoothing</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/font-style\">Font Style</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/font-weight\">Font Weight</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/font-variant-numeric\">Font Variant Numeric</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/letter-spacing\">Letter Spacing</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/line-clamp\">Line Clamp</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/line-height\">Line Height</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/list-style-image\">List Style Image</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/list-style-position\">List Style Position</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/list-style-type\">List Style Type</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/text-align\">Text Align</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/text-color\">Text Color</a></li><li><a class=\"block border-l pl-4 -ml-px border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300\" href=\"/docs/te