divmagic Make design
SimpleNowLiveFunMatterSimple
ꯗꯣꯀꯨꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫ꯕ꯭ꯂꯣꯒꯇꯥ ꯂꯩ꯫
GitHub
Brian
Brian

ꯗꯤꯚꯃꯦꯖꯤꯛ ꯐꯥꯎꯟꯗꯔ ꯑꯣꯏꯈꯤ꯫

ꯖꯨꯂꯥꯏ ꯸, ꯲꯰꯲꯳ꯗꯥ ꯊꯣꯀꯈꯤ꯫

Tailwind CSS.- ꯅꯍꯥꯛꯀꯤ HTML ꯊꯥꯗꯣꯛꯇꯨꯅꯥ ꯃꯣꯗꯔꯟ ꯋꯦꯕꯁꯥꯏꯇꯁꯤꯡ ꯌꯥꯝꯅꯥ ꯊꯨꯅꯥ ꯁꯦꯃꯒꯠꯄꯥ꯫

Image 0

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯣꯗꯔꯟ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ, ꯑꯃꯁꯨꯡ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯋꯦꯕꯁꯥꯏꯠꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯥ ꯄꯥꯝꯂꯕꯗꯤ, Tailwind CSS.ꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯇ꯭ꯔꯦꯗꯤꯁ꯭ꯅꯦꯜ CSS.ꯀꯤ ꯑꯣꯊꯣꯔꯤꯡ ꯄ꯭ꯔꯣꯁꯦꯁꯇꯥ ꯑꯍꯣꯡꯕꯥ ꯄꯨꯔꯀꯏ, ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ HTMLꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯀꯁ꯭ꯇꯝ ꯏꯟꯇꯔꯐꯦꯁꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ Tailwind CSS.ꯅꯥ ꯅꯨꯃꯤꯠ ꯈꯨꯗꯤꯡꯒꯤ ꯏꯅꯁ꯭ꯇꯣꯜ ꯃꯤꯂꯤꯌꯟ ꯵ ꯍꯦꯟꯅꯥ ꯂꯩꯕꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯃꯤꯡ ꯆꯠꯄꯥ CSS.

ꯏꯖ ꯑꯣꯐ ꯂꯤꯚꯤꯡ ꯀꯝꯞꯂꯦꯛꯁ ꯗꯤꯖꯥꯏꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ꯫

Image 1

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯗꯤꯖꯥꯏꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯑꯁꯤ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯑꯃꯥ ꯑꯣꯏꯔꯀꯏ꯫ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯗꯤꯖꯥꯏꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯋꯦꯕꯁꯥꯏꯠꯀꯤ ꯄꯔꯐꯣꯃꯦꯟꯁ ꯑꯃꯁꯨꯡ ꯃꯦꯟꯇꯦꯅꯦꯕꯤꯂꯤꯇꯤꯗꯥ ꯑꯀꯥꯌꯕꯥ ꯄꯤꯗꯅꯥ, ꯑꯆꯝꯕꯥ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯐꯖꯅꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯁꯥꯒꯠꯂꯨ꯫

Image 2

Tailwind CSS.ꯀꯤ ꯐꯖꯕꯥ ꯑꯁꯤ ꯃꯁꯤꯒꯤ ꯋꯥꯔꯁꯥꯏꯇꯤꯂꯤꯇꯤꯗꯥ ꯂꯩ꯫ ꯑꯗꯣꯝꯅꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯕ꯭ꯂꯣꯒ ꯄꯦꯖ ꯑꯃꯗꯒꯤ ꯍꯧꯔꯒꯥ ꯑꯍꯣꯡꯕꯥ ꯏ-ꯀꯃꯔꯁ ꯄ꯭ꯂꯦꯠꯐꯣꯔꯝ ꯑꯃꯗꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ, ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯏꯟꯠꯌꯨꯏꯇꯤꯕ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ꯫

ꯑꯗꯣꯝ ꯑꯗꯣꯃꯒꯤ ꯏꯃꯦꯖꯃꯦꯟꯇ ꯈꯛꯇꯅꯥ ꯂꯤꯃꯤꯇꯦꯗ ꯑꯣꯏꯔꯤ꯫ ꯚꯦꯅꯤꯂꯥ CSS.ꯀꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯈꯦꯠꯅꯕꯥ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯀꯁ꯭ꯇꯝ ꯗꯤꯖꯥꯏꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯕꯒꯤ ꯈꯣꯡꯖꯦꯜ ꯑꯁꯤꯅꯤ꯫

div, div class, p classꯒꯨꯝꯕꯥ html ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯁ꯭ꯇꯃꯔ css ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯇ꯭ꯔꯦꯗꯤꯁ꯭ꯅꯦꯜ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯣꯄꯁꯟ ꯑꯃꯅꯤ ꯑꯗꯨꯕꯨ Tailwind CSSꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯄꯥ ꯈꯣꯡꯖꯦꯜ ꯐꯒꯠꯍꯅꯕꯥ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄꯨꯟꯁꯤꯕꯨ ꯍꯦꯟꯅꯥ ꯂꯥꯌꯊꯣꯀꯍꯜꯂꯤ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯧꯑꯣꯡꯁꯤꯡ ꯑꯁꯤ ꯇꯁꯦꯡꯅꯥ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯄꯥꯡꯊꯣꯛꯇꯦ꯫

Image 3

ꯆꯠꯅꯕꯤꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, CSS.ꯅꯥ ꯃꯥꯂꯦꯃꯒꯤ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡ ꯃꯇꯧꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯂꯤꯡꯈꯠꯇꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇ-ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯔꯤꯐꯥꯏꯅꯤꯡ ꯇꯧꯗꯨꯅꯥ ꯏꯔꯤ꯫ ꯃꯁꯤ ꯃꯤꯌꯥꯝꯅꯥ ꯄꯥꯝꯅꯕꯥ ꯃꯦꯊꯗ ꯑꯃꯅꯤ ꯍꯥꯌꯔꯕꯁꯨ, ꯃꯁꯤꯅꯥ ꯑꯆꯧꯕꯥ, ꯁꯦꯃꯖꯤꯟ-ꯁꯥꯖꯤꯅꯕꯗꯥ ꯋꯥꯕꯥ ꯀꯣꯗ ꯑꯃꯥ ꯊꯣꯀꯍꯅꯕꯥ ꯌꯥꯏ꯫

Tailwind CSS.ꯅꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯁꯤꯕꯨ ꯁꯤꯡꯅꯕꯥ ꯄꯤꯔꯤ, ꯃꯁꯤꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ-ꯐꯔꯁ꯭ꯠ CSS.ꯅꯥ ꯍꯦꯟꯅꯥ ꯁꯦꯡꯂꯕꯥ, ꯍꯦꯟꯅꯥ ꯃꯦꯟꯇꯦꯟ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯁꯣꯂꯨꯁꯟ ꯑꯃꯥ ꯄꯤꯔꯤ ꯍꯥꯌꯅꯥ ꯂꯧꯏ꯫

Tailwind CSS.ꯀꯤꯗꯃꯛ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯃꯤꯡ ꯆꯠꯄꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤ꯫

Image 4

daisyUI ꯑꯁꯤ Tailwind CSS.ꯀꯤꯗꯃꯛ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯃꯤꯡ ꯆꯠꯄꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤꯅꯤ, ꯃꯁꯤꯗꯥ ꯃꯃꯥꯡꯗꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯵꯰ ꯍꯦꯟꯅꯥ, ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯵꯰꯰+, ꯑꯃꯁꯨꯡ ꯋꯥꯔꯆꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯣꯏꯕꯥ ꯅꯥꯏꯗꯕꯥ ꯑꯣꯏꯊꯣꯀꯄꯥ ꯌꯥꯕꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫ ꯃꯁꯤꯅꯥ ꯑꯅꯧꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯈꯨꯗꯤꯡꯗꯥ ꯍꯨꯏ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯒꯠꯄꯗꯒꯤ ꯀꯅꯕꯥ ꯉꯝꯃꯤ꯫

ꯃꯇꯝ ꯈꯨꯗꯤꯡꯗꯥ ꯍꯨꯏꯜ ꯑꯗꯨ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯗꯣꯛ-ꯁꯦꯃꯖꯤꯟ ꯇꯧꯔꯣꯏꯗꯕꯅꯤ꯫

Image 5

ꯑꯅꯧꯕꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤꯗꯃꯛ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡ ꯗꯖꯟ ꯀꯌꯥ ꯏꯕꯒꯤ ꯇꯃꯊꯤꯔꯕꯥ ꯊꯧꯑꯣꯡ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯇꯝ ꯃꯥꯡꯍꯅꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ, Tailwind CSS.ꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯌꯥꯝꯅꯥ ꯀꯨꯞꯅꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ, ꯁꯦꯃꯦꯟꯇꯤꯛ ꯁꯦꯠ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

ꯍꯥꯌꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ CSS.ꯀꯤ ꯀꯦꯁꯀꯦꯗꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯌꯥꯝꯅꯥ ꯆꯨꯁꯤꯟꯅꯅꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯄꯨꯝꯅꯃꯛꯀꯤꯗꯃꯛ ꯑꯆꯦꯠꯄꯥ ꯌꯨꯝꯐꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

Tailwind CSS.- ꯌꯨꯇꯤꯂꯤꯇꯤ ꯑꯍꯥꯅꯕꯥ CSS

Image 6

ꯃꯁꯤꯒꯤ ꯃꯔꯨꯃꯗꯥ, Tailwind CSS.ꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ-ꯐꯔꯁ꯭ꯠ CSS. ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯗꯤꯖꯥꯏꯟ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯂꯣ-ꯂꯦꯚꯦꯜ, ꯀꯝꯄꯣꯖꯦꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯄꯤꯔꯤ, ꯅꯍꯥꯛꯀꯤ HTMLꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ꯫ ꯂꯣꯏꯕꯥ ꯅꯥꯏꯗꯕꯥ CSS ꯐꯥꯏꯂꯁꯤꯡ ꯂꯩꯔꯣꯏ, ꯏꯆꯝ ꯆꯝꯕꯥ ꯑꯃꯁꯨꯡ ꯏꯟꯠꯌꯨꯏꯇꯤꯕ ꯀꯣꯗ ꯈꯛꯇꯅꯤ꯫

ꯁꯦꯃꯦꯟꯇꯤꯛ ꯀ꯭ꯂꯥꯁ ꯅꯦꯃꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

Image 7

ꯁꯦꯃꯦꯟꯇꯤꯛ ꯀ꯭ꯂꯥꯁꯀꯤ ꯃꯃꯤꯡꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯣꯗꯀꯤ ꯔꯤꯗꯤꯕꯤꯂꯤꯇꯤ ꯐꯒꯠꯍꯜꯂꯤ, ꯃꯁꯤꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯃꯤꯡ ꯌꯦꯡꯕꯈꯛꯇꯅꯥ ꯀꯔꯤ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯉꯕꯥ ꯉꯃꯍꯜꯂꯤ꯫ ꯃꯁꯤ ꯗꯤꯕꯦꯂꯄꯔ ꯑꯦꯛꯁꯄꯤꯔꯤꯑꯦꯟꯁ ꯐꯒꯠꯍꯟꯅꯕꯥ Tailwind CSS.ꯅꯥ ꯂꯧꯈꯠꯈꯤꯕꯥ ꯐꯤꯆꯔ ꯀꯌꯥꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ꯫

