የTailwind ቀለም ማመንጫ

ከ1 Hex ኮድ የTailwind CSS 50 እስከ 950 ያሉ 11 ደረጃ ፓሌትን እና የማዋቀሪያ ኮድ ያመነጫል

የዘመነ መረጃየTailwind ቀለም ማመንጫ ታክሏል፣ ከ1 ቀለም 11 ደረጃዎች ያሉት ቀለም እና የማዋቀሪያ ኮድ ይፈጥራልየዝማኔ መረጃ ይመልከቱ

ባህሪያት

ከ1 ቀለም 11 ደረጃዎችን በራስ-ሰር ማመንጨት

ያስገቡትን ቀለም 500 አድርጎ በማስቀመጥ 50 እስከ 950 ያለውን ድብርት ያሰላል

ከv3 እና v4 ሁለቱም ቅርጸቶች ጋር ተኳሃኝ

በtab በ config እና @theme አጻጻፍ መካከል ይቀይራል

ለእያንዳንዱ ደረጃ Hex መቅዳት

ለእያንዳንዱ ቀለም ናሙና ባለው አዝራር የቀለም ኮዱን አንድ በአንድ ይቅዱ

ከግቤት ጋር አብሮ የፓሌት ዝማኔ

የማስፈጸሚያ አዝራር ሳያስፈልግ ቀለሞችን እየሞከሩ ያወዳድሩ

አጠቃቀም

የመሠረት ቀለም Hex ያስገቡ

Hex ኮድ ያስገቡ ወይም በግራ ጫፍ ያለውን ቀለም ናሙና ጠቅ በማድረግ በቀለም መምረጫው ይምረጡ

እንደ አስፈላጊነቱ የቀለም ስም ያስገቡ

በኮዱ ውስጥ የሚጠቀሙትን የቀለም ስም በእንግሊዝኛ ትናንሽ ፊደላት ያስገቡ። ባዶ ከሆነ primary ጥቅም ላይ ይውላል

11ቱን ደረጃ ቀለም ናሙናዎች ያረጋግጡ

ከ50 እስከ 950 ያሉትን ቀለም ናሙናዎችና Hex ኮዶች ያረጋግጡ፣ በናሙናው ላይ ባለው የመቅዳት አዝራር አንድ በአንድ ይቅዱ

የውጤት ቅርጸት መርጠው ይቅዱ

v3 ወይም v4 መርጠው «ኮዱን ቅዳ» በመጠቀም ወደ tailwind.config.js ወይም CSS ፋይል ይለጥፉ

የአጠቃቀም ምሳሌዎች

የብራንድ ቀለም ድብርት መፍጠር

ከአንድ የብራንድ ቀለም ለአዝራር hover እና ለጀርባ የሚያገለግሉ ድብርቶችን ያስተካክሉ

በመደበኛ ፓሌት ውስጥ የሌለ ቀለም መጨመር

በTailwind መደበኛ ቀለማት ውስጥ የሌለውን የፕሮጀክት የራስዎን ቀለም በ11 ደረጃ ወደ ማዋቀሪያ ፋይል ይጨምሩ

የv4 @theme ማዋቀሪያ መፍጠር

ከድረ-ገጹ ዋና ቀለም የTailwind v4 CSS ተለዋዋጮችን በአንድ ላይ ያዘጋጁ

ለዲዛይን ንድፍ አፈጻጸም ዝግጅት

ከንድፉ ከተገለጸው ቀለም ለአፈጻጸም የሚሆን 11 ደረጃ ኮድ ያዘጋጁ፣ ወደ ዲዛይን መሣሪያም ያስተላልፉ

መሠረታዊ እውቀት

የTailwind 50 እስከ 950 ትርጉም

የTailwind CSS ቀለም በ11 ደረጃ ቁጥር ብሩህነትን ይገልጻል፣ 50 በጣም ቀላል ሲሆን 950 በጣም ጥቁር ነው፣ 500 ደግሞ የቀለሙ መሠረት ይሆናል። ቁጥሩ እንደ «bg-primary-500» ወይም «text-primary-700» ባሉ የክፍል ስሞች መጨረሻ ላይ ይቀመጣል።

ከ50 እስከ 300 ያለው ደረጃ：ከ50 እስከ 300 ያለው ደረጃ ብዙ ጊዜ ለጀርባ ቀለም ወይም ለቀላል ሙሌት የሚያገለግል ብሩህ ቀለም ሲሆን በላዩ ላይ ጥቁር ፊደል ቢታይም በቀላሉ ይነበባል።
ከ600 እስከ 950 ያለው ደረጃ：ከ600 እስከ 950 ያለው ደረጃ ብዙ ጊዜ ለአዝራር hover ወይም ለርዕስ ፊደል ቀለም የሚያገለግል ጥቁር ቀለም ሲሆን በነጭ ጀርባ ላይም በግልጽ ይታያል።

በ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;» እንደሚባለው የቀለም ስምና ደረጃን በሰረዝ ያገናኘ ተለዋዋጭ ስም የሚጽፍ ቅርጸት ነው።