āļŠāļāļēāļĄāđāļāđāļāđāļĨāđāļ Tailwind
āļāļāļŠāļāļāđāļĨāļ°āļāļđāļāļąāļ§āļāļĒāđāļēāļāļāļĨāļēāļŠ Tailwind CSS āđāļāļāđāļĢāļĩāļĒāļĨāđāļāļĄāđ
āļāļēāļĢāļāļąāđāļāļāđāļē
āļāļģāļŦāļāļāļāđāļēāļāļĢāļ°āđāļ āļāđāļĨāļ°āđāļāļ·āđāļāļŦāļēāļāļāļāļāļāļāđāļāļĢāļ°āļāļāļ
āļāļąāļ§āļāļĒāđāļēāļāļāļĩāđāļāļąāđāļāđāļ§āđāļĨāđāļ§āļāļŦāļāđāļē
āđāļāđāļāļļāļāļŠāđāļāļĨāđāļāļĩāđāđāļāđāļāđāļāļĒāđāļāđāļāļĒāđāļēāļāļĢāļ§āļāđāļĢāđāļ§
ButtonCardBadgeAlertInput
āļāļđāļāļąāļ§āļāļĒāđāļēāļ
āļāļđāļāļĨāļĨāļąāļāļāđāļāļĩāđāļāļąāļāļĢāļđāļāđāļāļāđāļāļāđāļĢāļĩāļĒāļĨāđāļāļĄāđ
āļŠāļ§āļąāļŠāļāļĩ, Tailwind!
HTML āļāļĩāđāļŠāļĢāđāļēāļāļāļķāđāļ
āđāļāđāļ HTML āļāļĩāđāļŠāļĢāđāļēāļāļāļķāđāļāļāđāļ§āļĒāļāļēāļĢāļāļąāđāļāļāđāļēāļāļąāļāļāļļāļāļąāļ
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">āļŠāļ§āļąāļŠāļāļĩ, Tailwind!</div>
ðĄ āđāļāļĨāđāļāļĨāļąāļāļāļēāļĢāđāļāđāļāļēāļ
āļāļĨāļēāļŠāļāļąāđāļ§āđāļ:
- âĒ
hover:- āļŠāđāļāļĨāđāļŠāļāļēāļāļ°āđāļŪāđāļ§āļāļĢāđ - âĒ
focus:- āļŠāđāļāļĨāđāļŠāļāļēāļāļ°āđāļāļāļąāļŠ - âĒ
active:- āļŠāđāļāļĨāđāļŠāļāļēāļāļ°āđāļāļāļāļĩāļ - âĒ
transition-colors- āđāļāļāđāļāļāļāđāļāļēāļĢāđāļāļĨāļĩāđāļĒāļāļŠāļĩ
āļāļĨāļēāļŠāļāļĩāđāļāļāļāļŠāļāļāļ:
- âĒ
sm:- 640px āļāļķāđāļāđāļ - âĒ
md:- 768px āļāļķāđāļāđāļ - âĒ
lg:- 1024px āļāļķāđāļāđāļ - âĒ
xl:- 1280px āļāļķāđāļāđāļ