Tailwind වර්ණ උත්පාදනය

Hex කේතයක් එකකින් Tailwind CSS හි 50 සිට 950 දක්වා ක්‍රම 11ක් සහිත වර්ණ පුවරුවක් සහ සැකසුම් කේතය ජනනය කරන්න

යාවත්කාලීන තොරතුරුTailwind වර්ණ ජනනය එකතු කරන ලදී, වර්ණයක් සිට ශ්‍රේණි 11ක් සහ වින්‍යාස කේතයක් සාදයියාවත්කාලීන තොරතුරු බලන්න

විශේෂාංග

වර්ණයක් වලින් ක්‍රම 11ක් ස්වයංක්‍රීයව ජනනය කිරීම

ඇතුළත් කළ වර්ණය 500 ලෙස සකසා, 50 සිට 950 දක්වා සෙවන ගණනය කරයි

v3 සහ v4 යන ආකෘති දෙකටම සහාය

config සහ @theme ලිවීමේ ක්‍රම ටැබ් එකකින් මාරු කරගත හැක

එක් එක් ක්‍රමයේ Hex කේතය පිටපත් කිරීම

වර්ණ නියැදියක් සඳහා වූ බොත්තම මගින් වර්ණ කේතය එකින් එක පිටපත් කරයි

ඇතුළත් කිරීම සමඟම පුවරුව යාවත්කාලීන වීම

ක්‍රියාත්මක කිරීමේ බොත්තමක් අවශ්‍ය නොවී වර්ණ උත්සාහ කරමින් සසඳා බැලිය හැක

භාවිත කරන ආකාරය

පදනම් වර්ණයේ Hex එක ඇතුළත් කරන්න

Hex කේතය ඇතුළත් කරන්න, නැතහොත් වම් කෙළවරේ ඇති වර්ණ නියැදිය ක්ලික් කර වර්ණ තෝරකයෙන් තෝරන්න

අවශ්‍ය නම් වර්ණ නාමය ඇතුළත් කරන්න

කේතය තුළ භාවිත කරන වර්ණ නාමය ඉංග්‍රීසි කුඩා අකුරෙන් ඇතුළත් කරන්න. හිස්ව තැබුවොත් primary භාවිත වේ

ක්‍රම 11ක වර්ණ නියැදි පරීක්ෂා කරන්න

50 සිට 950 දක්වා වර්ණ නියැදි සහ Hex කේත පරීක්ෂා කර, නියැදියේ ඇති පිටපත් කිරීමේ බොත්තමෙන් එක් වර්ණයක් බැගින් පිටපත් කරන්න

ප්‍රතිදාන ආකෘතිය තෝරා පිටපත් කරන්න

v3 හෝ v4 තෝරා "කේතය පිටපත් කරන්න" බොත්තමෙන් tailwind.config.js හෝ CSS ගොනුවකට ඇලවන්න

භාවිත අවස්ථා

වෙළඳ නාම වර්ණයේ සෙවන සෑදීම

බොත්තම් හෝවර් කිරීමේදී සහ පසුබිම්වල භාවිත කරන සෙවන වෙළඳ නාම වර්ණයක් වලින් සකස් කරන්න

සම්මත පුවරුවේ නැති වර්ණයක් එක් කිරීම

Tailwind සම්මත වර්ණවල නොමැති ව්‍යාපෘතියට විශේෂිත වර්ණයක් ක්‍රම 11ක් ලෙස සැකසුම් ගොනුවට එක් කරන්න

v4 හි @theme සැකසුම සෑදීම

වෙබ් අඩවියේ ප්‍රධාන වර්ණයෙන් Tailwind v4 හි CSS විචල්‍ය එකවර ලියා ගන්න

නිර්මාණ රූපසටහනේ ක්‍රියාත්මක කිරීමේ සූදානම

රූපසටහනේ දක්වා ඇති වර්ණවලින් ක්‍රියාත්මක කිරීම සඳහා ක්‍රම 11ක කේතය සූදානම් කර, නිර්මාණ මෙවලමටද පිටපත් කරන්න

මූලික දැනුම

Tailwind හි 50 සිට 950 දක්වා අදහස් කරන්නේ කුමක්ද

Tailwind CSS හි වර්ණ, 50 වඩාත්ම ලා පැහැති සහ 950 වඩාත්ම තද පැහැති වන ක්‍රම 11කින් දීප්තිය දැක්වෙන අතර, 500 එම වර්ණයේ පදනම වේ. ක්‍රමය "bg-primary-500" හෝ "text-primary-700" වැනි ලෙස පන්ති නාමයේ අවසානයට එක් කර භාවිත කරයි.

50 සිට 300 දක්වා ක්‍රම：50 සිට 300 දක්වා ක්‍රම, පසුබිම් වර්ණ හෝ ලා පැහැති පිරවීම් සඳහා බහුලව භාවිත වන දීප්තිමත් වර්ණ වන අතර, ඒ මත තද පැහැති අකුරු යෙදුවද කියවීමට පහසු වර්ණයකි.
600 සිට 950 දක්වා ක්‍රම：600 සිට 950 දක්වා ක්‍රම, බොත්තම් හෝවර් කිරීමේදී හෝ ශීර්ෂයේ අකුරු වර්ණය ලෙස බහුලව භාවිත වන තද පැහැති වර්ණ වන අතර, සුදු පසුබිමක් මතද පැහැදිලිව පෙනෙන වර්ණයකි.

v3 සහ v4 හි වර්ණ අර්ථ දක්වන ක්‍රමයේ වෙනස

Tailwind CSS හි v3 තුළ වර්ණ tailwind.config.js හි JavaScript භාවිතයෙන් අර්ථ දක්වන අතර, v4 තුළ CSS ගොනුවේ @theme තුළ CSS විචල්‍ය ලෙස අර්ථ දක්වයි. ලිවීමේ ක්‍රමය කුමක් වුවද, අර්ථ දැක්වූ වර්ණය "bg-primary-500" වැනි එකම පන්ති නාමයෙන් භාවිත කළ හැක.

v3 හි ලිවීමේ ක්‍රමය：v3 හි ලිවීමේ ක්‍රමය, theme.extend.colors තුළ "primary: { 500: '#3B82F6' }" වැනි ලෙස වර්ණ නාමය සහ ක්‍රමය කැදවා ලිවීමේ ආකෘතියකි.
v4 හි ලිවීමේ ක්‍රමය：v4 හි ලිවීමේ ක්‍රමය, @theme තුළ "--color-primary-500: #3B82F6;" වැනි ලෙස වර්ණ නාමය සහ ක්‍රමය හයිෆනයකින් සම්බන්ධ කළ විචල්‍ය නාමයකින් ලිවීමේ ආකෘතියකි.