divmagic Make design
SimpleNowLiveFunMatterSimple
Brian
Brian

DivMagic መስራች

ጁላይ 8፣ 2023

Tailwind CSS - ከኤችቲኤምኤልዎ ሳይወጡ ዘመናዊ ድር ጣቢያዎችን በፍጥነት ይገንቡ

Image 0

ዘመናዊ፣ ምላሽ ሰጪ እና እይታን የሚስቡ ድረ-ገጾችን መገንባት ከፈለጉ፣ Tailwind CSS የእርስዎ የጉዞ ማዕቀፍ ነው። በኤችቲኤምኤልዎ ውስጥ ብጁ በይነገጾችን እንዲፈጥሩ የሚያስችልዎ ባህላዊውን የሲኤስኤስ የጸሐፊነት ሂደት ያስተካክላል። Tailwind CSS ከ5 ሚሊዮን በላይ ሳምንታዊ ጭነቶች ካሉት በጣም ታዋቂው የCSS ማዕቀፎች አንዱ ነው።

ውስብስብ ንድፎችን በቀላሉ ይፍጠሩ

Image 1

በTailwind CSS፣ ውስብስብ ንድፎችን መፍጠር ነፋሻማ ይሆናል። የመገልገያ ክፍሎች እና ምላሽ ሰጪ የንድፍ መገልገያዎች ጥምረት በድር ጣቢያዎ አፈፃፀም እና ጥገና ላይ ሳያስቀሩ ውስብስብ አቀማመጦችን በቀላሉ ለመንደፍ ያስችልዎታል።

ማንኛውንም ነገር ይገንቡ

Image 2

የTailwind CSS ውበት ሁለገብነቱ ላይ ነው። ሁሉንም ነገር ከቀላል ብሎግ ገጽ ወደ የላቀ የኢ-ኮሜርስ መድረክ መፍጠር ትችላለህ፣ ሁሉም ተመሳሳይ የሚታወቅ የመገልገያ ክፍሎችን እየተጠቀምክ ነው።

በምናባችሁ ብቻ ነው የተገደቡት። ቫኒላ CSS ከመጠቀም ዋናው ልዩነት ብጁ ንድፎችን መገንባት የሚችሉበት ፍጥነት ነው.

ብጁ የሲኤስኤስ ክፍሎችን እንደ ዲቪ፣ ዲቪ ክፍል፣ ፒ መደብ ባሉ የኤችቲኤምኤል ክፍሎች የመጠቀም ባህላዊ አካሄድ ሁሌም አማራጭ ነው ነገርግን ከTailwind CSS ጋር የሚመጣው የፍጥነት መሻሻል ህይወትዎን ቀላል ያደርገዋል።

ምርጥ ልምዶች በትክክል አይሰሩም

Image 3

በተለምዶ፣ ሲኤስኤስ የተጻፈው ዓለም አቀፋዊ ቅጦችን በማቋቋም እና በክፍል-በ-አካላት ላይ በማጣራት ነው። ይህ በጣም ታዋቂ ዘዴ ቢሆንም, ወደ ግዙፍ, ለማቆየት አስቸጋሪ የሆነ ኮድ ሊያመጣ ይችላል.

የመገልገያ-የመጀመሪያው ሲ ኤስ ኤስ የበለጠ ንፁህ ፣ የበለጠ ሊቆይ የሚችል መፍትሄ ይሰጣል ሲል ታይልዊንድ ሲ ኤስ ኤስ ይህንን ሀሳብ ይሞግታል።

ለTailwind CSS በጣም ታዋቂው አካል ቤተ-መጽሐፍት።

Image 4

daisyUI ለTailwind CSS በጣም ታዋቂው የመለዋወጫ ቤተ-መጽሐፍት ነው፣ ከ50 በላይ አስቀድሞ የተነደፉ ክፍሎች፣ 500+ የፍጆታ ክፍሎች እና ማለቂያ የለሽ እድሎችን የሚኩራራ። አዲስ ፕሮጀክት በፈጠሩ ቁጥር መንኮራኩሩን እንደገና ከመፍጠር ያድንዎታል።