ꯄ꯭ꯌꯨꯔ CSS. ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯦꯒ꯭ꯅꯣꯁ꯭ꯇꯤꯛ ꯑꯣꯏꯕꯥ꯫ ꯃꯐꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯊꯕꯛ ꯇꯧꯏ꯫

Image 8

Tailwind CSS.ꯅꯥ ꯑꯗꯣꯃꯕꯨ ꯑꯀꯛꯅꯕꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯃꯠꯇꯗꯥ ꯌꯥꯑꯣꯍꯜꯂꯣꯏ꯫ ꯃꯁꯤ ꯁꯨꯞꯅꯒꯤ ꯄ꯭ꯌꯨꯔ CSS.ꯅꯤ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯃꯍꯦꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ, ꯅꯠꯠꯔꯒꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯅꯥ ꯐꯥꯑꯣꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯃꯁꯤꯅꯥ CSS.ꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯥ ꯃꯐꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯊꯕꯛ ꯇꯧꯏ꯫

Tailwind CSS.ꯀꯤ ꯀꯥꯟꯅꯕꯥ꯫

Image 9

Tailwind CSS.ꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯒꯤ ꯀꯥꯟꯅꯕꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯄ꯭ꯔꯗꯛꯇꯤꯕꯤꯇꯤ ꯍꯦꯅꯒꯠꯂꯀꯄꯥ, CSS.ꯀꯤ ꯐꯥꯏꯜ ꯁꯥꯏꯖ ꯍꯟꯊꯕꯥ, ꯑꯃꯁꯨꯡ ꯌꯨꯇꯤꯂꯤꯇꯤ-ꯐꯔꯁ꯭ꯠ ꯃꯦꯊꯣꯗꯣꯂꯣꯖꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯗꯤꯕꯦꯂꯄꯔ ꯑꯦꯛꯁꯄꯤꯔꯤꯑꯦꯟꯁ ꯍꯦꯅꯒꯠꯂꯀꯄꯥ ꯑꯁꯤ ꯌꯥꯑꯣꯔꯤ꯫ ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯖꯁ꯭ꯠ-ꯏꯟ-ꯇꯥꯏꯝ (ꯖꯤ.ꯑꯥꯏ.ꯇꯤ.) ꯃꯣꯗ ꯑꯁꯤꯅꯥ ꯂꯥꯏꯠꯅꯤꯡ-ꯐꯥꯁ꯭ꯠ ꯕꯤꯜꯗ ꯇꯥꯏꯃꯁꯤꯡ ꯄꯤꯔꯤ, ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯄ꯭ꯔꯣꯁꯦꯁ ꯑꯗꯨ ꯃꯈꯥ ꯇꯥꯅꯥ ꯌꯥꯡꯁꯤꯂꯍꯜꯂꯤ꯫

Tailwind CSS.ꯀꯤ ꯃꯃꯜ ꯂꯦꯞꯄꯥ꯫

Image 10

Tailwind CSS.ꯅꯥ ꯑꯣꯄꯟ-ꯁꯣꯔꯁ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯑꯃꯅꯤ, ꯃꯁꯤꯅꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯐ꯭ꯔꯤ ꯑꯣꯏ ꯍꯥꯌꯕꯅꯤ꯫ ꯃꯃꯜ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯌꯨ.ꯑꯥꯏ.ꯒꯤ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇꯦꯃꯞꯂꯦꯠꯁꯤꯡꯒꯨꯝꯕꯥ ꯄ꯭ꯔꯤꯃꯤꯌꯥꯝ ꯐꯤꯆꯔꯁꯤꯡ ꯑꯦꯛꯁꯦꯁ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯂꯥꯀꯏ, ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ Tailwind ꯌꯨ.ꯑꯥꯏ.ꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯤꯔꯤ꯫

ꯃꯁꯤ ꯃꯇꯝ ꯑꯃꯗꯥ ꯑꯣꯄꯤꯅꯤꯌꯟ ꯑꯃꯁꯨꯡ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏ꯫

Image 11

Tailwind CSS.ꯅꯥ ꯅꯍꯥꯛꯀꯤ CSS.ꯕꯨ ꯀꯔꯝꯅꯥ ꯁ꯭ꯠꯔꯀꯆꯔ ꯇꯧꯒꯅꯤ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯀꯅꯕꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯥ ꯄꯤꯔꯤ, ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ ꯃꯁꯤꯅꯥ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯇꯧꯕꯥ ꯌꯥꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏ꯫ ꯃꯁꯤꯒꯤ ꯕꯦꯂꯦꯟꯁ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯑꯗꯨꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯊꯝꯕꯥ ꯉꯃꯍꯜꯂꯤ — ꯐꯖꯔꯕꯥ UIꯁꯤꯡ ꯁꯦꯝꯕꯥ꯫

ꯃꯣꯗꯔꯟ ꯐꯤꯆꯔꯁꯤꯡ꯫

Image 12

Tailwind CSS.ꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ, ꯒ꯭ꯔꯤꯗ, ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯨꯝꯕꯥ ꯃꯣꯗꯔꯟ ꯐꯤꯆꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ, ꯃꯁꯤꯅꯥ ꯃꯣꯗꯔꯟ ꯋꯦꯕ ꯑꯦꯞꯂꯤꯀꯦꯁꯅꯁꯤꯡ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯑꯐꯕꯥ ꯈꯅꯐꯝ ꯑꯃꯥ ꯑꯣꯏꯍꯜꯂꯤ꯫

Tailwind CSS

Image 13

Tailwind CSS. ꯁꯤꯖꯤꯟꯅꯕꯥ ꯍꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ, ꯅꯍꯥꯛꯅꯥ HTML ꯑꯃꯁꯨꯡ CSS.ꯀꯤ ꯃꯇꯥꯡꯗꯥ ꯕꯦꯁꯤꯛ ꯑꯣꯏꯕꯥ ꯂꯧꯁꯤꯡ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫

Tailwind CSS.ꯕꯨ ꯀꯗꯥꯏꯗꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ꯫

Image 14

Tailwind CSS.ꯅꯥ ꯑꯆꯧꯕꯥ ꯅꯠꯔꯒꯥ ꯑꯄꯤꯀꯄꯥ ꯋꯦꯕ ꯄ꯭ꯔꯣꯖꯦꯛꯇ ꯃꯈꯜ ꯈꯨꯗꯤꯡꯃꯛꯀꯤꯗꯃꯛ ꯆꯨꯝꯃꯤ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ CSS.ꯀꯥ ꯂꯥꯟꯊꯦꯡꯅꯕꯗꯥ ꯋꯥꯈꯜ ꯋꯥꯕꯥ ꯑꯣꯏꯔꯕꯗꯤ ꯑꯃꯁꯨꯡ ꯍꯦꯟꯅꯥ ꯏꯐꯤꯁꯤꯌꯦꯟꯇ, ꯗꯤꯕꯦꯂꯄꯔ-ꯐ꯭ꯔꯦꯟꯗꯂꯤ ꯁꯣꯂꯨꯁꯟ ꯑꯃꯥ ꯊꯤꯔꯕꯗꯤ, Tailwind CSS.

ꯀꯝꯄꯣꯅꯦꯟꯇ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯗꯥ ꯌꯥꯑꯣꯗꯕꯥ ꯅꯠꯇꯦ?

Image 15

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ React ꯅꯠꯠꯔꯒꯥ ꯚꯤꯎꯒꯨꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯒꯤ ꯐꯦꯟ ꯑꯣꯏꯔꯕꯗꯤ, ꯋꯥꯈꯜ ꯋꯥꯕꯥ ꯂꯩꯔꯣꯏ꯫ Tailwind CSS.ꯅꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯛ-ꯑꯦꯒ꯭ꯅꯣꯁ꯭ꯇꯤꯛ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯑꯁꯦꯡꯕꯥ HTML ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

Tailwind CSS. ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ CSS.ꯀꯤ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯈꯦꯠꯅꯕꯥ꯫

Image 16

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯃꯁꯨꯡ ꯐꯥꯎꯟꯗꯦꯁꯟꯒꯨꯝꯕꯥ ꯑꯇꯣꯞꯄꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯅꯥ ꯃꯃꯥꯡꯗꯥ ꯗꯤꯖꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯄꯤꯔꯕꯁꯨ, Tailwind CSS.ꯅꯥ ꯅꯍꯥꯛꯀꯤ HTML ꯊꯥꯗꯣꯛꯇꯨꯅꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯀꯁ꯭ꯇꯝ ꯗꯤꯖꯥꯏꯅꯁꯤꯡ ꯁꯦꯃꯒꯠꯅꯕꯥ ꯈꯨꯠꯂꯥꯌꯁꯤꯡ ꯄꯤꯔꯤ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, daisyUIꯒꯨꯝꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯂꯥꯏꯕ꯭ꯔꯦꯔꯤꯁꯤꯡꯒꯤ ꯏꯟꯇꯤꯒ꯭ꯔꯦꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯧꯖꯤꯛꯇꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯥꯂꯦꯝ ꯑꯅꯤꯃꯛꯀꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯑꯗꯨ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯂꯧꯕꯥ ꯌꯥꯔꯦ꯫

ꯗꯥꯔꯛ ꯃꯣꯗ꯫

Image 17

Tailwind CSS. ꯑꯃꯁꯨꯡ ꯗꯦꯏꯖꯤꯌꯨ.ꯑꯥꯏ.ꯒꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯧꯕꯥ ꯐꯤꯆꯔ ꯑꯃꯗꯤ ꯗꯥꯔꯛ ꯃꯣꯗꯅꯤ, ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯍꯣꯠꯅꯗꯅꯥ ꯗꯥꯔꯛ-ꯊꯤꯝ ꯋꯦꯕꯁꯥꯏꯇꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯉꯃꯍꯜꯂꯤ꯫

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯄꯤꯕꯥ꯫

Image 18

Tailwind CSS.ꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯒꯨꯝꯕꯥ ꯃꯣꯗꯔꯟ CSS.ꯀꯤ ꯐꯤꯆꯔꯁꯤꯡꯒꯥ ꯐꯖꯅꯥ ꯏꯟꯇꯤꯒ꯭ꯔꯦꯠ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯐ꯭ꯂꯦꯛꯁ, ꯖꯁ꯭ꯇꯤꯐꯥꯏ- ꯁꯦꯟꯇꯔ, ꯑꯥꯏꯇꯦꯝ-ꯁꯦꯟꯇꯔ, ꯑꯁꯤꯅꯆꯤꯡꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ꯫

ꯖꯁ꯭ꯠ-ꯏꯟ-ꯇꯥꯏꯃꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯐꯖꯅꯥ ꯍꯣꯠꯅꯕꯥ ꯌꯥꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯃꯅꯥ ꯊꯕꯛ ꯇꯧꯗ꯭ꯔꯕꯗꯤ, ꯅꯍꯥꯛꯀꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯗꯣꯛ-ꯁꯦꯃꯖꯤꯟ ꯇꯧꯅꯕꯥ ꯁꯨꯞꯅꯒꯤ ꯍꯣꯡꯗꯣꯀꯎ꯫

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯂꯦꯑꯥꯎꯇꯀꯤ ꯈꯨꯗꯝ ꯑꯃꯥ꯫

Image 19

Tailwind CSS.ꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯕꯥꯔꯒꯨꯝꯕꯥ ꯀꯝꯞꯂꯦꯛꯁ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯝꯅꯥ ꯂꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ:

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

ꯁꯦꯝ ꯁꯥꯕꯥ ꯂꯣꯏꯔꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ꯫

