Tailwind CSS - ካብ HTML ናትካ ከይወጻእካ ዘመናዊ መርበባት ሓበሬታ ብቕልጡፍ ምህናጽ

ዝተሓላለኹ ዲዛይናት ብቐሊሉ ምፍጣር

ምስ Tailwind CSS ዝተሓላለኹ ዲዛይናት ምፍጣር ንፋስ ይኸውን። ውህደት ናይ ዩቲሊቲ ክፍልታትን ምላሽ ዝህቡ ዲዛይን ዩቲሊቲታትን ኣብ ኣፈጻጽማን ምሕላውን መርበብ ሓበሬታኻ ኣብ ዋጋ ዕዳጋ ከየእተኻ፡ ዝተሓላለኹ ኣቀማምጣታት ብቐሊሉ ክትነድፍ የኽእለካ።

ዝኾነ ነገር ሃንጽ

ጽባቐ ቴይልዊንድ CSS ኣብቲ ብዙሕ ዕዮታት ዘለዎ ምዃኑ እዩ። ካብ ቀሊል ገጽ ብሎግ ክሳብ ምዕቡል መድረኽ ኢ-ኮሜርስ ዝኾነ ነገር ክትፈጥር ትኽእል ኢኻ፣ እዚ ኩሉ ሓደ ዓይነት ስነ-ኣእምሮኣዊ ዩቲሊቲ ክፍልታት እናተጠቐምካ።

ብኣእምሮኻ ጥራይ ኢኻ ትድረት። ካብ ቫኒላ CSS ምጥቃም ዘሎ ቀንዲ ፍልልይ፡ ብሕታዊ ዲዛይናት ክትሃንጽ እትኽእለሉ ፍጥነት እዩ።

እቲ ባህላዊ ኣገባብ ምጥቃም custom css classes ምስ html components ከም div, div class, p class ኩሉ ግዜ ኣማራጺ ኮይኑ ግን ምስ Tailwind CSS ዝመጽእ ናይ ፍጥነት ምምሕያሽ ንህይወትካ ቀሊል ይገብሮ።

ብሉጻት ልምድታት ብሓቂ ኣይሰርሑን እዮም።

ብባህሊ CSS ዝጽሓፍ ስብስብ ዓለማዊ ቅዲታት ብምምስራትን ብመሰረት ክፍሊ ብክፋል ብምጽራይን እዩ። እዚ ህቡብ ኣገባብ እኳ እንተኾነ፡ ናብ ዓቢን ንምሕላው ኣጸጋምን ኮድ ክመርሕ ይኽእል።

ቴይልዊንድ CSS ነዚ ኣተሓሳስባ ይፈታተኖ፣ ዩቲሊቲ-ቀዳማይ CSS ዝጸረየን ዝያዳ ክዕቀብ ዝኽእልን ፍታሕ ከም ዝህብ ይምጉት።

እቲ ዝበዝሐ ተፈታዊ ናይ ኣካላት ቤተ-መጻሕፍቲ ን Tailwind CSS

daisyUI ን Tailwind CSS ዝበዝሐ ተፈታዊ ናይ ኣካላት ቤተ-መጻሕፍቲ ኮይኑ፡ ልዕሊ 50 ቅድሚ ሕጂ ዝተነድፉ ኣካላት፡ 500+ ዩቲሊቲ ክፍልታት፡ ከምኡ’ውን ዳርጋ መወዳእታ ዘይብሉ ተኽእሎታት ዘለዎ እዩ። ኣብ ነፍሲ ወከፍ ሓድሽ ፕሮጀክት ኣብ እትፈጥረሉ እዋን ነቲ መንኰርኰር ዳግማይ ካብ ምምሃዝ የድሕነካ።

ኩሉ ግዜ መንኰርኰር ዳግማይ ኣይትምህዞ

ኣብ ክንዲ በቲ ንነፍሲ ​​ወከፍ ሓድሽ ፕሮጀክት ዓሰርተታት ኣስማት ክፍልታት ናይ ምጽሓፍ ኣድካሚ መስርሕ ግዜኻ ምብኻን፡ Tailwind CSS ጽቡቕ ገይሩ ዝተነጸረ፡ ትርጉማዊ ስብስብ ናይ ውጽኢታዊ ክፍልታት ክትጥቀም የኽእለካ።