መንኮራኩሩን ሁል ጊዜ አይፍጠሩ

Image 5

ለእያንዳንዱ አዲስ ፕሮጀክት በደርዘን የሚቆጠሩ የክፍል ስሞችን በመጻፍ ጊዜዎን ከማጥፋት ይልቅ፣ Tailwind CSS በደንብ የተገለጸ፣ የትርጉም የመገልገያ ክፍሎችን ለመጠቀም ያስችሎታል።

እነዚህ ክፍሎች እንደገና ጥቅም ላይ ሊውሉ የሚችሉ እና ከሲኤስኤስ ካስኬድ ጋር ተስማምተው የሚሰሩ ናቸው፣ ይህም ለሁሉም ፕሮጀክቶችዎ ጠንካራ መሰረት ይሰጥዎታል።

Tailwind CSS - የፍጆታ የመጀመሪያ CSS መዋቅር

Image 6

በዋናው ላይ፣ Tailwind CSS የመገልገያ-የመጀመሪያው የCSS ማዕቀፍ ነው። ይህ ማለት በቀጥታ በኤችቲኤምኤልዎ ውስጥ ማንኛውንም ንድፍ ለመገንባት ሊጠቀሙባቸው የሚችሉ ዝቅተኛ ደረጃ ፣ የተዋሃዱ የመገልገያ ክፍሎችን ያቀርባል። ማለቂያ የሌላቸው የሲኤስኤስ ፋይሎች የሉም፣ ቀላል እና ሊታወቅ የሚችል ኮድ ብቻ።

የትርጉም ክፍል ስሞችን ተጠቀም

Image 7

የትርጉም ክፍል ስሞች የኮድዎን ተነባቢነት ያሻሽላሉ፣ ይህም አንድ የተወሰነ ክፍል ስሙን በማየት ብቻ ምን እንደሚሰራ ለመረዳት ቀላል ያደርገዋል። ይህ Tailwind CSS የገንቢውን ልምድ ለማሻሻል ከወሰዳቸው በርካታ ባህሪያት ውስጥ አንዱ ነው።

ንጹህ CSS ማዕቀፍ አግኖስቲክ. በሁሉም ቦታ ይሰራል

Image 8

Tailwind CSS ከማንኛውም የተለየ ማዕቀፍ ጋር አያይዘህም። በቀላሉ ንፁህ CSS ነው፣ ስለዚህ በማንኛውም ማዕቀፍ ሊጠቀሙበት ይችላሉ፣ ወይም ምንም ማዕቀፍ ሳይኖር። ሲኤስኤስ በሚሰራበት ቦታ ሁሉ ይሰራል።

የTailwind CSS ጥቅሞች

Image 9

Tailwind CSS የመጠቀም ጥቅማጥቅሞች ምርታማነት መጨመር፣የሲኤስኤስ ፋይል መጠን መቀነስ እና በፍጆታ-የመጀመሪያው ዘዴ ምክንያት የተሻሻለ የገንቢ ተሞክሮ ያካትታሉ። በተጨማሪም፣ የ Just-In-Time (JIT) ሁነታ የመብረቅ-ፈጣን የግንባታ ጊዜዎችን ያቀርባል፣ ይህም የእድገት ሂደትዎን የበለጠ ያፋጥነዋል።

Tailwind CSS ዋጋ

Image 10

Tailwind CSS ክፍት ምንጭ ፕሮጀክት ነው፣ ይህ ማለት ሙሉ በሙሉ ለመጠቀም ነፃ ነው። በTailwind UI በኩል የሚቀርቡትን እንደ UI ክፍሎች እና አብነቶች ያሉ ዋና ባህሪያትን መድረስ ሲፈልጉ ዋጋው ይመጣል።

እሱ በአስተያየት የተሞላ እና በተመሳሳይ ጊዜ ተለዋዋጭ ነው።

Image 11

