tailwindcss.md

Setup

tailwindcss + prettier

VSCode Plugin Setting

// <Button containerClassName="py-4"> intellisense
"tailwindCSS.classAttributes": ["containerClassName"]

Classes

space-x-4

children space in between

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
	--tw-space-x-reverse: 0;
	margin-right: calc(1rem * var(--tw-space-x-reverse));
	margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

shrink-0

Do not shrink when window too small

form states

required:xx
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500

style based on parent state

group/{name}
group-hover/{name}

style base on sibling

<input type="email" class="peer ..."/>
<span class="mt-2 invisible peer-invalid:visible">

peer-placeholder-shown: xx;

peer-[.is-dirty] # has is-dirty className

other pseudo elements

placeholder:italic
file:rounded-full
marker:text-sky-400 // list bullet
selection:bg-fuchsia-300 // selected text

Attribute selectors

ARIA Attributes

aria-checked: xx <th aria-sort= "ascending" class=
	"aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
	>;

Data attributes

data-size="large"
className="data-[size=large]:p-8"

Custom modifier

3rd item

<li class="[&:nth-child(3)]:underline">
<div class="[&_p]:mt-4"> // _ is space