Tailwind CSS - HTML دىن ئايرىلماي زامانىۋى تور بېكەتلەرنى تېز قۇرۇڭ

ئاسانلىقچە مۇرەككەپ لايىھىلەش

Tailwind CSS ئارقىلىق مۇرەككەپ لايىھەلەرنى يارىتىش شامالغا ئايلىنىدۇ. پايدىلىق دەرسلەر ۋە ئىنكاسچان لايىھىلەش قوراللىرىنىڭ بىرلەشتۈرۈلۈشى ئارقىلىق مۇرەككەپ ئورۇنلاشتۇرۇشلارنى ئاسان لايىھىلەپ ، تور بېتىڭىزنىڭ ئىقتىدارى ۋە سىجىللىقىغا تەسىر يەتكۈزمەيسىز.

ھەر قانداق نەرسىنى ياساڭ

Tailwind CSS نىڭ گۈزەللىكى كۆپ تەرەپلىمىلىك. ئوخشاش بىر بىۋاسىتە ئىشلىتىشچان دەرسلەرنى ئىشلىتىش بىلەن بىللە ، ئاددىي بىلوگ بېتىدىن ئىلغار ئېلېكترونلۇق سودا سۇپىسىغىچە ھەر قانداق نەرسىنى قۇرالايسىز.

سىز پەقەت تەسەۋۋۇرىڭىز بىلەنلا چەكلىنىسىز. Vanilla CSS نى ئىشلىتىشنىڭ ئاساسلىق پەرقى ، سىز ئۆزىڭىز لايىھەلەيدىغان سۈرئەت.

Div ، div سىنىپى ، p سىنىپىغا ئوخشاش html زاپچاسلىرى بىلەن خاسلاشتۇرۇلغان css سىنىپلىرىنى ئىشلىتىشنىڭ ئەنئەنىۋى ئۇسۇلى ھەمىشە تاللاش ، ئەمما Tailwind CSS بىلەن كەلگەن سۈرئەتنى ياخشىلاش تۇرمۇشىڭىزنى ئاسانلاشتۇرىدۇ.

ئەڭ ياخشى ئۇسۇل ئەمەلىيەتتە ئىشلىمەيدۇ

ئەنئەنە بويىچە ، CSS بىر يۈرۈش دۇنياۋى ئۇسلۇبلارنى تۇرغۇزۇش ۋە ئۇلارنى زاپچاسلار بويىچە مۇكەممەللەشتۈرۈش ئارقىلىق يېزىلغان. گەرچە بۇ مودا ئۇسۇل بولسىمۇ ، ئەمما چوڭ ، ساقلاش تەس بولغان كودنى كەلتۈرۈپ چىقىرىدۇ.

Tailwind CSS بۇ چۈشەنچىگە جەڭ ئېلان قىلىپ ، پايدىلىق بىرىنچى CSS نىڭ تېخىمۇ پاكىز ، تېخىمۇ سىجىل ھەل قىلىش چارىسى بىلەن تەمىنلەيدىغانلىقىنى ئوتتۇرىغا قويدى.

Tailwind CSS ئۈچۈن ئەڭ ئالقىشقا ئېرىشكەن زاپچاس ئامبىرى

daisyUI Tailwind CSS نىڭ ئەڭ ئالقىشقا ئېرىشكەن زاپچاس ئامبىرى بولۇپ ، ئالدىن لايىھەلەنگەن 50 دىن ئارتۇق زاپچاس ، 500+ ئىشلىتىش سىنىپى ۋە ئاساسەن تۈگىمەس مۇمكىنچىلىكى بار. ئۇ سىزنى ھەر قېتىم يېڭى تۈر قۇرغاندا چاقنى ئەسلىگە كەلتۈرۈشتىن ساقلاپ قالىدۇ.

ھەر قېتىم چاقنى قايتا كەشىپ قىلماڭ

Tailwind CSS ھەر بىر يېڭى تۈر ئۈچۈن ئون نەچچە سىنىپ نامىنى يېزىشتىكى جاپالىق جەريان بىلەن ۋاقتىڭىزنى ئىسراپ قىلىشنىڭ ئورنىغا ، ئېنىقلىما بېرىلگەن ، مەنىلىك بىر يۈرۈش دەرسلىكلەرنى ئىشلىتەلەيسىز.

بۇ دەرسلەرنى قايتا ئىشلىتىشكە بولىدۇ ھەمدە CSS كاسسىسى بىلەن ماس قەدەمدە ئىشلەيدۇ ، سىزنى بارلىق تۈرلىرىڭىزگە پۇختا ئاساس بىلەن تەمىنلەيدۇ.