Tailwind CSS የእርስዎን CSS እንዴት ማዋቀር እንደሚቻል ላይ ጠንካራ አስተያየት ይሰጣል፣ነገር ግን ማበጀትን ለመፍቀድ ተለዋዋጭ ነው። ይህ ሚዛን በጣም አስፈላጊ በሆኑት ላይ እንዲያተኩሩ ያስችልዎታል - የሚያምሩ UIዎችን በመገንባት ላይ።

ዘመናዊ ባህሪያት

Image 12

Tailwind CSS እንደ ፍሌክስቦክስ፣ ግሪድ እና ብጁ ንብረቶች ያሉ ዘመናዊ ባህሪያትን ያቀፈ ነው፣ ይህም ለዘመናዊ የድር መተግበሪያዎችን ለማዘጋጀት ጥሩ ምርጫ ያደርገዋል።

Tailwind CSS ለመጠቀም ቅድመ ሁኔታዎች

Image 13

Tailwind CSS መጠቀም ከመጀመርዎ በፊት፣ ስለ HTML እና CSS መሰረታዊ ግንዛቤ ያስፈልግዎታል።

Tailwind CSS መቼ መጠቀም እንዳለበት

Image 14

Tailwind CSS ለሁሉም አይነት የድር ፕሮጀክቶች፣ ትልቅም ይሁን ትንሽ ተስማሚ ነው። ከሲኤስኤስ ጋር መታገል ከደከመዎት እና የበለጠ ቀልጣፋ፣ ለገንቢ ተስማሚ የሆነ መፍትሄ መፈለግ፣ Tailwind CSS ለእርስዎ ነው።

ወደ ክፍሎች ማዕቀፎች አይደሉም?

Image 15

እንደ React ወይም Vue ያሉ የመለዋወጫ ማዕቀፎች ደጋፊ ካልሆንክ ምንም አትጨነቅ። Tailwind CSS ፍሬም-አግኖስቲክ ነው እና በንጹህ HTML እና JavaScript መጠቀም ይቻላል።

በTailwind CSS እና በሌሎች የሲኤስኤስ ማዕቀፎች መካከል ያሉ ተመሳሳይነቶች እና ልዩነቶች

Image 16

እንደ ቡትስትራፕ እና ፋውንዴሽን ያሉ ሌሎች ማዕቀፎች አስቀድሞ የተነደፉ ክፍሎችን ሲያቀርቡ፣ Tailwind CSS የእርስዎን HTML ሳይለቁ ሙሉ ለሙሉ ብጁ ንድፎችን እንዲገነቡ መሳሪያዎችን ይሰጥዎታል። ነገር ግን፣ እንደ daisyUI ባሉ የክፍል ቤተ-ፍርግሞች ውህደት አሁን ከሁለቱም ዓለማት ምርጡን መደሰት ይችላሉ።

ጨለማ ሁነታ

Image 17

የቅርብ ጊዜዎቹ የTailwind CSS እና daisyUI ባህሪያት አንዱ የጨለማ ሁነታ ነው፣ይህም ያለልፋት ጨለማ ገጽታ ያላቸው ድረ-ገጾችን ለመፍጠር የሚያስችል ነው።

የFlexbox ምሳሌ

Image 18

Tailwind CSS እንደ Flexbox ካሉ ዘመናዊ የሲኤስኤስ ባህሪያት ጋር በደንብ ይዋሃዳል። ለምሳሌ፣ እንደ flex፣ justify- center፣ ንጥሎች-ማዕከል እና የመሳሰሉትን ክፍሎች በመጠቀም ምላሽ ሰጪ አቀማመጥ መፍጠር ይችላሉ።

በ Just-in-Time ጥምረት አማካኝነት የተለያዩ የመገልገያ ክፍል እሴቶችን በቀላሉ መሞከር ይችላሉ። አንድ የመገልገያ ክፍል ካልሰራ፣ የእርስዎን ኤለመንት ለማበጀት በቀላሉ ይለውጡት።

የFlexbox አቀማመጥ ምሳሌ

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 ማዛወር ይፈልጋሉ።