እዞም ክፍልታት ዳግማይ ክጥቀሙ ዝኽእሉን ምስ CSS cascade ብስኒት ዝሰርሑን ኮይኖም፡ ንኹሉ ፕሮጀክትታትካ ድልዱል መሰረት ይህቡኻ።

Tailwind CSS - ሓደ ዩቲሊቲ ቀዳማይ CSS ፍሬምዎርክ

ኣብ ሕመረቱ፡ Tailwind CSS ንዩቲሊቲ-ቀዳማይ CSS ፍሬምዎርክ እዩ። እዚ ማለት ዝኾነ ዲዛይን ንምህናጽ ክትጥቀመሎም እትኽእል ትሑት ደረጃ ዘለዎም፡ ክሕንጸጹ ዝኽእሉ ዩቲሊቲ ክላሳት ይህብ፡ ብቐጥታ ኣብ ኤችቲኤምኤልካ። ድሕሪ ደጊም መወዳእታ ዘይብሉ CSS ፋይላት የለን፣ ቀሊልን ንጹርን ኮድ ጥራይ።

ትርጉማዊ ኣስማት ክፍልታት ተጠቐም

ትርጉማዊ ኣስማት ክፍልታት ንንባብነት ኮድካ የመሓይሹ፣ እዚ ድማ ሓደ ፍሉይ ክፍሊ ስሙ ብምርኣይ ጥራይ እንታይ ከም ዝገብር ንምርዳእ ቀሊል ይገብሮ። እዚ ሓደ ካብቶም ብዙሓት ባህርያት ቴይልዊንድ CSS ንተመኩሮ ዲቨሎፐር ንምምሕያሽ ዝወሰዶ እዩ።

ጽሩይ CSS። ማዕቀፍ ኣግኖስቲክ። ኣብ ኩሉ ቦታ ይሰርሕ

Tailwind CSS ምስ ዝኾነ ፍሉይ ማዕቀፍ ኣይኣስረካን’ዩ። ብቐሊሉ ጽሩይ CSS’ዩ፣ ስለዚ ምስ ዝኾነ ፍሬምዎርክ ክትጥቀመሉ ትኽእል ኢኻ፣ ወይ’ውን ዋላ’ውን ብዘይ ዝኾነ ፍሬምዎርክ ክትጥቀመሉ ትኽእል ኢኻ። ኣብ ኩሉ ቦታ CSS ዝሰርሓሉ ቦታ ይሰርሕ።

ረብሓታት ቴይልዊንድ CSS

Tailwind CSS ምጥቃም ዘለዎ ረብሓታት ምውሳኽ ኣፍራይነት፣ ምጉዳል መጠን ፋይል CSS፣ ከምኡ እውን ብሰንኪ ዩቲሊቲ-ቀዳማይ ኣገባብ ምምሕያሽ ተመኩሮ ዲቨሎፐር የጠቓልል። ብተወሳኺ፡ እቲ Just-In-Time (JIT) ዝበሃል ሞድ፡ ከም በርቂ ዝቐልጠፈ ናይ ህንጸት ግዜ ይህብ፡ እዚ ድማ ንመስርሕ ምዕባለኻ ዝያዳ የቀላጥፎ።

ቴይልዊንድ CSS ዋጋ ምውሳን

Tailwind CSS ክፉት ምንጪ ዘለዎ ፕሮጀክት እዩ፣ እዚ ማለት ድማ ​​ምሉእ ብምሉእ ነጻ ንኽትጥቀመሉ እዩ። እቲ ወጻኢታት ዝመጽእ ከም UI components and templates ዝኣመሰሉ ፕሪምየም ባህርያት ክትረክብ ምስ እትደሊ፡ እዚኦም ድማ ብመንገዲ Tailwind UI ዝቐርቡ እዮም።

ርእይቶ ዘለዎን ኣብ ሓደ እዋን ተዓጻጻፍን እዩ።