Tailwind CSS - تۇنجى CSS رامكىسى

ئۇنىڭ يادروسى ، Tailwind CSS بولسا ئەڭ مۇھىم بولغان CSS رامكىسى. دېمەك ، ئۇ تۆۋەن دەرىجىدىكى ، بىرىكمە ئىقتىدار سىنىپى بىلەن تەمىنلەيدۇ ، سىز بىۋاسىتە HTML دا خالىغان لايىھەنى قۇرالايسىز. ئەمدى تۈگىمەس CSS ھۆججىتى يوق ، پەقەت ئاددىي ۋە بىۋاسىتە بىۋاسىتە كود.

مەنىلىك سىنىپ نامىنى ئىشلىتىڭ

مەنىلىك سىنىپ ئىسمى سىزنىڭ كودىڭىزنىڭ ئوقۇشچانلىقىنى يۇقىرى كۆتۈرىدۇ ، مەلۇم بىر سىنىپنىڭ نامىغا قاراپلا نېمە ئىش قىلىدىغانلىقىنى چۈشىنىش ئاسان بولىدۇ. بۇ Tailwind CSS ئاچقۇچىلارنىڭ تەجرىبىسىنى ياخشىلاش ئۈچۈن قوللانغان نۇرغۇن ئىقتىدارلارنىڭ بىرى.

ساپ CSS. Framework Agnostic. ھەممە يەردە ئىشلەيدۇ

Tailwind CSS سىزنى ھېچقانداق كونكرېت رامكىغا باغلىمايدۇ. ئۇ پەقەت ساپ CSS ، شۇڭا ئۇنى ھەر قانداق رامكا بىلەن ئىشلىتەلەيسىز ، ھەتتا ھېچقانداق رامكا يوق. ئۇ CSS ئىشلەيدىغان ھەممە جايدا ئىشلەيدۇ.

Tailwind CSS نىڭ پايدىسى

Tailwind CSS نى ئىشلىتىشنىڭ پايدىسى ئىشلەپچىقىرىش ئۈنۈمىنى ئاشۇرۇش ، CSS ھۆججىتىنىڭ چوڭ-كىچىكلىكىنى ئازايتىش ۋە ئىشلىتىشچان بىرىنچى مېتودولوگىيە سەۋەبىدىن تەرەققىي قىلدۇرغۇچى تەجرىبىسىنى ئۆز ئىچىگە ئالىدۇ. بۇنىڭدىن باشقا ، دەل ۋاقتىدا (JIT) ھالىتى چاقماق تېز قۇرۇش ۋاقتى بىلەن تەمىنلەيدۇ ، تەرەققىيات جەريانىڭىزنى تېخىمۇ تېزلىتىدۇ.

Tailwind CSS باھاسى

Tailwind CSS ئوچۇق كودلۇق تۈر بولۇپ ، ئىشلىتىش پۈتۈنلەي ھەقسىز. Tailwind UI ئارقىلىق تەمىنلىنىدىغان UI زاپچاسلىرى ۋە قېلىپلارغا ئوخشاش ئالىي ئىقتىدارلارنى زىيارەت قىلماقچى بولغاندا بۇ چىقىم كېلىدۇ.

ئۇ بىرلا ۋاقىتتا پىكىر ۋە جانلىق

Tailwind CSS سىزنىڭ CSS نى قانداق قۇرۇش توغرىسىدا كۈچلۈك پىكىر بىلەن تەمىنلەيدۇ ، ئەمما ئۇ خاسلاشتۇرۇشقا يېتەرلىك جانلىق. بۇ تەڭپۇڭلۇق سىزنى ئەڭ مۇھىم ئىش - گۈزەل UI بەرپا قىلىشقا مەركەزلەشتۈرىدۇ.

زامانىۋى ئىقتىدارلار

Tailwind CSS Flexbox ، Grid ۋە خاسلىق قاتارلىق زامانىۋى ئىقتىدارلارنى ئۆز ئىچىگە ئالغان بولۇپ ، زامانىۋى تور قوللىنىشچان پروگراممىلىرىنى تەرەققىي قىلدۇرۇشتىكى ئەڭ ياخشى تاللاش ھېسابلىنىدۇ.

Tailwind CSS نى ئىشلىتىشنىڭ ئالدىنقى شەرتى

Tailwind CSS نى ئىشلىتىشتىن بۇرۇن ، سىز HTML ۋە CSS نى چۈشىنىشىڭىز كېرەك.