DivMagic ለድር ገንቢ እና ሶፍትዌር ገንቢዎች የተሰራ የድር ልማት መሳሪያ ነው። የትኛውንም ዘይቤ ከቫኒላ css ወደ Tailwind CSS ለመቅዳት ያስችላል። በአንድ ጠቅታ በይነመረቡ ላይ ያለውን ማንኛውንም አካል ወደ Tailwind CSS መለወጥ እና በፕሮጀክትዎ ውስጥ Tailwind ን መጠቀም እና ዘይቤውን በፈለጉት መንገድ ማበጀት ይችላሉ።

ወደ Tailwind CSS ፍልስፍና ይዝለሉ

Image 22

ከTailwind CSS በስተጀርባ ያለው ፍልስፍና በፍጆታ ላይ ማተኮር ነው። ይህ ማለት የአካል ክፍሎችን አስቀድሞ ከመወሰን ይልቅ Tailwind CSS ከኤችቲኤምኤልዎ ሳይወጡ ልዩ ንድፎችን እንዲገነቡ የሚያስችልዎትን ዝቅተኛ ደረጃ የመገልገያ ክፍሎችን ያቀርባል።

ለምንድነው ከባህላዊ CSS ርቀዋል?

Image 23

ባህላዊ ሲኤስኤስ ከመጠን በላይ መሻርን፣ የተበሳጩ ፋይሎችን እና 'div ሾርባን' መጠቀምን ሊያስከትል ይችላል። እንደ Tailwind CSS ወደ አንድ የመገልገያ-የመጀመሪያው የCSS ማዕቀፍ በመቀየር እነዚህን ጉዳዮች ማቃለል ይችላሉ፣ ይህም ይበልጥ ንጹህና የተሳለጠ ኮድ ቤዝ ያስገኛሉ።

የመገልገያ ክፍሎችን ኃይል ይለማመዱ

Image 24

የመገልገያ ክፍሎች በመላው የቅጥ ሉሆችዎ ውስጥ ተመሳሳይ ዘይቤዎችን ከመድገም ይቆጠቡዎታል። "ራስህን አትድገም" (DRY) መርህ ነው. እነዚህ ክፍሎች ከፍተኛ ጊዜ እና ጉልበት ይቆጥቡዎታል እና በከፍተኛ ደረጃ ወደሚጠበቀው ኮድ ቤዝ ይመራሉ ።

Tailwind CSS መመሪያዎችን ማሰስ

Image 25

Tailwind CSS በእርስዎ የቅጥ ሉሆች ውስጥ ጥቅም ላይ ሊውሉ የሚችሉ ጥቂት መመሪያዎችን ያስተዋውቃል። እነዚህ @apply፣ @variants እና @ስክሪን ያካትታሉ። እነዚህን መመሪያዎች መረዳት እና መጠቀም የእርስዎን Tailwind CSS ልምድ በእጅጉ ያሳድጋል። እነዚህ በTailwind Config CSS ፋይል ውስጥ ሊቀመጡ ይችላሉ። ይህንን አካሄድ በመጠቀም የ css ክፍሎችን መፃፍ ይችላሉ።

ከፕለጊኖች ጋር Tailwind CSS ዘርጋ

Image 26

Tailwind CSS በፕለጊን ሊራዘም ይችላል፣ አዲስ ተግባርን በመጨመር ወይም ያለውን ማበጀት። የድር ፕሮጀክቶችዎን ቅልጥፍና እና ውበት ከፍ ለማድረግ እንዴት ተሰኪዎችን መጠቀም እንደሚችሉ ይወቁ።

የTailwind CSSን በስራ ፍሰትዎ ውስጥ ያካትቱ

Image 27

እንደ Webpack ወይም Parcel ያሉ የግንባታ መሳሪያዎችን እየተጠቀሙ ወይም እንደ Next.js ወይም Gatsby ካሉ ማዕቀፎች ጋር እየሰሩ ከሆነ Tailwind CSSን ወደ የእድገት የስራ ሂደትዎ ማዋሃድ ቀላል ነው።

በTailwind CSS ተደራሽነትን ያሳድጉ

