#
Tailwind
#
Awesome
#
Template
#
Dorks
- tailwind : responsive , tips , tricks
- Components : Navbar , sidebar , footer , grid , font
- Question
- scroll properpty
#
Cheatsheet
#
List of Tialwind Components
ui , comp
- https://uiverse.io/elements
- https://github.com/unlight/tailwind-components
- https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
- https://tailwindcomponents.com/
- https://tailwind-elements.com/docs/standard/forms/checkbox/
- https://tailwind.besoeasy.com/
- https://flowbite.com/docs/components/accordion/
- https://preline.co/docs/accordion.html
- https://tailgrids.com/components/accordions
- https://kimia-ui.vercel.app/components/collapse
- https://componentland.com/
- https://postsrc.com/components
- https://mambaui.com/components/snackbar
- https://wickedblocks.dev/groups/alert/
- https://tinywind.dev/components/
- https://tailwinduikit.com/components/webapp/feedback/alert#simple_with_action_button_warning
- https://fancytailwind.com/browse-components
- https://layoutsfortailwind.lalokalabs.dev/ui/avatar-initial/
- input : https://mynaui.com/
- https://www.hyperui.dev/
- https://kutty.netlify.app/
- https://www.tailwind-kit.com/components/buttons
- https://a17t.miles.land
- https://codepen.io/cruip
- https://creative-tim.com/learning-lab/tailwind-starter-kit/presentation
- ui : https://floatui.com
- ui : https://flowbite.com
- ui: https://flowrift.com/w
- https://github.com/shadcn/ui
- https://github.com/bayfrontmedia/skin
- https://github.com/ecklf/tailwindcss-radix
- https://github.com/unlight/tailwind-components
- tool : https://gimli.app/tailwinddx.html
comp: https://merakiui.com
comp: https://mynaui.com
comp: https://preline.co
- comp : https://sailboatui.com
- block : https://tailblocks.cc
- comp : https://tailwind-elements.com
- Box Modal : https://tailwind-kit.com
- lay : https://wickedblocks.dev
- comp : https://wind-ui.com
- web : https://windstatic.com/
#
Responsive
- Responsive Fonts
- Tailwind is Mobile First Design
- |-----------sm------md-------lg--------|
- |---grid-2---|---sm:grid-3-------------|
- |---grid-2----------|---md:grid-4------|
- cls : sm , md , lg , xl , 2xl (Apply to that Size or higher)
- Layout :
- Breakpoint Range :
- md:max-xl:bg-rose-100 (start : Mid , End : max-xl , Apply: bg-rose-100 )
- scroll
#
Tricks
#
Entencd tailwind
- HTML
<div class="text-rose-500 bg-[#534656]"> <div/>- CSS ._external
@apply text-rose-500 rounded-xl
#
Transition
.transition-colors .duration-300 .ease-in-out
#
Animate
- Spin : .animate -spin , -ping , -bounce , -pulse
#
Parent - Child
- group , peer
#
Blurry
.bg-opacity-20
#
Components :
- sidebar :
- Layout
- Hero
- Fetature
- Footer