قۇيرۇق CSS نى قاچان ئىشلىتىش

Tailwind CSS چوڭ ياكى كىچىك ھەر خىل تور تۈرلىرىگە ماس كېلىدۇ. ئەگەر سىز CSS بىلەن چېلىشىشتىن زېرىكىپ ، تېخىمۇ ئۈنۈملۈك ، ئاچقۇچىلارغا قولايلىق ھەل قىلىش چارىسى ئىزدەۋاتقان بولسىڭىز ، ئۇنداقتا Tailwind CSS سىز ئۈچۈن.

زاپچاس رامكىسىغا كىرمەيدۇ؟

ئەگەر سىز React ياكى Vue غا ئوخشاش زاپچاس قۇرۇلمىسىنىڭ مەستانىسى بولمىسىڭىز ، ئەنسىرىمەڭ. Tailwind CSS رامكا-ئاگنوتىك بولۇپ ، ساپ HTML ۋە JavaScript ئارقىلىق ئىشلىتىشكە بولىدۇ.

قۇيرۇق CSS ۋە باشقا CSS رامكىسىنىڭ ئوخشاشلىقى ۋە پەرقى

Bootstrap ۋە Foundation غا ئوخشاش باشقا رامكىلار ئالدىن لايىھەلەنگەن زاپچاسلار بىلەن تەمىنلىسە ، Tailwind CSS سىزگە HTML دىن ئايرىلماي پۈتۈنلەي خاس لايىھىلەش قوراللىرىنى بېرىدۇ. قانداقلا بولمىسۇن ، daisyUI غا ئوخشاش زاپچاس كۈتۈپخانىلىرىنىڭ بىرلىشىشى بىلەن سىز ھازىر ھەر ئىككى دۇنيانىڭ ئەڭ ياخشىلىرىدىن ھۇزۇرلىنالايسىز.

قاراڭغۇ ھالەت

Tailwind CSS ۋە daisyUI نىڭ ئەڭ يېڭى ئىقتىدارلىرىنىڭ بىرى قاراڭغۇ ھالەت بولۇپ ، ئۇ سىزنى جاپالىق ھالدا باش تېمىلىق تور بېكەت قۇرالايسىز.

Flexbox مىسالى

Tailwind CSS Flexbox غا ئوخشاش زامانىۋى CSS ئىقتىدارلىرى بىلەن ياخشى بىرلەشتۈرۈلگەن. مەسىلەن ، ئەۋرىشىم ، ئاقلاش مەركىزى ، تۈرلەر مەركىزى قاتارلىق دەرسلەرنى ئىشلىتىپ ئىنكاسچان ئورۇنلاشتۇرالايسىز.

دەل ۋاقتىدا بىرلەشتۈرسىڭىز ، ئوخشىمىغان پايدىلىق سىنىپ قىممىتىنى ئاسانلا سىناپ باقسىڭىز بولىدۇ. ئەگەر بىر ئەمەلىي دەرسلىك ئىشلىمىسە ، ئۇنى ئۆزگەرتىپ ئېلېمېنتنى خاسلاشتۇرۇڭ.

Flexbox ئورۇنلاشتۇرۇش مىسالى

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>

تەييار زاپچاسلار

ئەگەر تۈرىڭىزدە قۇيرۇق قۇيرۇق css كودى ئىشلىتىشنى قارار قىلغان بولسىڭىز ، توردا نۇرغۇن ئالدىن ياسالغان زاپچاسلارنى تاپالايسىز. بۇلارنىڭ خالىغان بىرىنى كۆچۈرۈپ ، ئۆزىڭىزنىڭ تور بېتىگە خاسلاشتۇرالايسىز.

CSS نى Tailwind CSS غا قانداق ئۆزگەرتىش كېرەك

CSS نى Tailwind CSS سىنىپىغا ئايلاندۇرالايدىغان بولۇش كۆپىنچە ئاچقۇچىلار ئېھتىياجلىق نەرسە. توردا Tailwind CSS مەۋجۇت بولۇشتىن بۇرۇن ياسالغان نۇرغۇن تور بېكەتلەر بار. بۇ تور بەتلەر ئۇسلۇب جەدۋىلى بىلەن css نى ئىشلىتىدۇ ، تور ئېچىش كەسپىي خادىملىرى بۇ بەتلەرنى Tailwind CSS غا كۆچۈرمەكچى.