Image 28

Tailwind CSS የተለያዩ የ ARIA ባህሪያትን በክፍሎቹ ውስጥ በማካተት ተደራሽ ዲዛይን ያበረታታል። የበለጠ ተደራሽ በይነገጾችን ይፍጠሩ እና የተጠቃሚውን ተሞክሮ ለሁሉም ሰው ያሳድጉ።

የFlexbox እና Grid ሃይልን በTailwind CSS ይጠቀሙ

እንደ Flexbox እና Grid ያሉ ዘመናዊ የሲኤስኤስ አቀማመጥ ሞጁሎችን በTailwind CSS ይጠቀሙ። የመገልገያ ክፍሎች አቀማመጥን በተለዋዋጭ እና ምላሽ በሚሰጥ መልኩ ለመቆጣጠር እንዴት ጥቅም ላይ እንደሚውሉ ይወቁ።

የእርስዎን Tailwind CSS ፕሮጀክቶች እንዴት ማረም እንደሚችሉ

Tailwind CSS የቅጥ አሰራር ጉዳዮችን መለየት እና መፍታት ቀላል የሚያደርጉ በርካታ የማረሚያ መሳሪያዎችን እና ቴክኒኮችን ይሰጣል። እነዚህን መሳሪያዎች ይረዱ እና የማረም ችሎታዎን ያሳድጉ።

ከTailwind CSS ጋር በቀለማት ያሸበረቀ ድር ይፍጠሩ

Tailwind CSS ሊበጁ ከሚችሉ ቀለሞች ሰፊ ቤተ-ስዕል ጋር አብሮ ይመጣል። ንቁ እና ለእይታ ማራኪ ንድፎችን ለመፍጠር እነዚህን ቀለሞች እንዴት መጠቀም እና ማበጀት እንደሚችሉ ይወቁ።

በTailwind CSS' JIT Mode በበለጠ ፍጥነት ይገንቡ

ወደ Tailwind CSS ልክ ጊዜ-ውስጥ ሁነታ በጥልቀት ይግቡ። እንዴት እንደሚሰራ እና እንዴት የእርስዎን እድገት በከፍተኛ ሁኔታ እንደሚያፋጥን እና ጊዜዎችን እንደሚገነባ ይረዱ።

ከዜሮ ወደ ጀግና፡ Master Tailwind CSS

Tailwind CSSን ለመምራት ጉዞ ጀምር። አካባቢዎን ከማዋቀር ጀምሮ የላቁ ርዕሶችን እስከ መቃኘት ድረስ፣ ይህ አጠቃላይ መመሪያ ሸፍኖዎታል።

Tailwind CSSን ወደ ፍላጎቶችዎ ያብጁ

የTailwind CSS ትልቅ ጥንካሬዎች አንዱ ተለዋዋጭነቱ ነው። የፕሮጀክትዎን ልዩ ፍላጎቶች ለማሟላት Tailwindን እንዴት ማበጀት እንደሚችሉ ይወቁ።

በTailwind CSS እጅን ማግኘት

በተግባራዊ ምሳሌዎች በተከታታይ በመማር ላይ ይሳተፉ። Tailwind CSS እና DaisyUIን በመጠቀም የተለያዩ የድር ክፍሎችን እንዴት እንደሚገነቡ ያስሱ።

ከሌሎች የሲኤስኤስ ማዕቀፎች ወደ Tailwind CSS በመሰደድ ላይ

ወደ Tailwind CSS ለመቀየር እያሰቡ ነው? በTailwind እና በሌሎች ማዕቀፎች መካከል ያሉትን ቁልፍ ልዩነቶች ይረዱ እና ፕሮጀክቶችዎን ለማዛወር ውጤታማ ስልቶችን ይማሩ።

የፍልሰት ፍጥነትዎን በከፍተኛ ሁኔታ ለመጨመር 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>

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 ኢሜይል ዝርዝሩን ይቀላቀሉ!

© 2024 DivMagic, Inc. መብቱ በህግ የተጠበቀ ነው።