Image 20

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯇꯥ tailwind css ꯀꯣꯗ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯋꯥꯔꯦꯞ ꯂꯧꯔꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯔꯤꯃꯦꯗ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀꯌꯥ ꯑꯣꯅꯂꯥꯏꯟꯗꯥ ꯐꯪꯒꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯕꯨ ꯅꯍꯥꯛꯅꯥ ꯀꯣꯄꯤ ꯇꯧꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯋꯦꯕꯁꯥꯏꯠꯀꯤꯗꯃꯛ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

CSS.ꯕꯨ Tailwind CSS.ꯇꯥ ꯀꯔꯝꯅꯥ ꯑꯣꯟꯊꯣꯛꯀꯅꯤ꯫

Image 21

CSS.ꯕꯨ Tailwind CSS.ꯀꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯗꯥ ꯑꯣꯟꯊꯣꯀꯄꯥ ꯉꯝꯕꯥ ꯑꯁꯤ ꯑꯌꯥꯝꯕꯥ ꯗꯤꯕꯦꯂꯄꯔꯁꯤꯡꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯅꯤ꯫ Tailwind CSS.ꯀꯤ ꯃꯃꯥꯡꯗꯥ ꯁꯥꯈꯤꯕꯥ ꯏꯟꯇꯔꯅꯦꯇꯇꯥ ꯋꯦꯕꯁꯥꯏꯠ ꯀꯌꯥ ꯂꯩꯔꯤ꯫ ꯋꯦꯕ ꯄꯦꯖꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ css ꯁꯤꯖꯤꯟꯅꯩ ꯑꯃꯁꯨꯡ ꯋꯦꯕ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯄ꯭ꯔꯣꯐꯦꯁ꯭ꯅꯦꯂꯁꯤꯡꯅꯥ ꯄꯦꯖꯁꯤꯡ ꯑꯁꯤ Tailwind CSS.ꯇꯥ ꯃꯥꯏꯒ꯭ꯔꯦꯠ ꯇꯧꯕꯥ ꯄꯥꯝꯃꯤ꯫

ꯗꯤꯚꯃꯦꯖꯤꯛ ꯑꯁꯤ ꯋꯦꯕ ꯗꯤꯚꯦꯂꯄꯔ ꯑꯃꯁꯨꯡ ꯁꯣꯐꯇꯋꯥꯌꯔ ꯗꯤꯚꯦꯂꯄꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯦꯝꯕꯥ ꯋꯦꯕ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯇꯨꯜ ꯑꯃꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯚꯦꯅꯤꯂꯥ CSS.ꯇꯒꯤ Tailwind CSS.ꯇꯥ ꯀꯣꯄꯤ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ ꯀ꯭ꯂꯤꯛ ꯑꯃꯈꯛꯇꯪꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯏꯟꯇꯔꯅꯦꯇꯇꯥ ꯂꯩꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ Tailwind CSS.ꯇꯥ ꯑꯣꯟꯊꯣꯀꯄꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯇꯥ Tailwind ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯁ꯭ꯇꯥꯏꯜ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

Tailwind CSS.ꯀꯤ ꯐꯤꯂꯣꯁꯣꯐꯤꯗꯥ ꯗꯤꯞ ꯗꯥꯏꯚ ꯇꯧꯕꯥ꯫

Image 22

Tailwind CSS.ꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯐꯤꯂꯣꯁꯣꯐꯤ ꯑꯁꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯊꯝꯕꯅꯤ꯫ ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏ ꯇꯧꯕꯒꯤ ꯃꯍꯨꯠꯇꯥ, Tailwind CSS.ꯅꯥ ꯅꯍꯥꯛꯀꯤ HTML ꯊꯥꯗꯣꯛꯇꯨꯅꯥ ꯑꯈꯟꯅꯕꯥ ꯗꯤꯖꯥꯏꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯉꯃꯍꯜꯂꯤꯕꯥ ꯂꯣ-ꯂꯦꯚꯦꯜ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯄꯤꯔꯤ꯫

ꯀꯔꯤꯒꯤꯗꯃꯛꯇꯥ ꯇ꯭ꯔꯦꯗꯤꯁꯅꯦꯜ CSS.ꯇꯒꯤ ꯂꯥꯞꯅꯥ ꯂꯩꯔꯤꯕꯅꯣ?

Image 23

ꯇ꯭ꯔꯦꯗꯤꯁꯅꯦꯜ CSS.ꯅꯥ ꯑꯣꯚꯔꯔꯥꯏꯗꯁꯤꯡ, ꯕ꯭ꯂꯣꯇꯦꯗ ꯐꯥꯏꯂꯁꯤꯡ, ꯑꯃꯁꯨꯡ ‘ꯗꯤꯚ ꯁ꯭ꯌꯨꯞ’ ꯌꯥꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯍꯅꯕꯥ ꯌꯥꯏ꯫ Tailwind CSS.ꯒꯨꯝꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ-ꯐꯥꯔꯁ꯭ꯠ CSS.

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯄꯥꯋꯔ ꯑꯗꯨ ꯑꯦꯛꯁꯄꯔꯤꯌꯦꯟꯁ ꯇꯧꯕꯥ꯫

Image 24

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯍꯟꯖꯤꯟ ꯍꯟꯖꯤꯟ ꯇꯧꯗꯅꯕꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯏ꯫ ꯃꯁꯤ "Don’t Repeat Yourself" (DRY)ꯒꯤ ꯄ꯭ꯔꯤꯟꯁꯤꯄꯜ ꯑꯃꯅꯤ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯇꯝ ꯑꯃꯁꯨꯡ ꯍꯣꯠꯅꯕꯥ ꯀꯅꯕꯥ ꯀꯌꯥ ꯀꯅꯕꯥ ꯉꯝꯃꯤ ꯑꯃꯁꯨꯡ ꯌꯥꯝꯅꯥ ꯃꯦꯟꯇꯦꯟ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯀꯣꯗꯕꯦꯖ ꯑꯃꯥ ꯄꯨꯔꯀꯏ꯫

