Tailwind CSS

---

Docs

https://tailwindcss.com/docs/

https://tailscan.com/tailwind - tailwind in human readable language

---

Play CDN

For development environment. Not for production.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

https://tailwindcss.com/docs/installation/play-cdn

---

Premade UI Components w Tailwind CSS

https://merakiui.com/

https://www.hyperui.dev/

https://tailspark.co/ - free for components, premium tier for templates

https://www.creative-tim.com/twcomponents - a bit messy

https://floatui.com/ - warning: might have to include more libs such as RadixUI, RadixVue, RadixSvelte, Alpine.js

https://tailgrids.com/docs — warning: you may have to include a JavaScript file

https://flowbite.com/docs/ — warning: you must include a JavaScript file

https://flyonui.com/ — warning: you must include a JavaScript file

https://www.preline.co/ — warning: you must include a JavaScript file

https://daisyui.com/ — warning: you must include a JavaScript and a CSS file

https://github.com/cruip/tailwind-dashboard-template - warning: comes with React

https://originui.com/ - warning: comes with React

---

Premade UI Components w React (NOT tailwind)

https://ant.design/docs/spec/introduce

---

Premade UI Components: Special Picks

Application Shell - https://tailspark.co/components?category=app&component=Application%20Shell

Tailwind Profile Card - https://jsfiddle.net/adamwathan/z5pscdmz/

---

Commonly Used

block

grid

grid-cols-6

flex

flex-col

inline-flex

relative absolute z-1 top-0 left-0

overflow-hidden

py-5

px-10

inset-1/2 -ml-[15px] -mt-[16px]

h-full w-full

text-center

text-white

text-xs

font-medium

font-mono

tracking-widest

bg-gray-900

bg-gradient-to-tl from-indigo-600 to-pink-600

max-h-90

---

Responsive

There are 5 breakpoints by default, inspired by common device resolutions.

They define a min width, they take effect at the specified breakpoint and above.

Min width:

sm = 40rem (640px)

md = 48rem (768px)

lg = 64rem (1024px)

xl = 80rem (1280px)

2xl = 96rem (1536px)

Max width:

max-sm

max-md

max-lg

max-xl

max-2xl

https://tailwindcss.com/docs/responsive-design

---

Max Height

max-h-3/4

max-h-[220px]

https://tailwindcss.com/docs/max-height

https://kombai.com/tailwind/max-height/