Tailwind CSS CSS ከመይ ጌርካ ከም እትሃንጾ ጽኑዕ ርእይቶ ይህብ፣ ምስ’ዚ ኩሉ ግን ምምዕርራይ ንምፍቃድ እኹል ተዓጻጻፊ’ዩ። እዚ ሚዛን እዚ ኣብቲ ኣዝዩ ኣገዳሲ ዝኾነ ነገር ከተተኩር የኽእለካ — ጽቡቓት UIs ምህናጽ።

ዘመናዊ ባህርያት

Tailwind CSS ከም Flexbox, Grid, ከምኡ’ውን ብሕታዊ ንብረታት ዝኣመሰሉ ዘመናዊ ባህርያት ዝሓቖፈ ኮይኑ፡ ዘመናዊ ዌብ ኣፕሊኬሽናት ንምምዕባል ብሉጽ ምርጫ ይገብሮ።

ቅድመ ኩነት ንኣጠቓቕማ Tailwind CSS

ቅድሚ Tailwind CSS ምጥቃም ምጅማርካ፡ ብዛዕባ HTMLን CSSን መሰረታዊ ርድኢት የድልየካ።

መዓስ Tailwind CSS ንጥቀም

ቴይልዊንድ CSS ንኹሉ ዓይነት ፕሮጀክትታት መርበብ ሓበሬታ፡ ዓበይቲ ይኹኑ ንኣሽቱ ዝምችእ እዩ። ምስ CSS ምቅላስን ዝያዳ ስሉጥን ንደቨሎፐር ዝምችእን ፍታሕ ምድላይን እንተደኺምካ፡ Tailwind CSS ንዓኻ’ዩ ማለት’ዩ።

ናብ ኮምፖነንት ፍሬምዎርክስ ኣይኮነን?

ኣድናቒ ናይ ከም React ወይ Vue ዝኣመሰሉ component frameworks እንተዘይኮይንካ ስክፍታ የለን። ቴይልዊንድ CSS ፍሬምዎርክ-ኣግኖስቲክ ኮይኑ ምስ ጽሩይ ኤችቲኤምኤልን ጃቫስክሪፕትን ክጥቀመሉ ይኽእል።

ተመሳሳልነትን ፍልልይን ኣብ መንጎ Tailwind CSSን ካልኦት CSS Frameworksን።

ካልኦት ከም ቡትስትራፕን ፋውንዴሽንን ዝኣመሰሉ ፍሬምዎርክታት ቅድሚ ሕጂ ዝተነድፉ ኣካላት ክህቡ እንከለዉ፡ ቴይልዊንድ CSS ግን ካብ ኤችቲኤምኤልካ ከይወጻእካ ምሉእ ብምሉእ ብሕታዊ ዲዛይናት ክትሃንጽ መሳርሒታት ይህበካ። ይኹን እምበር፡ ምስ ምውህሃድ ናይ ከም daisyUI ዝኣመሰሉ ናይ ኣካላት ቤተ-መጻሕፍቲ፡ ሕጂ ካብ ክልቲኡ ዓለማት ዝበለጸ ከተስተማቕር ትኽእል ኢኻ።

ጸሊም ሞድ

ሓደ ካብቲ ዳሕረዋይ ባህርያት Tailwind CSSን daisyUIን ጸሊም ሞድ ኮይኑ፡ ብዘይ ጻዕሪ ጸሊም ቴማ ዘለዎም መርበባት ሓበሬታ ክትፈጥር የኽእለካ።

ፍሌክስቦክስ ኣብነት

Tailwind CSS ምስ ከም Flexbox ዝኣመሰሉ ዘመናዊ CSS ባህርያት ጽቡቕ ጌሩ ይወሃሃድ። ንኣብነት ከም flex, justify- center, items-center, ወዘተ ዝኣመሰሉ ክፍልታት ተጠቒምካ ምላሽ ዝህብ ኣቀማምጣ ክትፈጥር ትኽእል ኢኻ።

ብውህደት Just-in-Time ዝተፈላለዩ ናይ ዩቲሊቲ ክፍሊ ክብርታት ብቐሊሉ ክትፍትን ትኽእል ኢኻ። ሓደ ዩቲሊቲ ክላስ እንተዘይሰሪሑ፡ ንባእታኻ ንምምዕርራይ ጥራይ ቀይሮ።