Tailwind CSS.ꯀꯤ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯁꯤꯡ ꯑꯦꯛꯁꯞꯂꯣꯔ ꯇꯧꯕꯥ꯫

Image 25

Tailwind CSS.ꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯠꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯥ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤ ꯈꯔꯥ ꯍꯧꯗꯣꯀꯏ꯫ ꯃꯁꯤꯗꯥ @apply , @variants , ꯑꯃꯁꯨꯡ @screen ꯌꯥꯑꯣꯔꯤ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯗꯥꯏꯔꯦꯛꯇꯣꯔꯤꯁꯤꯡ ꯑꯁꯤ ꯂꯧꯁꯤꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯅꯍꯥꯛꯀꯤ Tailwind CSS. ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ Tailwind ꯀꯅꯐꯤꯒ CSS. ꯃꯁꯤꯒꯤ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ css ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯏꯕꯥ ꯌꯥꯏ꯫

ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ Tailwind CSS

Image 26

Tailwind CSS.ꯅꯥ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯥꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ, ꯑꯅꯧꯕꯥ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯅꯍꯥꯛꯀꯤ ꯋꯦꯕ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡꯒꯤ ꯏꯐꯤꯁꯤꯑꯦꯟꯁꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯁ꯭ꯇꯦꯇꯤꯛ ꯃꯦꯛꯁꯤꯃꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯂꯤꯚꯔ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫

ꯅꯍꯥꯛꯀꯤ ꯋꯥꯔꯀꯐ꯭ꯂꯣꯗꯥ Tailwind CSS

Image 27

ꯅꯍꯥꯛꯀꯤ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯋꯥꯔꯀꯐ꯭ꯂꯣꯗꯥ Tailwind ꯁꯤꯑꯦꯁꯑꯦꯁ ꯏꯟꯇꯤꯒ꯭ꯔꯦꯠ ꯇꯧꯕꯥ ꯍꯥꯌꯕꯁꯤ ꯌꯥꯝꯅꯥ ꯂꯥꯏ, ꯅꯍꯥꯛꯅꯥ ꯋꯦꯕꯄꯦꯛ ꯅꯠꯠꯔꯒꯥ ꯄꯥꯔꯁꯦꯂꯒꯨꯝꯕꯥ ꯕꯤꯜꯗ ꯇꯨꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯕꯁꯨ, ꯅꯠꯠꯔꯒꯥ Next.js ꯅꯠꯠꯔꯒꯥ Gatsbyꯒꯨꯝꯕꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯒꯥ ꯊꯕꯛ ꯇꯧꯔꯕꯁꯨ꯫

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯍꯦꯅꯒꯠꯍꯅꯕꯥ꯫

Image 28

Tailwind CSS.ꯅꯥ ꯃꯁꯤꯒꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯗꯥ ꯑꯦ.ꯑꯥꯔ.ꯑꯥꯏ.ꯑꯦ.ꯒꯤ ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡꯒꯤ ꯔꯦꯟꯖ ꯑꯃꯥ ꯌꯥꯑꯣꯍꯟꯗꯨꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯗꯤꯖꯥꯏꯅꯕꯨ ꯄꯨꯛꯅꯤꯡ ꯊꯧꯒꯠꯂꯤ꯫ ꯍꯦꯟꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯜ ꯏꯟꯇꯔꯐꯦꯁꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯑꯃꯁꯨꯡ ꯃꯤꯄꯨꯝ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯌꯨꯖꯔ ꯑꯦꯛꯁꯄꯤꯔꯤꯑꯦꯟꯁ ꯍꯦꯅꯒꯠꯍꯅꯕꯥ꯫

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯑꯃꯁꯨꯡ ꯒ꯭ꯔꯤꯗꯀꯤ ꯄꯥꯋꯔ ꯁꯤꯖꯤꯟꯅꯧ꯫

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯑꯃꯁꯨꯡ ꯒ꯭ꯔꯤꯗꯒꯨꯝꯕꯥ ꯃꯣꯗꯔꯟ CSS. ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯃꯁꯨꯡ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯂꯦꯑꯥꯎꯠ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯉꯕꯤꯌꯨ꯫

ꯅꯍꯥꯛꯀꯤ Tailwind CSS.ꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡ ꯀꯔꯝꯅꯥ ꯗꯤꯕꯒ ꯇꯧꯒꯅꯤ꯫

Tailwind CSS.ꯅꯥ ꯗꯤꯕꯒ ꯇꯧꯕꯒꯤ ꯈꯨꯠꯂꯥꯌ ꯑꯃꯁꯨꯡ ꯇꯦꯛꯅꯤꯛ ꯀꯌꯥ ꯑꯃꯥ ꯄꯤꯔꯤ ꯃꯗꯨꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡꯒꯤ ꯋꯥꯐꯃꯁꯤꯡ ꯈꯉꯗꯣꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯁꯣꯜꯕ ꯇꯧꯕꯗꯥ ꯂꯥꯏꯍꯜꯂꯤ꯫ ꯈꯨꯠꯂꯥꯌꯁꯤꯡ ꯑꯁꯤ ꯈꯉꯕꯤꯌꯨ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯗꯤꯕꯒ ꯇꯧꯕꯒꯤ ꯍꯩꯊꯣꯏ-ꯁꯤꯡꯊꯣꯏꯕꯥ ꯍꯦꯅꯒꯠꯍꯅꯕꯤꯌꯨ꯫

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯆꯨ ꯀꯌꯥꯒꯤ ꯋꯦꯕ ꯑꯃꯥ ꯁꯦꯝꯃꯨ꯫