DivMagic تور ئاچقۇچى ۋە يۇمشاق دېتال ئاچقۇچىلار ئۈچۈن ياسالغان تور ئېچىش قورالى. ئۇ ھەر قانداق ئۇسلۇبنى ۋانىلا css دىن Tailwind CSS غا كۆچۈرەلەيدۇ. بىر چېكىش ئارقىلىق توردىكى ھەر قانداق زاپچاسنى Tailwind CSS غا ئايلاندۇرالايسىز ۋە Tailwind نى تۈرىڭىزدە ئىشلىتەلەيسىز ۋە ئۇسلۇبنى خالىغانچە تەڭشىيەلەيسىز.

قۇيرۇق CSS پەلسەپەسىگە چوڭقۇر چۆكۈش

Tailwind CSS نىڭ ئارقىسىدىكى پەلسەپە بولسا پايدىلىنىشقا ئەھمىيەت بېرىش. بۇ دېگەنلىك Tailwind CSS زاپچاس سىنىپىنى ئالدىن بەلگىلەشنىڭ ئورنىغا ، HTML دىن ئايرىلماي ئۆزگىچە لايىھەلەرنى قۇرالايسىز.

نېمىشقا ئەنئەنىۋى CSS دىن يىراقلىشىدۇ؟

ئەنئەنىۋى CSS ھەددىدىن زىيادە ئېشىپ كېتىش ، قورساق كۆپۈش ۋە «div شورپىسى» نى ھەددىدىن زىيادە ئىشلىتىشنى كەلتۈرۈپ چىقىرىشى مۇمكىن. Tailwind CSS غا ئوخشاش تۇنجى ئىشلىتىلىدىغان CSS رامكىسىغا يۆتكەلسىڭىز ، بۇ مەسىلىلەرنى پەسەيتەلەيسىز ، نەتىجىدە تېخىمۇ پاكىز ، تېخىمۇ راۋان كود يەشكۈچ ھاسىل بولىدۇ.

ئەمەلىي دەرسلەرنىڭ كۈچىنى باشتىن كەچۈرۈڭ

پايدىلىق دەرسلەر سىزنىڭ بارلىق ئۇسلۇب جەدۋىلىڭىزدە ئوخشاش ئۇسلۇبنى تەكرارلاشتىن ساقلىنىشىڭىزغا ياردەم بېرىدۇ. بۇ «ئۆزىڭىزنى تەكرارلىماڭ» (قۇرغاق) پرىنسىپى. بۇ دەرسلەر سىزنى مۇھىم ۋاقىت ۋە زېھىن تېجەيدۇ ھەمدە ناھايىتى يۇقىرى ساقلاشقا بولىدىغان كودنى كەلتۈرۈپ چىقىرىدۇ.

Tailwind CSS كۆرسەتمىسى ئۈستىدە ئىزدىنىش

Tailwind CSS ئۇسلۇب جەدۋىلىڭىزدە ئىشلىتىشكە بولىدىغان بىر قانچە كۆرسەتمىنى تونۇشتۇرىدۇ. بۇلار @apply ، @variants ۋە @screen قاتارلىقلارنى ئۆز ئىچىگە ئالىدۇ. بۇ كۆرسەتمىلەرنى چۈشىنىش ۋە ئىشلىتىش سىزنىڭ Tailwind CSS تەجرىبىڭىزنى زور دەرىجىدە ئاشۇرالايدۇ. بۇلارنى Tailwind Config CSS ھۆججىتىگە قويۇشقا بولىدۇ. بۇ ئۇسۇل ئارقىلىق css دەرسلىرىنى يازالايسىز.

قىستۇرما بىلەن قۇيرۇق CSS نى كېڭەيتىڭ

Tailwind CSS نى قىستۇرما ئارقىلىق كېڭەيتكىلى ، يېڭى ئىقتىدار قوشقىلى ياكى بار بولغانلىرىنى خاسلاشتۇرغىلى بولىدۇ. قىستۇرمىلارنى قانداق ئىشلىتىشنى ئۆگىنىپ ، تور تۈرلىرىڭىزنىڭ ئۈنۈمى ۋە گۈزەللىكىنى ئەڭ يۇقىرى چەككە يەتكۈزۈڭ.

قۇيرۇق CSS نى خىزمەت ئېقىمىڭىزغا قوشۇڭ

Tailwind CSS نى تەرەققىيات خىزمەت ئېقىمىڭىزغا بىرلەشتۈرۈش بىۋاسىتە ، مەيلى Webpack ياكى Parcel غا ئوخشاش قۇرال قوراللىرىنى ئىشلىتىڭ ياكى Next.js ياكى Gatsby غا ئوخشاش رامكىلار بىلەن ئىشلەڭ.