ኣብነት ኣቀማምጣ ፍሌክስቦክስ

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>

ድሉው ዝኾኑ ኣካላት

ኣብ ፕሮጀክትካ tailwind css code ክትጥቀም እንተ ወሲንካ ብዙሓት premade components ኣብ ኢንተርነት ክትረክብ ትኽእል ኢኻ። ካብዚኦም ዝኾነ ቅዳሕ ክትገብርን ንናይ ገዛእ ርእስኻ መርበብ ሓበሬታ ክትቅይሮን ትኽእል ኢኻ።

ከመይ ጌርና CSS ናብ Tailwind CSS ንቕይሮ

CSS ናብ Tailwind CSS classes ምቕያር ምኽኣል መብዛሕትኦም ዲቨሎፐራት ዘድልዮም ነገር እዩ። ኣብ ኢንተርነት ቅድሚ Tailwind CSS ምህላዉ ዝተሃንጹ ብዙሓት ዌብሳይታት ኣለዉ። እዞም ገጻት መርበብ ሓበሬታ css ምስ stylesheet ይጥቀሙን ሰብ ሞያ ምዕባለ መርበብ ሓበሬታ ነዞም ገጻት ናብ Tailwind CSS ክሰግሩ ይደልዩ።

DivMagic ንዌብ ዲቨሎፐርን ሶፍትዌር ዲቨሎፐርን ዝተሃንጸ ናይ ዌብ ዲቨሎፕመንት መሳርሒ እዩ። ዝኾነ ቅዲ ካብ vanilla css ናብ Tailwind CSS ክቕዳሕ የኽእል። ብሓደ ጠውቂ ዝኾነ ኣብ ኢንተርነት ዘሎ ክፍሊ ናብ Tailwind CSS ክትቅይሮን ኣብ ፕሮጀክትካ Tailwind ክትጥቀምን ነቲ ቅዲ ብዝደለኻዮ መንገዲ ክትቅይሮን ትኽእል።

ኣብ ፍልስፍና ቴይልዊንድ CSS ኣዕሚቕካ ምጥላቕ

ድሕሪ Tailwind CSS ዘሎ ፍልስፍና ኣብ ዩቲሊቲ ምትኳር እዩ። እዚ ማለት ኣብ ክንዲ ንናይ ኣካላት ክፍልታት ኣቐዲምካ ምግላጽ፡ Tailwind CSS ካብ ኤችቲኤምኤልካ ከይወጻእካ ፍሉያት ዲዛይናት ክትሃንጽ ዘኽእለካ ትሑት ደረጃ ዘለዎም ናይ ዩቲሊቲ ክፍልታት ይህብ።

ስለምንታይ ካብ ባህላዊ CSS ንርሕቕ?

ባህላዊ CSS ካብ መጠን ንላዕሊ ምጥቃም ምግዳፍ፣ ዝተነፍሑ ፋይላትን 'div soup'ን ከስዕብ ይኽእል። ናብ ከም Tailwind CSS ዝኣመሰለ ዩቲሊቲ-ፈርስት CSS ፍሬምዎርክ ብምስግጋር፡ ነዞም ጉዳያት ከተቃልሎም ትኽእል ኢኻ፡ ውጽኢቱ ድማ ዝጸረየን ዝያዳ ስሉጥን ኮድቤዝ ይኸውን።

ሓይሊ ዩቲሊቲ ክላሳት ተመክሮ

ዩቲሊቲ ክፍልታት ኣብ ምሉእ ቅዲ ጽሑፋትካ ሓደ ዓይነት ቅዲታት ንኸይትደግሞ ይሕግዙኻ። "ርእስኻ ኣይትደግማ" (DRY) ዝብል መትከል’ዩ። እዞም ክፍልታት እዚኦም ርኡይ ግዜን ጻዕርን ይቑጥቡኻን ናብ ኣዝዩ ክዕቀብ ዝኽእል ኮድቤዝ ይመርሑኻን።

ዳህሳስ መምርሒታት ቴይልዊንድ CSS