Tailwind CSS.ꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯃꯆꯨꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯔꯕꯥ ꯄꯦꯂꯦꯠ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ꯫ ꯃꯆꯨꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯗꯨꯅꯥ ꯋꯥꯏꯕ꯭ꯔꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯗꯤꯖꯥꯏꯅꯁꯤꯡ ꯁꯦꯃꯒꯠꯀꯅꯤ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ꯫

Tailwind CSS.ꯀꯤ ꯖꯦ.ꯑꯥꯏ.ꯇꯤ

Tailwind CSS.ꯀꯤ ꯖꯁ꯭ꯠ-ꯏꯟ-ꯇꯥꯏꯝ ꯃꯣꯗꯇꯥ ꯍꯦꯟꯅꯥ ꯂꯨꯝꯅꯥ ꯂꯧꯕꯤꯌꯨ꯫ ꯃꯁꯤꯅꯥ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯃꯇꯝ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯃꯁꯛ ꯊꯣꯛꯅꯥ ꯈꯣꯡꯖꯦꯜ ꯌꯥꯡꯁꯤꯅꯍꯅꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯪꯖꯤꯅꯕꯤꯌꯨ꯫

ꯖꯤꯔꯣꯗꯒꯤ ꯍꯤꯔꯣꯗꯥ: ꯃꯥꯁ꯭ꯇꯔ Tailwind CSS

Tailwind CSS.ꯇꯥ ꯃꯥꯁ꯭ꯇꯔ ꯇꯧꯕꯒꯤ ꯈꯣꯉꯆꯠ ꯑꯃꯥ ꯍꯧꯔꯀꯎ꯫ ꯅꯍꯥꯛꯀꯤ ꯑꯀꯣꯌꯕꯒꯤ ꯐꯤꯕꯝ ꯁꯦꯃꯒꯠꯄꯗꯒꯤ ꯍꯧꯔꯒꯥ ꯑꯍꯣꯡꯕꯥ ꯍꯤꯔꯃꯁꯤꯡ ꯊꯤꯖꯤꯅꯕꯐꯥꯑꯣꯕꯥ, ꯑꯄꯨꯅꯕꯥ ꯒꯥꯏꯗꯂꯥꯏꯟ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯀꯣꯅꯁꯤꯅꯈ꯭ꯔꯦ꯫

ꯅꯍꯥꯛꯀꯤ ꯗꯔꯀꯥꯔ ꯑꯣꯏꯕꯁꯤꯡꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ Tailwind CSS

Tailwind CSS.ꯀꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯆꯥꯎꯕꯥ ꯄꯥꯉ꯭ꯒꯜ ꯑꯃꯗꯤ ꯃꯁꯤꯒꯤ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯤꯂꯤꯇꯤ ꯑꯁꯤꯅꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯑꯀꯛꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯁꯤꯡꯒꯥ ꯆꯨꯅꯕꯥ ꯃꯑꯣꯡꯗꯥ Tailwind ꯀꯔꯝꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯦꯟꯗꯁ-ꯑꯣꯟ ꯇꯧꯕꯥ꯫

ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯈꯨꯗꯝ ꯀꯌꯥꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯈꯨꯠꯅꯥ ꯇꯝꯕꯗꯥ ꯁꯔꯨꯛ ꯌꯥꯕꯥ꯫ Tailwind CSS. ꯑꯃꯁꯨꯡ ꯗꯦꯖꯤ.ꯌꯨ.ꯑꯥꯏ.

ꯑꯇꯣꯞꯄꯥ CSS.ꯀꯤ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯗꯒꯤ Tailwind CSS.ꯇꯥ ꯃꯥꯏꯒ꯭ꯔꯦꯠ ꯇꯧꯕꯥ꯫

Tailwind CSS.ꯇꯥ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯈꯟꯅꯔꯤꯕꯔꯥ? Tailwind ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯐ꯭ꯔꯦꯃꯋꯥꯔꯀꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯔꯤꯕꯥ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯈꯦꯠꯅꯕꯁꯤꯡ ꯈꯉꯕꯤꯌꯨ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯁꯤꯡ ꯃꯥꯏꯒ꯭ꯔꯦꯠ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯏꯐꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯁ꯭ꯠꯔꯦꯇꯦꯖꯤꯁꯤꯡ ꯇꯃꯕꯤꯌꯨ꯫

ꯅꯍꯥꯛꯀꯤ ꯃꯥꯏꯒ꯭ꯔꯦꯁꯅꯒꯤ ꯈꯣꯡꯖꯦꯜ ꯑꯗꯨ ꯌꯥꯝꯅꯥ ꯍꯦꯅꯒꯠꯍꯟꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ DivMagic ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯈꯨꯠꯂꯥꯌꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

ꯗꯤꯚꯃꯦꯖꯤꯀꯒꯨꯝꯕꯥ ꯋꯦꯕ ꯗꯤꯚꯦꯂꯄꯃꯦꯟꯇ ꯇꯨꯂꯁꯤꯡꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯀ꯭ꯂꯤꯛ ꯑꯃꯈꯛꯇꯗꯥ ꯋꯦꯕꯁꯥꯏꯠ ꯑꯃꯍꯦꯛꯇꯗꯒꯤ ꯗꯤꯖꯥꯏꯟ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯑꯃꯁꯨꯡ ꯁ꯭ꯇꯥꯏꯜ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯀꯣꯄꯤ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫

ꯏꯆꯝ ꯆꯝꯕꯥ ꯈꯨꯗꯝ ꯑꯃꯥ: ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯥꯔꯗ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯕꯥ꯫

Tailwind CSS.ꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯥꯔꯗ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ꯫ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯗꯥ ꯏꯃꯦꯖ ꯑꯃꯥ, ꯇꯥꯏꯇꯜ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯗꯤꯁ꯭ꯛꯔꯤꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯑꯣꯒꯅꯤ꯫

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯥ ꯁꯦꯝꯕꯥ꯫

