# 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/>