Tailwind CSS ኣብ ውሽጢ ቅዲ ጽሑፋትካ ክትጥቀመሉ እትኽእል ውሑዳት መምርሒታት የላልየካ። እዚኦም ድማ @apply , @variants , ከምኡውን @screen ይርከብዎም። ነዞም መምርሒታት ምርዳእን ምጥቃምን ንናይ Tailwind CSS ተመኩሮኻ ኣዝዩ ከዕብዮ ይኽእል። እዚኦም ኣብቲ Tailwind Config CSS ፋይል ክቕመጡ ይኽእሉ። ነዚ ኣገባብ ተጠቂምካ css classes ክትጽሕፍ ትኽእል ኢኻ።

Tailwind CSS ብ Plugins ምዝርጋሕ

ታይልዊንድ CSS ብፕላጊን ክዝርጋሕ ይኽእል፣ ሓድሽ ተግባር ብምውሳኽ ወይ ነቲ ዝጸንሐ ምምዕርራይ። ንብቕዓትን ስነ-ጽባቐን ናይ መርበብ ሓበሬታ ፕሮጀክትታትካ ናብ ዝለዓለ ደረጃ ንምብጻሕ ከመይ ጌርካ ፕላጊናት ከም እትጥቀመሉ ተማሃር።

Tailwind CSS ኣብ ዋሕዚ ስራሕካ ኣእትዎ።

Tailwind CSS ኣብ ዋሕዚ ስራሕ ምዕባለኻ ምውህሃድ ቀጥታዊ እዩ፣ ከም Webpack ወይ Parcel ዝኣመሰሉ ናይ ህንጻ መሳርሒታት ትጥቀም ትኹን፣ ወይ ምስ ከም Next.js ወይ Gatsby ዝኣመሰሉ ፍሬምዎርክታት ትሰርሕ።

ብ Tailwind CSS ተበጻሕነት ምዕባይ

Tailwind CSS ኣብ ክፍልታቱ ዝተፈላለዩ ናይ ARIA ባህርያት ብምእታው ተበጻሒ ዲዛይን የተባብዕ። ዝያዳ ተበጻሒ መተሓላለፍቲ ምፍጣርን ንኹሉ ሰብ ተመኩሮ ተጠቃሚ ምዕባይን።

ሓይሊ ፍሌክስቦክስን ግሪድን ብ Tailwind CSS ምጥቃም

ዘመናዊ ናይ CSS ኣቀማምጣ ሞዱላት ከም Flexboxን Gridን ብ Tailwind CSS ምጥቃም። ንኣቀማምጣ ብተዓጻጻፍን ምላሽ ዝህብን መንገዲ ንምቁጽጻር ዩቲሊቲ ክፍልታት ብኸመይ ክጥቀሙ ከም ዝኽእሉ ተማሃር።

ከመይ ጌርና ንናይ Tailwind CSS ፕሮጀክትታትና ዲባግ ንገብሮም

Tailwind CSS ንጉዳያት ቅዲ ምልላይን ምፍታሕን ዝቐለለ ዝገብሩ ሓያሎ ናይ ምእራም መሳርሕታትን ሜላታትን ይህብ። ነዞም መሳርሒታት ተረዲእካ ናይ ምእራም ክእለትካ ኣዕብዮም።

ብ Tailwind CSS ሕብራዊ መርበብ ሓበሬታ ምፍጣር

ቴይልዊንድ CSS ምስ ሰፊሕ ፓለቲ ናይ ንዓኻ ዝምጥን ሕብርታት ይመጽእ እዩ። ነዞም ሕብርታት ከመይ ጌርካ ትጥቀመሎምን ትጥዕሞምን ንጡፋትን ብዓይኒ ዝምስጡን ዲዛይናት ትፈጥር ተማሃር።

ብ Tailwind CSS' JIT Mode ቅልጡፍ ምምዕባል

ኣብ ናይ Tailwind CSS Just-In-Time mode ብዕምቆት ውሰድ። ከመይ ከም ዝሰርሕን ከመይ ጌሩ ምዕባለኻ ብዓቢኡ ከቀላጥፎን ግዜ ክሃንጽን ከም ዝኽእልን ተረዳእ።

ካብ ዜሮ ናብ ጅግና: ማስተር ቴይልዊንድ CSS

