Tailwind CSS with CSS Preprocessors Guide
Uploaded by
khaliqspearman67Tailwind CSS with CSS Preprocessors Guide
Uploaded by
khaliqspearman67<!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="A
guide to using Tailwind with common CSS preprocessors like Sass, Less, and
Stylus."/><meta property="og:description" content="A guide to using Tailwind with
common CSS preprocessors like Sass, Less, and Stylus."/><meta
name="twitter:description" content="A guide to using Tailwind with common CSS
preprocessors like Sass, Less, and Stylus."/><meta name="twitter:card"
content="summary_large_image"/><meta name="twitter:site"
content="@tailwindcss"/><meta name="twitter:image"
content="[Link]
><meta name="twitter:creator" content="@tailwindcss"/><meta property="og:url"
content="[Link]
property="og:type" content="article"/><meta property="og:image"
content="[Link]
><link rel="alternate" type="application/rss+xml" title="RSS 2.0"
href="/feeds/[Link]"/><link rel="alternate" type="application/atom+xml"
title="Atom 1.0" href="/feeds/[Link]"/><link rel="alternate"
type="application/json" title="JSON Feed" href="/feeds/[Link]"/><link
rel="preconnect" href="[Link]
crossorigin="true"/><title>Using with Preprocessors - Tailwind CSS</title><meta
name="twitter:title" content="Using with Preprocessors - Tailwind CSS"/><meta
property="og:title" content="Using with Preprocessors - Tailwind CSS"/><meta
name="next-head-count" content="19"/><link rel="apple-touch-icon" sizes="180x180"
href="/favicons/[Link]?v=3"/><link rel="icon" type="image/png"
sizes="32x32" href="/favicons/[Link]?v=3"/><link rel="icon"
type="image/png" sizes="16x16" href="/favicons/[Link]?v=3"/><link
rel="manifest" href="/favicons/[Link]?v=3"/><link rel="mask-icon"
href="/favicons/[Link]?v=3" color="#38bdf8"/><link rel="shortcut
icon" href="/favicons/[Link]?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/[Link]?v=3"/><meta name="theme-color"
content="#f8fafc"/><script>
try {
if ([Link] === 'dark' || (!('theme' in localStorage)
&& [Link]('(prefers-color-scheme: dark)').matches)) {
[Link]('dark')
[Link]('meta[name="theme-
color"]').setAttribute('content', '#0B1120')
} else {
[Link]('dark')
}
} catch (_) {}
</script><link data-next-font="size-adjust" rel="preconnect" href="/"
crossorigin="anonymous"/><link rel="preload"
href="/_next/static/css/[Link]" as="style"/><link rel="stylesheet"
href="/_next/static/css/[Link]" data-n-g=""/><noscript data-n-
css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-
[Link]"></script><script src="/_next/static/chunks/webpack-
[Link]" defer=""></script><script src="/_next/static/chunks/framework-
[Link]" defer=""></script><script src="/_next/static/chunks/main-
[Link]" defer=""></script><script
src="/_next/static/chunks/pages/_app-[Link]" defer=""></script><script
src="/_next/static/chunks/[Link]" defer=""></script><script
src="/_next/static/chunks/[Link]" defer=""></script><script
src="/_next/static/chunks/[Link]" defer=""></script><script
src="/_next/static/chunks/[Link]" defer=""></script><script
src="/_next/static/chunks/[Link]" defer=""></script><script
src="/_next/static/chunks/pages/docs/[Link]"
defer=""></script><script
src="/_next/static/0k4d4h9jAewQidRfe7IO-/_buildManifest.js"
defer=""></script><script src="/_next/static/0k4d4h9jAewQidRfe7IO-/_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@[Link]" type="image/avif"/><img
src="/_next/static/media/docs@[Link]" alt="" class="w-[71.75rem]
flex-none max-w-none dark:hidden" decoding="async"/></picture><picture><source
srcSet="/_next/static/media/docs-dark@[Link]" type="image/avif"/><img
src="/_next/static/media/docs-dark@[Link]" 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.17<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="[Link]
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">Introducing Catalyst</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">A modern application UI kit for React</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="[Link]
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="[Link] 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 [Link].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 [Link] 1.21 1.87.87 [Link]-.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 [Link]-.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
[Link].82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 [Link].54.73.54 1.48 0
1.07-.01 1.93-.01 2.2 0 .[Link].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">Getting
Started<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">Using with
Preprocessors</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 pb-20"><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="[Link] 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="[Link] 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="[Link] 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 .[Link].[Link].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="[Link] 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="[Link] 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.[Link].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 data-active="true"><a
class="block border-l pl-4 -ml-px text-sky-500 border-current font-semibold
dark:text-sky-400" 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/text-decoration">Text Decoration</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-decoration-color">Text Decoration 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/text-decoration-style">Text Decoration
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/text-decoration-
thickness">Text Decoration Thickness</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-underline-offset">Text Underline Offset</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-transform">Text
Transform</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-overflow">Text
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/text-wrap">Text
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/text-indent">Text
Indent</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/vertical-
align">Vertical 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/whitespace">Whitespace</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/word-break">Word 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/hyphens">Hyphens</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">Content</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">Backgrounds</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/background-
attachment">Background Attachment</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/background-clip">Background Clip</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/background-color">Background 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/background-origin">Background Origin</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/background-position">Background 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/background-repeat">Background
Repeat</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/background-
size">Background 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/background-image">Background 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/gradient-color-stops">Gradient Color Stops</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">Borders</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/border-radius">Border Radius</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/border-width">Border 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/border-color">Border 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/border-style">Border 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/divide-width">Divide 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/divide-color">Divide 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/divide-style">Divide 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/outline-width">Outline 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/outline-color">Outline 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/outline-style">Outline 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/outline-offset">Outline Offset</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/ring-width">Ring 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/ring-color">Ring 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/ring-offset-width">Ring Offset 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/ring-offset-color">Ring Offset Color</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">Effects</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/box-shadow">Box Shadow</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-shadow-color">Box Shadow 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/opacity">Opacity</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/mix-blend-mode">Mix Blend 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/background-blend-mode">Background Blend Mode</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">Filters</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/blur">Blur</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/brightness">Brightness</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/contrast">Contrast</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/drop-shadow">Drop Shadow</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/grayscale">Grayscale</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/hue-rotate">Hue Rotate</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/invert">Invert</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/saturate">Saturate</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/sepia">Sepia</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/backdrop-blur">Backdrop Blur</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/backdrop-brightness">Backdrop
Brightness</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/backdrop-
contrast">Backdrop Contrast</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/backdrop-grayscale">Backdrop Grayscale</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/backdrop-hue-rotate">Backdrop Hue Rotate</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/backdrop-invert">Backdrop
Invert</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/backdrop-
opacity">Backdrop Opacity</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/backdrop-saturate">Backdrop Saturate</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/backdrop-sepia">Backdrop Sepia</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">Tables</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/border-collapse">Border Collapse</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/border-spacing">Border 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/table-layout">Table Layout</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/caption-side">Caption Side</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">Transitions & Animation</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/transition-property">Transition Property</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/transition-duration">Transition Duration</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/transition-timing-function">Transition
Timing Function</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/transition-
delay">Transition Delay</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/animation">Animation</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">Transforms</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/scale">Scale</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/rotate">Rotate</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/translate">Translate</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/skew">Skew</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/transform-origin">Transform Origin</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">Interactivity</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/accent-color">Accent
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/appearance">Appearance</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/cursor">Cursor</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/caret-color">Caret 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/pointer-events">Pointer Events</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/resize">Resize</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/scroll-behavior">Scroll 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/scroll-margin">Scroll 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/scroll-padding">Scroll 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/scroll-snap-align">Scroll Snap 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/scroll-snap-stop">Scroll Snap Stop</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/scroll-snap-type">Scroll Snap
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/touch-action">Touch
Action</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/user-select">User
Select</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/will-change">Will
Change</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">SVG</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/fill">Fill</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/stroke">Stroke</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/stroke-width">Stroke Width</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">Accessibility</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/screen-
readers">Screen Readers</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/forced-color-adjust">Forced Color Adjust</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">Official Plugins</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="[Link]
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="[Link]
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="[Link]
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="[Link]
Queries</a></li></ul></li></ul></nav><div class="fixed bottom-0 left-
[max(0px,calc(50%-45rem))] right-auto w-[19rem] pl-8 pr-6"><a class="group relative
px-4 py-3 bg-slate-800 hover:bg-slate-900 text-white rounded-lg font-medium text-sm
grid overflow-hidden border border-white/10 shadow-lg"
href="[Link] class="grid gap-1 z-
20"><p>Tailwind CSS v4.0 is here →</p><p class="text-[0.8125rem] text-gray-
300">Learn more in the upgrade guide.</p></div><div class="absolute h-full w-1/2
right-0 top-0 overflow-hidden"><div class="absolute h-full w-full bg-gradient-to-r
from-slate-800 group-hover:from-slate-900 z-10"></div><svg class="absolute -top-4 -
right-12" width="165" height="96" viewBox="0 0 165 96" fill="none"
xmlns="[Link] d="M93.0301 63.4105L93.0301
68.4739L93.0301 71.0057L93.0301 73.5374M93.0301 63.4105L98.1919 64.0006L118.345
66.3044C117.631 66.8832 116.863 67.5034 116.066 68.1028C106.209 75.5238 98.2194
77.4462 93.1673 73.6427C93.1209 73.6078 93.0752 73.5727 93.0301 73.5374M93.0301
63.4105C91.1447 65.8643 90.3565 68.0662 90.6924 69.9794C90.9258 71.3089 91.702
72.499 93.0301 73.5374M134.46 56.3822C134.54 52.8176 132.712 49.5452 128.943
46.7081C119.773 39.8039 107.225 41.5196 93.991 51.4832C85.6034 57.798 81.6091
63.8977 82.1263 69.2752M134.46 56.3822C134.347 61.4664 130.353 67.1449 122.574
73.0019C121.155 74.07 119.744 75.0435 118.345 75.9219C108.076 82.3698 98.4237
83.6975 90.6924 79.7446C89.6313 79.2021 88.6064 78.5601 87.6211 77.8183C84.2507
75.2809 82.4268 72.4 82.1263 69.2752M134.46 56.3822L134.462 62.5849C134.523 67.7552
130.527 73.5562 122.574 79.5439C109.312 89.5281 96.7642 91.2438 87.6211
84.3603C84.1199 81.7244 82.2875 78.7178 82.0982 75.4522L82.1263 69.2752M100.498
56.3823C99.6746 57.0024 98.9058 57.6225 98.1919 58.2013L106.218 59.132L123.507
61.1366C124.092 60.3785 124.571 59.6441 124.944 58.9349C125.631 57.6314 125.96
56.4127 125.932 55.287C125.89 53.6019 125.046 52.1251 123.397 50.8837C118.318
47.0595 110.328 48.982 100.498 56.3823Z" stroke="#626973"
stroke-width="0.5"></path><path d="M60.6665 50.0558L55.0653 45.8389M60.6665
50.0558L66.103 45.9629V42.1073M60.6665 50.0558V46.2002M55.0653 45.8389L47.2127
51.7508M55.0653 45.8389V41.9832M47.2127 51.7508L41.0624 47.1205L41.0624
43.2649M47.2127 51.7508V47.8952M41.0624 43.2649L48.915 37.3529L43.5884
33.3427L36.3673 27.9061L31.0681 23.9166M41.0624 43.2649L47.2127 47.8952M41.0624
43.2649L46.4059 39.2419L31.0681 27.7722L31.0681 23.9166M31.0681 23.9166L36.3673
19.9271L75.4382 9.48809L82.1651 14.5525M82.1651 14.5525L82.1652 18.4082L47.1721
27.7722M82.1651 14.5525L75.4382 16.3501L44.0277 24.7434L43.5884 25.0742L47.1721
27.7722M71.0452 29.8699L65.1145 25.4049L54.5711 33.3427L47.1721 27.7722M71.0452
29.8699L60.4469 37.849L66.103 42.1073M71.0452 29.8699V32.1251V33.7255L63.1771
39.9045L66.103 42.1073M66.103 42.1073L60.6665 46.2002M60.6665 46.2002L60.4469
46.0348L55.0653 41.9832M55.0653 41.9832L54.5711 42.3553L48.915 46.6136L47.2127
47.8952" stroke="#626973" stroke-width="0.5"></path><path d="M79.8241
57.5565C79.813 56.0436 79.0577 54.543 77.5518 53.4092C74.4766 51.0941 69.3697
51.1354 66.2396 53.4919C64.5949 54.7302 63.7916 56.3851 63.8458 58.0128M79.8241
57.5565V57.6245M79.8241 57.5565C79.8243 57.5792 79.8243 57.6018 79.8241
57.6245M63.8458 58.0128C63.8948 59.4828 64.643 60.9305 66.1023 62.0291C69.1775
64.3443 74.3119 64.2823 77.4419 61.9258C79.0163 60.7405 79.8127 59.1787 79.8241
57.6245M63.8458 58.0128L63.8458 61.8684C63.8948 63.3384 64.643 64.7861 66.1023
65.8848C69.1775 68.2 74.3119 68.1379 77.4419 65.7814C79.0392 64.5789 79.8357
62.9888 79.8241 61.4121L79.8241 57.6245" stroke="#626973"
stroke-width="0.5"></path></svg></div></a><div class="h-6 bg-gradient-to-t from-
white to-white/60 dark:from-slate-900 dark:to-slate-900/60"></div></div></div><div
class="lg:pl-[19.5rem]"><div class="max-w-3xl mx-auto pt-10 xl:max-w-none xl:ml-0
xl:mr-[15.5rem] xl:pr-16"><header id="header" class="relative z-20"><div><p
class="mb-2 text-sm leading-6 font-semibold text-sky-500 dark:text-sky-400">Getting
Started</p><div class="flex items-center"><h1 class="inline-block text-2xl sm:text-
3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">Using with
Preprocessors</h1></div></div><p class="mt-2 text-lg text-slate-700 dark:text-
slate-400">A guide to using Tailwind with common CSS preprocessors like Sass, Less,
and Stylus.</p></header><div id="content-wrapper" class="relative z-20 prose prose-
slate mt-8 dark:prose-dark"><p>Since Tailwind is a PostCSS plugin, there’s nothing
stopping you from using it with Sass, Less, Stylus, or other preprocessors, just
like you can with other PostCSS plugins like <a
href="[Link]
<p>It’s important to note that <strong>you don’t need to use a preprocessor with
Tailwind</strong> — you typically write very little CSS on a Tailwind project
anyway, so using a preprocessor just isn’t as beneficial as it would be in a
project where you write a lot of custom CSS.</p>
<p>This guide only exists as a reference for people who need to integrate Tailwind
with a preprocessor for reasons outside of their control, not because it is a
recommended practice.</p>
<hr/>
<h2 class="flex whitespace-pre-wrap not-prose" id="using-post-css-as-your-
preprocessor"><a class="group relative border-none lg:-ml-2 lg:pl-2" href="#using-
post-css-as-your-preprocessor"><span class="absolute -ml-8 hidden items-center
border-0 opacity-0 group-hover:opacity-100 group-focus:opacity-100 lg:flex"><span
class="flex h-6 w-6 items-center justify-center rounded-md text-slate-400 shadow-sm
ring-1 ring-slate-900/5 hover:text-slate-700 hover:shadow hover:ring-slate-900/10
dark:bg-slate-800 dark:text-slate-400 dark:shadow-none dark:ring-0 dark:hover:bg-
slate-700 dark:hover:text-slate-200"><svg width="12" height="12" fill="none" aria-
hidden="true"><path d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg></span></span>Using PostCSS as your
preprocessor</a></h2>
<p>If you’re using Tailwind for a brand new project and don’t need to integrate it
with any existing Sass/Less/Stylus stylesheets, you should highly consider relying
on other PostCSS plugins to add the preprocessor features you use instead of using
a separate preprocessor.</p>
<p>This has a few benefits:</p>
<ul role="list">
<li><strong>Your builds will be faster</strong>. Since your CSS doesn’t have to be
parsed and processed by multiple tools, your CSS will compile much quicker using
only PostCSS.</li>
<li><strong>No quirks or workarounds.</strong> Because Tailwind adds some new non-
standard keywords to CSS (like <code>@tailwind</code>, <code>@apply</code>,
<code>theme()</code>, etc.), you often have to write your CSS in annoying,
unintuitive ways to get a preprocessor to give you the expected output. Working
exclusively with PostCSS avoids this.</li>
</ul>
<p>For a fairly comprehensive list of available PostCSS plugins see the <a
href="[Link]
GitHub repository</a>, but here are a few important ones we use on our own projects
and can recommend.</p>
<h3 class="flex whitespace-pre-wrap not-prose" id="build-time-imports"><a
class="group relative border-none lg:-ml-2 lg:pl-2" href="#build-time-
imports"><span class="absolute -ml-8 hidden items-center border-0 opacity-0 group-
hover:opacity-100 group-focus:opacity-100 lg:flex"><span class="flex h-6 w-6 items-
center justify-center rounded-md text-slate-400 shadow-sm ring-1 ring-slate-900/5
hover:text-slate-700 hover:shadow hover:ring-slate-900/10 dark:bg-slate-800
dark:text-slate-400 dark:shadow-none dark:ring-0 dark:hover:bg-slate-700
dark:hover:text-slate-200"><svg width="12" height="12" fill="none" aria-
hidden="true"><path d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg></span></span>Build-time imports</a></h3>
<p>One of the most useful features preprocessors offer is the ability to organize
your CSS into multiple files and combine them at build time by processing
<code>@import</code> statements in advance, instead of in the browser.</p>
<p>The canonical plugin for handling this with PostCSS is <a
href="[Link]
<p>To use it, install the plugin via npm:</p>
<pre class="language-shell"><code class="language-shell"><span class="token
function">npm</span> <span class="token function">install</span> <span class="token
parameter variable">-D</span> postcss-import</code></pre>
<p>Then add it as the very first plugin in your PostCSS configuration:</p>
<pre class="language-js"><code class="language-js"><span class="token comment">//
[Link]</span>
module<span class="token punctuation">.</span><span class="token property-
access">exports</span> <span class="token operator">=</span> <span class="token
punctuation">{</span>
<span class="token literal-property property">plugins</span><span class="token
operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">'postcss-import'</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">tailwindcss</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">autoprefixer</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>One important thing to note about <code>postcss-import</code> is that it
strictly adheres to the CSS spec and disallows <code>@import</code> statements
anywhere except at the very top of a file.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-
rose-400 dark:bg-red-400 dark:ring-red-400"><svg width="6" height="6"
class="overflow-visible" aria-hidden="true"><path d="M0 0L6 6M6 0L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-rose-200 rounded-full dark:bg-red-200/25"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Won’t
work, <code>@import</code> statements must come first</p></div>
<pre class="language-css"><code class="language-css"><span class="token comment">/*
[Link] */</span>
<span class="token selector"><span class="token class">.btn</span></span> <span
class="token punctuation">{</span>
<span class="token property">padding</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'spacing.4'</span><span
class="token punctuation">)</span> <span class="token function">theme</span><span
class="token punctuation">(</span><span class="token
string">'spacing.2'</span><span class="token punctuation">)</span><span
class="token punctuation">;</span>
<span class="token comment">/* ... */</span>
<span class="token punctuation">}</span>
<span class="token comment">/* Will not work */</span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./components/card"</span><span class="token
punctuation">;</span></span></code></pre>
<p>The easiest solution to this problem is to never mix regular CSS and imports in
the same file. Instead, create one main entry-point file for your imports, and keep
all of your actual CSS in separate files.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-
cyan-500 dark:bg-sky-500 dark:ring-sky-500"><svg width="6" height="4.5"
class="overflow-visible" aria-hidden="true"><path d="M6 0L2 4.5L0 2.5" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-cyan-500/30 rounded-full dark:bg-sky-400/30"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Use
separate files for imports and actual CSS</p></div>
<pre class="language-css"><code class="language-css"><span class="token comment">/*
[Link] */</span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./components/[Link]"</span><span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./components/[Link]"</span><span class="token
punctuation">;</span></span></code></pre>
<pre class="language-css"><code class="language-css"><span class="token comment">/*
components/[Link] */</span>
<span class="token selector"><span class="token class">.btn</span></span> <span
class="token punctuation">{</span>
<span class="token property">padding</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'spacing.4'</span><span
class="token punctuation">)</span> <span class="token function">theme</span><span
class="token punctuation">(</span><span class="token
string">'spacing.2'</span><span class="token punctuation">)</span><span
class="token punctuation">;</span>
<span class="token comment">/* ... */</span>
<span class="token punctuation">}</span></code></pre>
<pre class="language-css"><code class="language-css"><span class="token comment">/*
components/[Link] */</span>
<span class="token selector"><span class="token class">.card</span></span> <span
class="token punctuation">{</span>
<span class="token property">padding</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'spacing.4'</span><span
class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* ... */</span>
<span class="token punctuation">}</span></code></pre>
<p>The place you are most likely to run into this situation is in your main CSS
file that includes your <code>@tailwind</code> declarations.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-
rose-400 dark:bg-red-400 dark:ring-red-400"><svg width="6" height="6"
class="overflow-visible" aria-hidden="true"><path d="M0 0L6 6M6 0L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-rose-200 rounded-full dark:bg-red-200/25"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Won’t
work, <code>@import</code> statements must come first</p></div>
<pre class="language-css"><code class="language-css"><span class="token
atrule"><span class="token rule">@tailwind</span> base<span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./[Link]"</span><span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@tailwind</span>
components<span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./[Link]"</span><span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@tailwind</span> utilities<span
class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./[Link]"</span><span class="token
punctuation">;</span></span></code></pre>
<p>You can solve this by creating separate files for each <code>@tailwind</code>
declaration, and then importing those files in your main stylesheet. To make this
easy, we provide separate files for each <code>@tailwind</code> declaration out of
the box that you can import directly from <code>node_modules</code>.</p>
<p>The <code>postcss-import</code> plugin is smart enough to look for files in the
<code>node_modules</code> folder automatically, so you don’t need to provide the
entire path — <code>"tailwindcss/base"</code> for example is enough.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-
cyan-500 dark:bg-sky-500 dark:ring-sky-500"><svg width="6" height="4.5"
class="overflow-visible" aria-hidden="true"><path d="M6 0L2 4.5L0 2.5" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-cyan-500/30 rounded-full dark:bg-sky-400/30"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-
200">Import our provided CSS files</p></div>
<pre class="language-css"><code class="language-css"><span class="token
atrule"><span class="token rule">@import</span> <span class="token
string">"tailwindcss/base"</span><span class="token punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./[Link]"</span><span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"tailwindcss/components"</span><span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./[Link]"</span><span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"tailwindcss/utilities"</span><span class="token
punctuation">;</span></span>
<span class="token atrule"><span class="token rule">@import</span> <span
class="token string">"./[Link]"</span><span class="token
punctuation">;</span></span></code></pre>
<h3 class="flex whitespace-pre-wrap not-prose" id="nesting"><a class="group
relative border-none lg:-ml-2 lg:pl-2" href="#nesting"><span class="absolute -ml-8
hidden items-center border-0 opacity-0 group-hover:opacity-100 group-focus:opacity-
100 lg:flex"><span class="flex h-6 w-6 items-center justify-center rounded-md text-
slate-400 shadow-sm ring-1 ring-slate-900/5 hover:text-slate-700 hover:shadow
hover:ring-slate-900/10 dark:bg-slate-800 dark:text-slate-400 dark:shadow-none
dark:ring-0 dark:hover:bg-slate-700 dark:hover:text-slate-200"><svg width="12"
height="12" fill="none" aria-hidden="true"><path d="M3.75 1v10M8.25 1v10M1
3.75h10M1 8.25h10" stroke="currentColor" stroke-width="1.5" stroke-
linecap="round"></path></svg></span></span>Nesting</a></h3>
<p>To add support for nested declarations, we recommend our bundled
<code>tailwindcss/nesting</code> plugin, which is a PostCSS plugin that wraps <a
href="[Link] or <a
href="[Link]
nesting">postcss-nesting</a> and acts as a compatibility layer to make sure your
nesting plugin of choice properly understands Tailwind’s custom syntax.</p>
<p>It’s included directly in the <code>tailwindcss</code> package itself, so to use
it all you need to do is add it to your PostCSS configuration, somewhere before
Tailwind:</p>
<pre class="language-js"><code class="language-js"><span class="token comment">//
[Link]</span>
module<span class="token punctuation">.</span><span class="token property-
access">exports</span> <span class="token operator">=</span> <span class="token
punctuation">{</span>
<span class="token literal-property property">plugins</span><span class="token
operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">'postcss-import'</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">'tailwindcss/nesting'</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">tailwindcss</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">autoprefixer</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>By default, it uses the <a href="[Link]
nested">postcss-nested</a> plugin under the hood, which uses a Sass-like syntax and
is the plugin that powers nesting support in the <a href="/docs/plugins#css-in-js-
syntax">Tailwind CSS plugin API</a>.</p>
<p>If you’d rather use <a
href="[Link]
nesting">postcss-nesting</a> (which is based on the standard <a
href="[Link] Nesting</a> specification),
first install the plugin:</p>
<pre class="language-shell"><code class="language-shell"><span class="token
function">npm</span> <span class="token function">install</span> <span class="token
parameter variable">-D</span> postcss-nesting</code></pre>
<p>Then pass the plugin itself as an argument to <code>tailwindcss/nesting</code>
in your PostCSS configuration:</p>
<pre class="language-js"><code class="language-js"><span class="token comment">//
[Link]</span>
module<span class="token punctuation">.</span><span class="token property-
access">exports</span> <span class="token operator">=</span> <span class="token
punctuation">{</span>
<span class="token literal-property property">plugins</span><span class="token
operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">'postcss-import'</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">'tailwindcss/nesting'</span><span
class="token operator">:</span> <span class="token
string">'postcss-nesting'</span><span class="token punctuation">,</span>
<span class="token literal-property property">tailwindcss</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">autoprefixer</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>This can also be helpful if for whatever reason you need to use a very specific
version of <code>postcss-nested</code> and want to override the version we bundle
with <code>tailwindcss/nesting</code> itself.</p>
<p>Note that if you are using <a href="[Link]
plugins/tree/main/plugin-packs/postcss-preset-env"><code>postcss-preset-env</
code></a> in your project, you should make sure to disable nesting and let
<code>tailwindcss/nesting</code> handle it for you instead:</p>
<pre class="language-js"><code class="language-js"><span class="token comment">//
[Link]</span>
module<span class="token punctuation">.</span><span class="token property-
access">exports</span> <span class="token operator">=</span> <span class="token
punctuation">{</span>
<span class="token literal-property property">plugins</span><span class="token
operator">:</span> <span class="token punctuation">{</span>
<span class="token string-property property">'postcss-import'</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">'tailwindcss/nesting'</span><span
class="token operator">:</span> <span class="token
string">'postcss-nesting'</span><span class="token punctuation">,</span>
<span class="token literal-property property">tailwindcss</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token string-property property">'postcss-preset-env'</span><span
class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">features</span><span
class="token operator">:</span> <span class="token punctuation">{</span> <span
class="token string-property property">'nesting-rules'</span><span class="token
operator">:</span> <span class="token boolean">false</span> <span class="token
punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token
punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<h3 class="flex whitespace-pre-wrap not-prose" id="variables"><a class="group
relative border-none lg:-ml-2 lg:pl-2" href="#variables"><span class="absolute -ml-
8 hidden items-center border-0 opacity-0 group-hover:opacity-100 group-
focus:opacity-100 lg:flex"><span class="flex h-6 w-6 items-center justify-center
rounded-md text-slate-400 shadow-sm ring-1 ring-slate-900/5 hover:text-slate-700
hover:shadow hover:ring-slate-900/10 dark:bg-slate-800 dark:text-slate-400
dark:shadow-none dark:ring-0 dark:hover:bg-slate-700 dark:hover:text-slate-
200"><svg width="12" height="12" fill="none" aria-hidden="true"><path d="M3.75
1v10M8.25 1v10M1 3.75h10M1 8.25h10" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg></span></span>Variables</a></h3>
<p>These days CSS variables (officially known as custom properties) have really
good <a href="[Link]
support</a>, so you don’t need a preprocessor to use variables at all.</p>
<pre class="language-css"><code class="language-css"><span class="token
selector"><span class="token pseudo-class">:root</span></span> <span class="token
punctuation">{</span>
<span class="token variable">--theme-color</span><span class="token
punctuation">:</span> <span class="token hexcode color">#52b3d0</span><span
class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">/* ... */</span>
<span class="token selector"><span class="token class">.btn</span></span> <span
class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token
punctuation">:</span> <span class="token function">var</span><span class="token
punctuation">(</span><span class="token variable">--theme-color</span><span
class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">/* ... */</span>
<span class="token punctuation">}</span></code></pre>
<p>We use CSS variables extensively within Tailwind itself, so if you can use
Tailwind, you can use native CSS variables.</p>
<p>You may also find that most of the things you’ve used variables for in the past
can be replaced with Tailwind’s <code>theme()</code> function, which gives you
access to all of your design tokens from your <code>[Link]</code> file
directly in your CSS:</p>
<pre class="language-css"><code class="language-css"><span class="token
selector"><span class="token class">.btn</span></span> <span class="token
punctuation">{</span>
<span class="token property">background-color</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'[Link].500'</span><span
class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'spacing.2'</span><span
class="token punctuation">)</span> <span class="token function">theme</span><span
class="token punctuation">(</span><span class="token
string">'spacing.4'</span><span class="token punctuation">)</span><span
class="token punctuation">;</span>
<span class="token comment">/* ... */</span>
<span class="token punctuation">}</span></code></pre>
<p>Learn more about the <code>theme()</code> function in our <a
href="/docs/functions-and-directives#theme">functions and directives
documentation</a>.</p>
<h3 class="flex whitespace-pre-wrap not-prose" id="vendor-prefixes"><a class="group
relative border-none lg:-ml-2 lg:pl-2" href="#vendor-prefixes"><span
class="absolute -ml-8 hidden items-center border-0 opacity-0 group-hover:opacity-
100 group-focus:opacity-100 lg:flex"><span class="flex h-6 w-6 items-center
justify-center rounded-md text-slate-400 shadow-sm ring-1 ring-slate-900/5
hover:text-slate-700 hover:shadow hover:ring-slate-900/10 dark:bg-slate-800
dark:text-slate-400 dark:shadow-none dark:ring-0 dark:hover:bg-slate-700
dark:hover:text-slate-200"><svg width="12" height="12" fill="none" aria-
hidden="true"><path d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg></span></span>Vendor prefixes</a></h3>
<p>For automatically managing vendor prefixes in your CSS, you should use <a
href="[Link]
<p>To use it, install it via npm:</p>
<pre class="language-shell"><code class="language-shell"><span class="token
function">npm</span> <span class="token function">install</span> <span class="token
parameter variable">-D</span> autoprefixer</code></pre>
<p>Then add it to the very end of your plugin list in your PostCSS
configuration:</p>
<pre class="language-js"><code class="language-js">module<span class="token
punctuation">.</span><span class="token property-access">exports</span> <span
class="token operator">=</span> <span class="token punctuation">{</span>
<span class="token literal-property property">plugins</span><span class="token
operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">tailwindcss</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token literal-property property">autoprefixer</span><span
class="token operator">:</span> <span class="token punctuation">{</span><span
class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<hr/>
<h2 class="flex whitespace-pre-wrap not-prose" id="using-sass-less-or-stylus"><a
class="group relative border-none lg:-ml-2 lg:pl-2" href="#using-sass-less-or-
stylus"><span class="absolute -ml-8 hidden items-center border-0 opacity-0 group-
hover:opacity-100 group-focus:opacity-100 lg:flex"><span class="flex h-6 w-6 items-
center justify-center rounded-md text-slate-400 shadow-sm ring-1 ring-slate-900/5
hover:text-slate-700 hover:shadow hover:ring-slate-900/10 dark:bg-slate-800
dark:text-slate-400 dark:shadow-none dark:ring-0 dark:hover:bg-slate-700
dark:hover:text-slate-200"><svg width="12" height="12" fill="none" aria-
hidden="true"><path d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg></span></span>Using Sass, Less, or
Stylus</a></h2>
<p>For the best development experience, we highly recommend that you <a
href="/docs/using-with-preprocessors#using-post-css-as-your-preprocessor">use
PostCSS exclusively</a>, and that you don’t use preprocessors like Sass or Less in
your Tailwind projects.</p>
<p>To use Tailwind with a preprocessing tool like Sass, Less, or Stylus, you’ll
need to add an additional build step to your project that lets you run your
preprocessed CSS through PostCSS. If you’re using Autoprefixer in your project, you
already have something like this set up.</p>
<p>See our documentation on <a href="/docs/installation/using-postcss">installing
Tailwind as a PostCSS plugin</a> to learn more about integrating Tailwind into your
existing build process.</p>
<p>The most important thing to understand about using Tailwind with a preprocessor
is that <strong>preprocessors like Sass, Less, and Stylus run separately, before
Tailwind</strong>. This means that you can’t feed output from Tailwind’s
<code>theme()</code> function into a Sass color function for example, because the
<code>theme()</code> function isn’t actually evaluated until your Sass has been
compiled to CSS and fed into PostCSS.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-
rose-400 dark:bg-red-400 dark:ring-red-400"><svg width="6" height="6"
class="overflow-visible" aria-hidden="true"><path d="M0 0L6 6M6 0L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-rose-200 rounded-full dark:bg-red-200/25"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Won’t
work, Sass is processed first</p></div>
<pre class="language-css"><code class="language-css"><span class="token
selector"><span class="token class">.alert</span></span> <span class="token
punctuation">{</span>
<span class="token property">background-color</span><span class="token
punctuation">:</span> <span class="token function">darken</span><span class="token
punctuation">(</span><span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'[Link].500'</span><span
class="token punctuation">)</span><span class="token punctuation">,</span> <span
class="token number">10</span><span class="token unit">%</span><span class="token
punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Aside from that, some preprocessors have quirks when used with Tailwind, which
are outlined with workarounds below.</p>
<h3 class="flex whitespace-pre-wrap not-prose" id="sass"><a class="group relative
border-none lg:-ml-2 lg:pl-2" href="#sass"><span class="absolute -ml-8 hidden
items-center border-0 opacity-0 group-hover:opacity-100 group-focus:opacity-100
lg:flex"><span class="flex h-6 w-6 items-center justify-center rounded-md text-
slate-400 shadow-sm ring-1 ring-slate-900/5 hover:text-slate-700 hover:shadow
hover:ring-slate-900/10 dark:bg-slate-800 dark:text-slate-400 dark:shadow-none
dark:ring-0 dark:hover:bg-slate-700 dark:hover:text-slate-200"><svg width="12"
height="12" fill="none" aria-hidden="true"><path d="M3.75 1v10M8.25 1v10M1
3.75h10M1 8.25h10" stroke="currentColor" stroke-width="1.5" stroke-
linecap="round"></path></svg></span></span>Sass</a></h3>
<p>When using Tailwind with Sass, using <code>!important</code> with
<code>@apply</code> requires you to use interpolation to compile properly.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-
rose-400 dark:bg-red-400 dark:ring-red-400"><svg width="6" height="6"
class="overflow-visible" aria-hidden="true"><path d="M0 0L6 6M6 0L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-rose-200 rounded-full dark:bg-red-200/25"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Won’t
work, Sass complains about !important</p></div>
<pre class="language-css"><code class="language-css"><span class="token
selector"><span class="token class">.alert</span></span> <span class="token
punctuation">{</span>
<span class="token atrule atapply"><span class="token rule">@apply</span> bg-red-
500 <span class="token important">!important</span><span class="token
punctuation">;</span></span>
<span class="token punctuation">}</span></code></pre>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-
cyan-500 dark:bg-sky-500 dark:ring-sky-500"><svg width="6" height="4.5"
class="overflow-visible" aria-hidden="true"><path d="M6 0L2 4.5L0 2.5" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-cyan-500/30 rounded-full dark:bg-sky-400/30"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Use
interpolation as a workaround</p></div>
<pre class="language-css"><code class="language-css"><span class="token
selector"><span class="token class">.alert</span></span> <span class="token
punctuation">{</span>
<span class="token atrule atapply"><span class="token rule">@apply</span> bg-red-
500 #</span><span class="token punctuation">{</span><span class="token important">!
important</span><span class="token punctuation">}</span><span class="token
punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>In addition to this, Sass has trouble with Tailwind’s <code>screen()</code>
function unless wrapped in parentheses.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-
rose-400 dark:bg-red-400 dark:ring-red-400"><svg width="6" height="6"
class="overflow-visible" aria-hidden="true"><path d="M0 0L6 6M6 0L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-rose-200 rounded-full dark:bg-red-200/25"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Won’t
work, Sass will generate an error</p></div>
<pre class="language-css"><code class="language-css"><span class="token
atrule"><span class="token rule">@media</span> <span class="token
function">screen</span><span class="token punctuation">(</span>md<span class="token
punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token class">.foo</span></span> <span
class="token punctuation">{</span>
<span class="token property">color</span><span class="token
punctuation">:</span> <span class="token color">blue</span><span class="token
punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-
cyan-500 dark:bg-sky-500 dark:ring-sky-500"><svg width="6" height="4.5"
class="overflow-visible" aria-hidden="true"><path d="M6 0L2 4.5L0 2.5" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-cyan-500/30 rounded-full dark:bg-sky-400/30"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Wrap
the screen() function in parentheses</p></div>
<pre class="language-css"><code class="language-css"><span class="token
atrule"><span class="token rule">@media</span> <span class="token
punctuation">(</span><span class="token function">screen</span><span class="token
punctuation">(</span>md<span class="token punctuation">)</span><span class="token
punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token class">.foo</span></span> <span
class="token punctuation">{</span>
<span class="token property">color</span><span class="token
punctuation">:</span> <span class="token color">blue</span><span class="token
punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Technically this results in an extra set of parentheses around your media query,
but it still works.</p>
<h3 class="flex whitespace-pre-wrap not-prose" id="stylus"><a class="group relative
border-none lg:-ml-2 lg:pl-2" href="#stylus"><span class="absolute -ml-8 hidden
items-center border-0 opacity-0 group-hover:opacity-100 group-focus:opacity-100
lg:flex"><span class="flex h-6 w-6 items-center justify-center rounded-md text-
slate-400 shadow-sm ring-1 ring-slate-900/5 hover:text-slate-700 hover:shadow
hover:ring-slate-900/10 dark:bg-slate-800 dark:text-slate-400 dark:shadow-none
dark:ring-0 dark:hover:bg-slate-700 dark:hover:text-slate-200"><svg width="12"
height="12" fill="none" aria-hidden="true"><path d="M3.75 1v10M8.25 1v10M1
3.75h10M1 8.25h10" stroke="currentColor" stroke-width="1.5" stroke-
linecap="round"></path></svg></span></span>Stylus</a></h3>
<p>When using Tailwind with Stylus, you can’t use Tailwind’s <code>@apply</code>
feature without wrapping the entire CSS rule in <code>@css</code> so that Stylus
treats it as literal CSS.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-
rose-400 dark:bg-red-400 dark:ring-red-400"><svg width="6" height="6"
class="overflow-visible" aria-hidden="true"><path d="M0 0L6 6M6 0L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-rose-200 rounded-full dark:bg-red-200/25"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Won’t
work, Stylus complains about @apply</p></div>
<pre class="language-css"><code class="language-css"><span class="token
selector"><span class="token class">.card</span></span> <span class="token
punctuation">{</span>
@apply rounded-lg bg-white p-4
<span class="token punctuation">}</span></code></pre>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-
cyan-500 dark:bg-sky-500 dark:ring-sky-500"><svg width="6" height="4.5"
class="overflow-visible" aria-hidden="true"><path d="M6 0L2 4.5L0 2.5" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-cyan-500/30 rounded-full dark:bg-sky-400/30"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Use
@css to avoid processing as Stylus</p></div>
<pre class="language-css"><code class="language-css"><span class="token
atrule"><span class="token rule">@css</span></span> <span class="token
punctuation">{</span>
<span class="token selector"><span class="token class">.card</span></span> <span
class="token punctuation">{</span>
@apply rounded-lg bg-white p-4
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>This comes with a significant cost however, which is that <strong>you cannot use
any Stylus features inside a <code>@css</code> block</strong>.</p>
<p>Another option is to use the <code>theme()</code> function instead of
<code>@apply</code>, and write out the actual CSS properties in long form:</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-
cyan-500 dark:bg-sky-500 dark:ring-sky-500"><svg width="6" height="4.5"
class="overflow-visible" aria-hidden="true"><path d="M6 0L2 4.5L0 2.5" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-cyan-500/30 rounded-full dark:bg-sky-400/30"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Use
theme() instead of @apply</p></div>
<pre class="language-css"><code class="language-css"><span class="token
selector"><span class="token class">.card</span></span> <span class="token
punctuation">{</span>
<span class="token property">border-radius</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'[Link]'</span><span
class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'[Link]'</span><span
class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token
punctuation">:</span> <span class="token function">theme</span><span class="token
punctuation">(</span><span class="token string">'spacing.4'</span><span
class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>In addition to this, Stylus has trouble with Tailwind’s <code>screen()</code>
function unless you use interpolation and wrap it in parentheses.</p>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-rose-400 text-white flex items-center justify-center ring-2 ring-
rose-400 dark:bg-red-400 dark:ring-red-400"><svg width="6" height="6"
class="overflow-visible" aria-hidden="true"><path d="M0 0L6 6M6 0L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-rose-200 rounded-full dark:bg-red-200/25"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Won’t
work, Stylus will generate an error</p></div>
<pre class="language-css"><code class="language-css"><span class="token
atrule"><span class="token rule">@media</span> <span class="token
function">screen</span><span class="token punctuation">(</span>md<span class="token
punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token class">.foo</span></span> <span
class="token punctuation">{</span>
<span class="token property">color</span><span class="token
punctuation">:</span> <span class="token color">blue</span><span class="token
punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<div class="flex items-start my-6 space-x-4"><div class="relative mt-1 w-4 h-4
rounded-full bg-cyan-500 text-white flex items-center justify-center ring-2 ring-
cyan-500 dark:bg-sky-500 dark:ring-sky-500"><svg width="6" height="4.5"
class="overflow-visible" aria-hidden="true"><path d="M6 0L2 4.5L0 2.5" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg><div class="absolute top-full mt-1 left-[0.46875rem]
w-px h-[1.375rem] bg-cyan-500/30 rounded-full dark:bg-sky-400/30"></div></div><p
class="m-0 flex-1 text-base font-semibold text-slate-900 dark:text-slate-200">Use
interpolation and parentheses as a workaround</p></div>
<pre class="language-css"><code class="language-css"><span class="token
atrule"><span class="token rule">@media</span> <span class="token
punctuation">(</span></span><span class="token punctuation">{</span><span
class="token string">'screen(md)'</span><span class="token
punctuation">}</span><span class="token selector"><span class="token
punctuation">)</span></span> <span class="token punctuation">{</span>
<span class="token selector"><span class="token class">.foo</span></span> <span
class="token punctuation">{</span>
<span class="token property">color</span><span class="token
punctuation">:</span> <span class="token color">blue</span><span class="token
punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Technically this results in an extra set of parentheses around your media query,
but it still works.</p></div><footer class="text-sm leading-6 mt-12"><div
class="mb-10 text-slate-700 font-semibold flex items-center dark:text-slate-200"><a
class="group flex items-center hover:text-slate-900 dark:hover:text-white"
href="/docs/editor-setup"><svg viewBox="0 0 3 6" class="mr-3 w-auto h-1.5 text-
slate-400 overflow-visible group-hover:text-slate-600 dark:group-hover:text-slate-
300"><path d="M3 0L0 3L3 6" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"></path></svg>Editor Setup</a><a
class="group ml-auto flex items-center hover:text-slate-900 dark:hover:text-white"
href="/docs/optimizing-for-production">Optimizing for Production<svg viewBox="0 0 3
6" class="ml-3 w-auto h-1.5 text-slate-400 overflow-visible group-hover:text-slate-
600 dark:group-hover:text-slate-300"><path d="M0 0L3 3L0 6" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-
linejoin="round"></path></svg></a></div><div class="pt-10 pb-28 border-t border-
slate-200 sm:flex justify-between text-slate-500 dark:border-slate-200/5"><div
class="mb-6 sm:mb-0 sm:flex"><p>Copyright © <!-- -->2025<!-- --> Tailwind Labs
Inc.</p><p class="sm:ml-4 sm:pl-4 sm:border-l sm:border-slate-200 dark:sm:border-
slate-200/5"><a class="hover:text-slate-900 dark:hover:text-slate-400"
href="/brand">Trademark Policy</a></p></div><a class="hover:text-slate-900
dark:hover:text-slate-400"
href="[Link]
[Link]">Edit this page on GitHub</a></div></footer><div
class="fixed z-20 top-[3.8125rem] bottom-0 right-[max(0px,calc(50%-45rem))] w-
[19.5rem] py-10 overflow-y-auto hidden xl:block"><div class="px-8"><h5 class="text-
slate-900 font-semibold mb-4 text-sm leading-6 dark:text-slate-100">On this
page</h5><ul class="text-slate-700 text-sm leading-6"><li><a href="#using-post-css-
as-your-preprocessor" class="block py-1 font-medium font-medium text-sky-500
dark:text-sky-400">Using PostCSS as your preprocessor</a></li><li class="ml-4"><a
href="#build-time-imports" class="group flex items-start py-1 hover:text-slate-900
dark:text-slate-400 dark:hover:text-slate-300"><svg width="3" height="24"
viewBox="0 -9 3 24" class="mr-2 text-slate-400 overflow-visible group-hover:text-
slate-600 dark:text-slate-600 dark:group-hover:text-slate-500"><path d="M0 0L3 3L0
6" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg>Build-time imports</a></li><li class="ml-4"><a
href="#nesting" class="group flex items-start py-1 hover:text-slate-900 dark:text-
slate-400 dark:hover:text-slate-300"><svg width="3" height="24" viewBox="0 -9 3 24"
class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-
slate-600 dark:group-hover:text-slate-500"><path d="M0 0L3 3L0 6" fill="none"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg>Nesting</a></li><li class="ml-4"><a
href="#variables" class="group flex items-start py-1 hover:text-slate-900
dark:text-slate-400 dark:hover:text-slate-300"><svg width="3" height="24"
viewBox="0 -9 3 24" class="mr-2 text-slate-400 overflow-visible group-hover:text-
slate-600 dark:text-slate-600 dark:group-hover:text-slate-500"><path d="M0 0L3 3L0
6" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg>Variables</a></li><li class="ml-4"><a
href="#vendor-prefixes" class="group flex items-start py-1 hover:text-slate-900
dark:text-slate-400 dark:hover:text-slate-300"><svg width="3" height="24"
viewBox="0 -9 3 24" class="mr-2 text-slate-400 overflow-visible group-hover:text-
slate-600 dark:text-slate-600 dark:group-hover:text-slate-500"><path d="M0 0L3 3L0
6" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg>Vendor prefixes</a></li><li><a href="#using-
sass-less-or-stylus" class="block py-1 font-medium hover:text-slate-900 dark:text-
slate-400 dark:hover:text-slate-300">Using Sass, Less, or Stylus</a></li><li
class="ml-4"><a href="#sass" class="group flex items-start py-1 hover:text-slate-
900 dark:text-slate-400 dark:hover:text-slate-300"><svg width="3" height="24"
viewBox="0 -9 3 24" class="mr-2 text-slate-400 overflow-visible group-hover:text-
slate-600 dark:text-slate-600 dark:group-hover:text-slate-500"><path d="M0 0L3 3L0
6" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg>Sass</a></li><li class="ml-4"><a href="#stylus"
class="group flex items-start py-1 hover:text-slate-900 dark:text-slate-400
dark:hover:text-slate-300"><svg width="3" height="24" viewBox="0 -9 3 24"
class="mr-2 text-slate-400 overflow-visible group-hover:text-slate-600 dark:text-
slate-600 dark:group-hover:text-slate-500"><path d="M0 0L3 3L0 6" fill="none"
stroke="currentColor" stroke-width="1.5"
stroke-linecap="round"></path></svg>Stylus</a></li></ul></div><div class="mt-8
overflow-hidden"><div class="p-8"><a href="[Link]
ref=sidebar" class="relative block pt-80 -m-6 p-6 rounded-lg focus:outline-none
focus:bg-slate-50 dark:focus:bg-slate-800/25"><img class="pointer-events-none h-
[673px] w-[536px] max-w-none absolute -top-[112px] -right-6" src="/img/refactoring-
[Link]" alt="Refactoring UI by Adam Wathan and Steve Schoger"
decoding="async"/><div><p class="text-[0.8125rem] font-semibold leading-5 text-sky-
500 dark:text-sky-400">From the creators of Tailwind CSS</p><p class="mt-1 text-
base font-bold tracking-tight leading-[1.375] text-slate-900 dark:text-slate-
200">Make your ideas look awesome, without relying on a designer.</p><figure
class="mt-6 pl-4 border-l border-slate-100 dark:border-slate-700"><blockquote
class="text-sm leading-5 text-slate-600 dark:text-slate-400">“This is the survival
kit I wish I had when I started building apps.”</blockquote><figcaption class="mt-3
text-xs leading-5 text-slate-500">Derrick Reimer, <span
class="">SavvyCal</span></figcaption></figure></div></a></div></div></div></div></
div></div></div><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><script id="__NEXT_DATA__"
type="application/json">{"props":{"pageProps":{}},"page":"/docs/using-with-
preprocessors","query":
{},"buildId":"0k4d4h9jAewQidRfe7IO-","nextExport":true,"autoExport":true,"isFallbac
k":false,"scriptLoader":[]}</script><script> </script></body></html>
You might also like
- Tailwind CSS v4.1.11 Properties and ThemeNo ratings yetTailwind CSS v4.1.11 Properties and Theme118 pages
- CSS Cheat Sheet - Interactive, Not A PDFNo ratings yetCSS Cheat Sheet - Interactive, Not A PDF1 page
- Transformer and Solar Light Installations ReportNo ratings yetTransformer and Solar Light Installations Report32 pages
- Universal Verification Methodology OverviewNo ratings yetUniversal Verification Methodology Overview10 pages
- Control Systems Test Questions and AnswersNo ratings yetControl Systems Test Questions and Answers7 pages
- Amit Gorai's Tech Journey and AchievementsNo ratings yetAmit Gorai's Tech Journey and Achievements1 page
- SKSS Software Suite Model 5670: Installation and Operations Manual GNo ratings yetSKSS Software Suite Model 5670: Installation and Operations Manual G24 pages
- Class 10 Chapterwise PYQs: Real NumbersNo ratings yetClass 10 Chapterwise PYQs: Real Numbers158 pages
- Direct and Digital Marketing StrategiesNo ratings yetDirect and Digital Marketing Strategies20 pages
- Hamiltonian Cycle NP-Completeness ProofNo ratings yetHamiltonian Cycle NP-Completeness Proof89 pages
- Study of Spindle Drives For Machining CeNo ratings yetStudy of Spindle Drives For Machining Ce5 pages
- 8 - Databases DBMS DBA Normalisation SQL CodingNo ratings yet8 - Databases DBMS DBA Normalisation SQL Coding11 pages