Šiame įraše išsamiai aprašoma visa procedūra, kaip pridėti tarpą tarp stulpelių „Tailwind“.
Kaip pridėti tarpą tarp stulpelių „Tailwind“?
Norėdami pridėti tarpą tarp „Tailwind“ stulpelių, naudokite įmontuotą „ tarpas-{dydis} ' naudingumas. Nurodoma sveikojo skaičiaus reikšmė, nurodanti tarpą tarp stulpelių horizontaliai ir vertikaliai. Atlikime šią užduotį praktiškai, pasitelkę pateiktus pavyzdžius.
Projekto failo struktūra
„ tarpas-{dydis} “ įrankis gali būti įdiegtas bet kuriame iš Tailwind projektų, kurie atitinka nurodytą failų struktūrą:
Pradėkime nuo pirmojo pavyzdžio.
1 pavyzdys: naudokite „gap-{size}“ įrankį, kad pridėtumėte tą patį tarpą tarp eilučių ir stulpelių
Šiame pavyzdyje taikoma „gap-{size}“ priemonė, skirta pridėti tą patį tarpą horizontaliai ir vertikaliai tarp nurodytų stulpelių.
HTML kodas
Šio kodo apžvalga:
< galva >
< nuoroda href = '/dist/output.css' rel = 'stiliaus lapas' >
< / galva >
< kūnas >
< h1 klasė = 'text-3xl font-bold text-center pabrauktas tekstas-oranžinė-600' > Sveiki atvykę į Linuxhint! < / h1 >< br >
< div klasė = 'mx-2 grid grid-cols-3 gap-4' >
< div klasė = 'border-2 border-orange-600' > Pirma pamoka < / div >
< div klasė = 'border-2 border-orange-600' > Antroji pamoka < / div >
< div klasė = 'border-2 border-orange-600' > Trečia pamoka < / div >
< div klasė = 'border-2 border-orange-600' > Ketvirta pamoka < / div >
< div klasė = 'border-2 border-orange-600' > Penktoji pamoka < / div >
< div klasė = 'border-2 border-orange-600' > Šeštoji pamoka < / div >
< div klasė = 'border-2 border-orange-600' > Septintoji pamoka < / div >
< div klasė = 'border-2 border-orange-600' > Aštunta pamoka < / div >
< / div >
Aukščiau pateiktose kodo eilutėse:
- Pirmiausia susiekite pagrindinį CSS failą ' /dist/output.css 'su esamu HTML failu' index.html ' naudojant '
“ žymą skiltyje „head“. - Tada skyriuje „body“ sukuriamas elementas „
“, kuriame naudojamas „ Šrifto dydis “, „ Šrifto svoris “, „ Teksto lygiavimas “, „ Teksto dekoravimas ', ir ' Teksto spalva ” Atitinkamai tailwind klasės.
- Po to pridedamas elementas „“, kuris taiko „ tinklelis programa, skirta nustatyti jo turinį nurodytame tinklelio išdėstymų skaičiuje, marža “ klasę, kad nustatytumėte horizontalią paraštę, ir „ tarpas “ įrankis, skirtas pridėti nurodytą tarpą tarp stulpelių.
- „
“ elemento korpuso skiltyje yra dar aštuoni „“ elementai, kurie naudoja „ Krašto plotis ' ir ' Kraštinės spalva “ klases, atitinkamai.Išvestis
Paleiskite aukščiau pateiktą HTML kodą tiesioginiame serveryje ir išanalizuokite išvestį:
Kaip matote, išvestis atitinkamai prideda nurodytą tarpą tarp stulpelių abiejuose matmenyse.
2 pavyzdys: naudokite „gap-{size}“ įrankį, norėdami atskirai pridėti tarpą tarp eilučių ir stulpelių
„ tarpas-{dydis} “ programa taip pat gali būti įdiegta naudojant matmenis „x (horizontalus)“ ir „y (vertikali)“ kaip „gap-x-{size}“ eilutėms ir „gap-y-{size}“ stulpeliams, kad būtų galima pridėti tarpas tarp jų atskirai.Pažiūrėkime, kaip tai praktiškai įgyvendinama.
HTML kodas
< galva >
Pažvelkite į pateiktą kodą:
< nuoroda href = '/dist/output.css' rel = 'stiliaus lapas' >
< / galva >
< kūnas >
< div klasė = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div klasė = 'border-2 border-orange-600' >Pirmoji pamoka< / div >
< div klasė = 'border-2 border-orange-600' >Antra pamoka< / div >
< div klasė = 'border-2 border-orange-600' >Trečia pamoka< / div >
< div klasė = 'border-2 border-orange-600' >Ketvirtoji pamoka< / div >
< div klasė = 'border-2 border-orange-600' >Penktoji pamoka< / div >
< div klasė = 'border-2 border-orange-600' >Šeštoji pamoka< / div >
< div klasė = 'border-2 border-orange-600' >Septinta pamoka< / div >
< div klasė = 'border-2 border-orange-600' >Aštuntoji pamoka< / div >
< / div >
< kūnas >Čia „ tarpas-x-{dydis} “ programa prideda tarpą tarp eilučių ir „ tarpas-y-{dydis} “ savarankiškai prideda nurodytą tarpą tarp stulpelių.
Išvestis
Aukščiau pateiktas rezultatas patvirtina, kad tarpas tarp eilučių ir stulpelių yra atitinkamai pritaikytas.
Išvada
„Tailwind CSS“ suteikia integruotą „ tarpas-{dydis} “, kad padidintumėte tarpą tarp stulpelių. Jis taip pat gali būti naudojamas norint pridėti tarpą tarp eilučių ir stulpelių atskirai, naudojant „ tarpas-x-{dydis} ' ir ' tarpas-y-{dydis} ' Komunalinės paslaugos. Šiame įraše buvo pateikta visa procedūra, kaip pridėti tarpą tarp stulpelių „Tailwind“.
- „