ን Tailwind CSS ንምምራሕ ዝግበር ጉዕዞ ጀምር። ካብ ምድላው ከባቢኻ ክሳብ ምዕቡላት ኣርእስታት ምድህሳስ፡ እዚ ኩለመዳያዊ መምርሒ ሸፊኑካ ኣሎ።

Tailwind CSS ከም ድሌታትካ ኣመዓራርዮ

ሓደ ካብቲ ዝዓበየ ጥንካረታት ቴይልዊንድ CSS ተዓጻጻፍነቱ እዩ። ንፍሉይ ድሌታት ፕሮጀክትካ ዝሰማማዕ ንቴይልዊንድ ከመይ ጌርካ ከም እትሰርዖ ተማሃር።

ብ Tailwind CSS ኣብ ኢድካ ምእታው

ብተኸታታሊ ግብራዊ ኣብነታት ኣቢልካ ኣብ ኢድካ ዝግበር ትምህርቲ ተጸመድ። Tailwind CSSን DaisyUIን ተጠቒምካ ዝተፈላለዩ ናይ መርበብ ሓበሬታ ክፍልታት ከመይ ጌርካ ከም እትሃንጽ ዳህሰስ።

ካብ ካልኦት CSS Frameworks ናብ Tailwind CSS ምግዓዝ

ናብ Tailwind CSS ክትቅይር ኣብ ግምት ኣለካ? ኣብ መንጎ ቴይልዊንድን ካልኦት ማዕቀፋትን ዘሎ ቁልፊ ፍልልያት ተረዳእ፣ ንፕሮጀክትታትካ ንምስግጋር ድማ ውጽኢታዊ ስትራተጂታት ተማሃር።

ፍጥነት ስደትካ ብዓቢኡ ንምዕባይ DivMagic ወይ ተመሳሰልቲ መሳርሒታት ክትጥቀም ትኽእል ኢኻ።

ከም 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>

ምምዕርራይ ቴይልዊንድ CSS

Tailwind CSS ነባሪ ውቅርኡ ክትቅይሮ የኽእለካ፣ ነቶም ናይ ዩቲሊቲ ክፍልታት ምስ ድሌታትካ ብምምጥጣን። ኣብ ታሕቲ ther eis ኣብነት ናይ ከመይ ጌርካ ነቲ ሕብሪ ፓለቲ ትጥዕሞ።

እዞም ኣብነታት ተዓጻጻፍነትን ቅልልነትን ቴይልዊንድ CSS ዘርእዩ ኮይኖም፡ ከመይ ጌሮም ዘመናዊ፡ ምላሽ ዝህቡ ኣካላት መርበብ ሓበሬታ ብብቕዓትን ብውጽኢታውን መንገዲ ክትፈጥር ከም ዝሕግዙኻ ዘርእዩ እዮም።

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

ዝኾነ ናይ CSS ፋይል ከድልየኒ ድዩ?

ምስ Tailwind CSS ዘድልየካ እንኮ ፋይል tailwind.config.js ፋይል እዩ።

እቲ ፋይል እቲ ናይ ውቅር ቅጥዕታትካ ክሕዝ እዩ። css ኣይትጽሕፍን ወይ ካልእ css ፋይል ኣይህልወካን እዩ። እዚ ናይ ውቅር ፋይል እዚ ጥራይ እዩ ዘድልየካ።

ን Tailwind CSS ዝበለጹ ልምድታት እንታይ እዮም?

ንዝርዝር መብርሂ ብዛዕባ ብሉጻት ልምድታት ቴይልዊንድ CSS፡ በጃኹም ካልእ ጽሑፍና ብሉጻት ልምድታት ቴይልዊንድ CSS ርአ።

ቴይልዊንድ CSS፡ መጻኢ ዲዛይን ዌብ

Tailwind CSS ንመጻኢ ዲዛይን ዌብ ብኸመይ ይቐርጾ ከምዘሎ ኣስተንትኑ። ብዛዕባ ጽልዋኡን ኣብ ኢንዱስትሪ ምምዕባል መርበብ ሓበሬታ ንዕብየት ዘለዎ ዓቕምን ፍለጥ።