Tailwind CSS ئارقىلىق زىيارەت قىلىش ئىقتىدارىنى ئاشۇرۇش

Tailwind CSS بىر قاتار ARIA خاسلىقلىرىنى ئۆز سىنىپلىرىغا كىرگۈزۈش ئارقىلىق قولايلىق لايىھىلەشكە ئىلھام بېرىدۇ. تېخىمۇ قولايلىق كۆرۈنمە يۈزى قۇرۇپ ، كۆپچىلىكنىڭ ئىشلەتكۈچى تەجرىبىسىنى ئۆستۈرۈڭ.

Tailwind CSS بىلەن Flexbox ۋە Grid نىڭ كۈچىنى ئىشلىتىڭ

Tailwind CSS بىلەن Flexbox ۋە Grid غا ئوخشاش زامانىۋى CSS ئورۇنلاشتۇرۇش مودۇلىنى ئىشلىتىڭ. جانلىق دەرسلەرنىڭ جانلىق ۋە ئىنكاسچان ھالدا ئورۇنلاشتۇرۇشنى كونترول قىلىشقا قانداق ئىشلىتىلىدىغانلىقىنى ئۆگىنىۋېلىڭ.

قۇيرۇق CSS تۈرلىرىڭىزنى قانداق ھەل قىلىش كېرەك

Tailwind CSS ئۇسلۇب مەسىلىلىرىنى بايقاش ۋە ھەل قىلىشنى ئاسانلاشتۇرىدىغان بىر قانچە ھەل قىلىش قورالى ۋە تېخنىكىسى بىلەن تەمىنلەيدۇ. بۇ قوراللارنى چۈشىنىڭ ۋە ھەل قىلىش ئىقتىدارىڭىزنى ئۆستۈرۈڭ.

Tailwind CSS ئارقىلىق رەڭلىك تور قۇرۇڭ

Tailwind CSS كەڭ كۆلەمدە خاسلاشتۇرۇلغان رەڭلەر بىلەن تەمىنلەيدۇ. ھاياتىي كۈچكە تولغان ۋە جەلپ قىلارلىق لايىھەلەرنى يارىتىش ئۈچۈن بۇ رەڭلەرنى قانداق ئىشلىتىشنى ۋە خاسلاشتۇرۇشنى ئۆگىنىۋېلىڭ.

Tailwind CSS نىڭ JIT ھالىتى بىلەن تېز تەرەققىي قىلىڭ

Tailwind CSS نىڭ دەل ۋاقتىدا ھالىتىگە چوڭقۇرلاپ كىرىڭ. ئۇنىڭ قانداق ئىشلەيدىغانلىقىنى ۋە قانداق قىلىپ تەرەققىياتنى تېزلىتىپ ، ۋاقىت بەرپا قىلىدىغانلىقىنى چۈشىنىڭ.

نۆلدىن قەھرىمانغىچە: ئۇستاز قۇيرۇق CSS

Tailwind CSS نى ئىگىلەش سەپىرىگە ئاتلىنىڭ. مۇھىتىڭىزنى تەڭشەشتىن تارتىپ ئىلغار تېمىلار ئۈستىدە ئىزدىنىشكىچە ، بۇ ئەتراپلىق يېتەكچى سىزنى قاپلىدى.

Tailwind CSS نى ئېھتىياجىڭىزغا ماسلاشتۇرۇڭ

Tailwind CSS نىڭ ئەڭ چوڭ ئارتۇقچىلىقى ئۇنىڭ جانلىقلىقى. تۈرىڭىزنىڭ كونكرېت ئېھتىياجىغا ماس ھالدا Tailwind نى قانداق تەڭشەشنى ئۆگىنىۋېلىڭ.

Tailwind CSS بىلەن قول تۇتۇشۇش

بىر قاتار ئەمەلىي مىساللار ئارقىلىق قول سېلىپ ئۆگىنىشكە قاتنىشىڭ. Tailwind CSS ۋە DaisyUI ئارقىلىق ھەر خىل تور زاپچاسلىرىنى قانداق قۇرۇش ئۈستىدە ئىزدىنىڭ.

باشقا CSS رامكىسىدىن 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>

قۇيرۇق 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 نىڭ تور لايىھىلەشنىڭ كەلگۈسىنى قانداق شەكىللەندۈرىدىغانلىقى ھەققىدە ئويلاڭ. ئۇنىڭ تور تەرەققىيات كەسپىدىكى تەسىرى ۋە تەرەققىيات يوشۇرۇن كۈچىنى ئۆگىنىۋېلىڭ.