Tailwind CSS.ꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯐꯣꯔꯝ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯑꯁꯤ ꯌꯥꯝꯅꯥ ꯂꯥꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯌꯥꯝꯅꯥ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯑꯃꯅꯤ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯏꯆꯝ ꯆꯝꯕꯥ ꯀꯟꯇꯦꯛꯇ ꯐꯣꯔꯝ ꯑꯃꯥ ꯄꯤꯔꯤ:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

Tailwind CSS

Tailwind CSS.ꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯗꯔꯀꯥꯔ ꯑꯣꯏꯕꯁꯤꯡꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯇꯦꯜꯂꯔ ꯇꯧꯗꯨꯅꯥ, ꯃꯁꯤꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ ꯃꯈꯥꯗꯥ ꯃꯆꯨꯒꯤ ꯄꯦꯂꯦꯠ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

ꯈꯨꯗꯃꯁꯤꯡ ꯑꯁꯤꯅꯥ Tailwind CSS.ꯀꯤ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯤꯂꯤꯇꯤ ꯑꯃꯁꯨꯡ ꯁꯤꯝꯄꯂꯁꯤꯇꯤ ꯎꯠꯂꯤ, ꯃꯈꯣꯌꯅꯥ ꯑꯗꯣꯃꯗꯥ ꯃꯣꯗꯔꯟ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯋꯦꯕ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯏꯐꯤꯁꯤꯌꯦꯟꯇ ꯑꯣꯏꯅꯥ ꯑꯃꯁꯨꯡ ꯏꯐꯦꯛꯇꯤꯕ ꯑꯣꯏꯅꯥ ꯁꯦꯃꯒꯠꯄꯗꯥ ꯀꯔꯝꯅꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯎꯠꯂꯤ꯫

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

ꯑꯩꯅꯥ CSS ꯐꯥꯏꯜ ꯑꯃꯠꯇꯥ ꯃꯊꯧ ꯇꯥꯕ꯭ꯔꯥ?

Tailwind CSS.ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯃꯠꯇꯥ ꯉꯥꯏꯔꯕꯥ ꯐꯥꯏꯜ ꯑꯁꯤ tailwind.config.js ꯐꯥꯏꯂꯅꯤ꯫

ꯐꯥꯏꯜ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯁꯦꯇꯤꯡꯁꯤꯡ ꯑꯗꯨ ꯊꯃꯒꯅꯤ꯫ ꯅꯍꯥꯛꯅꯥ css ꯏꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯇꯣꯞꯄꯥ css ꯐꯥꯏꯜ ꯑꯃꯠꯇꯥ ꯂꯩꯔꯣꯏ꯫ ꯃꯁꯤꯒꯤ ꯀꯅꯐꯤꯒꯔꯦꯁꯟ ꯐꯥꯏꯜ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯒꯗꯕꯥ ꯑꯃꯠꯇꯥ ꯉꯥꯏꯔꯕꯥ ꯐꯥꯏꯜ ꯑꯗꯨꯅꯤ꯫

Tailwind CSS.ꯀꯤꯗꯃꯛ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯧꯑꯣꯡꯁꯤꯡ ꯀꯔꯤꯅꯣ?

Tailwind CSS.ꯀꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯧꯑꯣꯡꯁꯤꯡꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯇꯣꯞꯄꯥ ꯑꯥꯔꯇꯤꯀꯦꯜ Tailwind CSS.ꯀꯤ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯧꯑꯣꯡꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ꯫

Tailwind CSS.: ꯋꯦꯕ ꯗꯤꯖꯥꯏꯅꯒꯤ ꯇꯨꯡꯒꯤ ꯐꯤꯕꯝ꯫

Tailwind CSS.ꯅꯥ ꯋꯦꯕ ꯗꯤꯖꯥꯏꯅꯒꯤ ꯇꯨꯡꯒꯤ ꯐꯤꯕꯝ ꯀꯔꯝꯅꯥ ꯁꯦꯃꯒꯠꯂꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯅꯕꯤꯌꯨ꯫ ꯋꯦꯕ ꯗꯤꯕꯦꯂꯄꯃꯦꯟꯇ ꯏꯟꯗꯁ꯭ꯠꯔꯤꯗꯥ ꯃꯁꯤꯒꯤ ꯏꯅꯐ꯭ꯂꯨꯑꯦꯟꯁ ꯑꯃꯁꯨꯡ ꯒ꯭ꯔꯣꯊꯀꯤ ꯄꯣꯇꯦꯟꯁꯤꯌꯦꯂꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯈꯉꯕꯤꯌꯨ꯫

ꯐꯤꯗꯕꯦꯛ ꯅꯠꯔꯒꯥ ꯏꯁꯨ ꯑꯃꯥ ꯐꯪꯂꯦ? ꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯂꯦꯠꯐꯣꯔꯃꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯑꯩꯈꯣꯌꯗꯥ ꯈꯉꯍꯅꯕꯤꯌꯨ, ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯑꯗꯨ ꯑꯩꯈꯣꯌꯅꯥ ꯍꯦꯟꯗꯜ ꯇꯧꯒꯅꯤ!

ꯃꯇꯃꯒꯥ ꯆꯥꯟꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯕꯤꯕꯔꯥ?

ꯗꯤꯚꯃꯦꯖꯤꯛ ꯏꯃꯦꯜ ꯂꯤꯁ꯭ꯇꯇꯥ ꯌꯥꯑꯣꯕꯤꯌꯨ!

divmagic DivMagic

ꯔꯤꯁꯣꯔꯁꯁꯤꯡ

ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

ꯈꯨꯠꯂꯥꯌꯁꯤꯡ

Social

ꯇꯔꯃꯁ & ꯄꯣꯂꯤꯁꯤꯁꯤꯡ꯫

© 2024 DivMagic, Inc.