Tailwind CSS - Արագ կառուցեք ժամանակակից կայքեր՝ առանց ձեր HTML-ը թողնելու

Հեշտությամբ ստեղծեք բարդ նմուշներ

Tailwind CSS-ի միջոցով բարդ դիզայնի ստեղծումը դառնում է հեշտ: Կոմունալ ծառայությունների դասերի և արձագանքող դիզայնի կոմունալ ծառայությունների համադրությունը թույլ է տալիս հեշտությամբ ձևավորել բարդ դասավորություններ՝ չվնասելով ձեր վեբ կայքի աշխատանքին և պահպանմանը:

Կառուցեք որևէ բան

Tailwind CSS-ի գեղեցկությունը կայանում է նրա բազմակողմանիության մեջ: Դուք կարող եք ստեղծել ցանկացած բան՝ պարզ բլոգի էջից մինչև էլեկտրոնային առևտրի առաջադեմ հարթակ, բոլորը՝ օգտագործելով նույն ինտուիտիվ օգտակար դասերը:

Դուք սահմանափակված եք միայն ձեր երևակայությամբ։ Vanilla CSS-ի օգտագործման հիմնական տարբերությունն այն արագությունն է, որով դուք կարող եք անհատական ​​դիզայներ ստեղծել:

Սովորական css դասերի օգտագործման ավանդական մոտեցումը html բաղադրիչներով, ինչպիսիք են div, div class, p class, միշտ տարբերակ է, բայց արագության բարելավումը, որը գալիս է Tailwind CSS-ով, հեշտացնում է ձեր կյանքը:

Լավագույն փորձը իրականում չի աշխատում

Ավանդաբար, CSS-ը գրվում է՝ ստեղծելով գլոբալ ոճերի մի շարք և կատարելագործելով դրանք բաղադրիչ առ բաղադրիչ հիմունքներով: Թեև սա հանրաճանաչ մեթոդ է, այն կարող է հանգեցնել մեծածավալ, դժվար պահպանվող կոդի:

Tailwind CSS-ը վիճարկում է այս հասկացությունը՝ պնդելով, որ առաջին կոմունալ CSS-ն առաջարկում է ավելի մաքուր և պահպանվող լուծում:

Ամենատարածված բաղադրիչ գրադարանը Tailwind CSS-ի համար

daisyUI-ն ամենահայտնի բաղադրիչ գրադարանն է Tailwind CSS-ի համար՝ պարծենալով ավելի քան 50 նախապես մշակված բաղադրիչներով, 500+ օգտակար դասերով և գործնականում անսահման հնարավորություններով: Այն ձեզ փրկում է անիվը նորից հորինելուց ամեն անգամ, երբ նոր նախագիծ եք ստեղծում:

Ամեն անգամ մի նորից հորինեք անիվը

Յուրաքանչյուր նոր նախագծի համար տասնյակ դասերի անուններ գրելու հոգնեցուցիչ գործընթացի վրա ձեր ժամանակը վատնելու փոխարեն, Tailwind CSS-ը ձեզ հնարավորություն է տալիս օգտագործել օգտակար դասերի լավ սահմանված, իմաստային շարք:

Այս դասերը բազմակի օգտագործման են և ներդաշնակորեն աշխատում են CSS կասկադի հետ՝ ապահովելով ձեզ ամուր հիմք ձեր բոլոր նախագծերի համար:

Tailwind CSS - Utility First CSS Framework

Իր հիմքում, Tailwind CSS-ը օգտակար առաջին CSS շրջանակն է: Սա նշանակում է, որ այն տրամադրում է ցածր մակարդակի, կոմպոզիցելի օգտակար դասեր, որոնք կարող եք օգտագործել ցանկացած դիզայն ստեղծելու համար՝ անմիջապես ձեր HTML-ում: Այլևս չկան անվերջ CSS ֆայլեր, միայն պարզ և ինտուիտիվ կոդ:

Օգտագործեք իմաստային դասերի անունները

Իմաստային դասերի անունները բարելավում են ձեր կոդի ընթեռնելիությունը՝ հեշտացնելով հասկանալ, թե ինչ է անում կոնկրետ դասը՝ պարզապես նայելով նրա անվանը: Սա այն բազմաթիվ հատկանիշներից մեկն է, որը Tailwind CSS-ն ընդունել է ծրագրավորողների փորձը բարելավելու համար:

Մաքուր CSS: Շրջանակային ագնոստիկ. Աշխատում է ամենուր

Tailwind CSS-ը ձեզ չի կապում որևէ կոնկրետ շրջանակի հետ: Դա պարզապես մաքուր CSS է, այնպես որ կարող եք օգտագործել այն ցանկացած շրջանակով, կամ նույնիսկ ընդհանրապես առանց շրջանակի: Այն աշխատում է ամենուր, որտեղ աշխատում է CSS-ը:

Tailwind CSS-ի առավելությունները

Tailwind CSS-ի օգտագործման առավելությունները ներառում են արտադրողականության բարձրացում, CSS ֆայլի չափի կրճատում և ծրագրավորողի ընդլայնված փորձ՝ շնորհիվ օգտակար առաջին մեթոդաբանության: Բացի այդ, Just-In-Time (JIT) ռեժիմն ապահովում է կայծակնային արագ կառուցման ժամանակներ՝ ավելի արագացնելով ձեր զարգացման գործընթացը:

Tailwind CSS-ի գնագոյացում

Tailwind CSS-ը բաց կոդով նախագիծ է, ինչը նշանակում է, որ այն լիովին անվճար է օգտագործման համար: Արժեքը գալիս է, երբ ցանկանում եք մուտք գործել պրեմիում գործառույթներ, ինչպիսիք են UI բաղադրիչները և ձևանմուշները, որոնք առաջարկվում են Tailwind UI-ի միջոցով:

Այն միաժամանակ կարծիքի է և ճկուն

Tailwind CSS-ը ամուր կարծիք է տալիս այն մասին, թե ինչպես պետք է կառուցվի ձեր CSS-ը, սակայն այն բավականաչափ ճկուն է, որպեսզի թույլատրի անհատականացումը: Այս հավասարակշռությունը թույլ է տալիս կենտրոնանալ այն ամենի վրա, ինչն ամենակարևորն է՝ ստեղծելով գեղեցիկ UI-ներ:

Ժամանակակից առանձնահատկություններ

Tailwind CSS-ը ներառում է ժամանակակից հնարավորություններ, ինչպիսիք են Flexbox-ը, Grid-ը և հատուկ հատկությունները, ինչը այն դարձնում է հիանալի ընտրություն ժամանակակից վեբ հավելվածներ մշակելու համար:

Tailwind CSS-ի օգտագործման նախադրյալները

Նախքան Tailwind CSS-ի օգտագործումը սկսելը, ձեզ անհրաժեշտ է HTML-ի և CSS-ի հիմնական իմացությունը:

Երբ օգտագործել Tailwind CSS-ը

Tailwind CSS-ը հարմար է բոլոր տեսակի վեբ նախագծերի համար՝ մեծ կամ փոքր: Եթե ​​հոգնել եք CSS-ի հետ պայքարից և փնտրում եք ավելի արդյունավետ, մշակողների համար հարմար լուծում, ապա Tailwind CSS-ը ձեզ համար է:

Չե՞ք մտնում բաղադրիչի շրջանակների մեջ:

Եթե ​​դուք React-ի կամ Vue-ի նման բաղադրիչ շրջանակների երկրպագու չեք, մի անհանգստացեք: Tailwind CSS-ը շրջանակային-ագնոստիկ է և կարող է օգտագործվել մաքուր HTML-ի և JavaScript-ի հետ:

Նմանություններ և տարբերություններ Tailwind CSS-ի և CSS այլ շրջանակների միջև

Մինչ այլ շրջանակներ, ինչպիսիք են Bootstrap-ը և Foundation-ը, առաջարկում են նախապես նախագծված բաղադրիչներ, Tailwind CSS-ը ձեզ գործիքներ է տալիս՝ ամբողջովին անհատականացված ձևավորումներ ստեղծելու համար՝ առանց ձեր HTML-ից դուրս գալու: Այնուամենայնիվ, daisyUI-ի պես բաղադրիչ գրադարանների ինտեգրմամբ, այժմ կարող եք վայելել երկու աշխարհների լավագույնը:

Մութ ռեժիմ

Tailwind CSS-ի և daisyUI-ի վերջին հնարավորություններից մեկը մութ ռեժիմն է, որը հնարավորություն է տալիս առանց ջանքերի ստեղծել մութ թեմաներով կայքեր:

Flexbox-ի օրինակ

Tailwind CSS-ը լավ ինտեգրվում է ժամանակակից CSS հնարավորությունների հետ, ինչպիսին է Flexbox-ը: Օրինակ, դուք կարող եք ստեղծել արձագանքող դասավորություն՝ օգտագործելով դասեր, ինչպիսիք են flex, justify-centre, items-center և այլն:

Just-in-Time-ի համակցությամբ դուք կարող եք հեշտությամբ փորձել տարբեր օգտակար դասի արժեքներ: Եթե ​​մեկ օգտակար դաս չի աշխատում, պարզապես փոխեք այն՝ ձեր տարրը հարմարեցնելու համար:

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>

Պատրաստի բաղադրիչներ

Եթե ​​որոշել եք օգտագործել tailwind css կոդը ձեր նախագծում, դուք կկարողանաք առցանց գտնել բազմաթիվ նախապես պատրաստված բաղադրիչներ: Դուք կարող եք պատճենել դրանցից որևէ մեկը և հարմարեցնել ձեր սեփական կայքի համար:

Ինչպես փոխարկել CSS-ը Tailwind CSS-ի

CSS-ը Tailwind CSS-ի դասերի վերածելու ունակությունը ծրագրավորողների մեծամասնության կարիքն է: Ինտերնետում կան բազմաթիվ կայքեր, որոնք ստեղծվել են մինչև Tailwind CSS-ի գոյությունը: Այս վեբ էջերը օգտագործում են css ոճերի թերթիկով, և վեբ մշակման մասնագետները ցանկանում են տեղափոխել այս էջերը Tailwind CSS:

DivMagic-ը վեբ մշակման գործիք է, որը ստեղծվել է վեբ մշակողների և ծրագրային ապահովման մշակողների համար: Այն թույլ է տալիս ցանկացած ոճ պատճենել վանիլային css-ից Tailwind CSS: Մեկ սեղմումով դուք կարող եք ինտերնետում ցանկացած բաղադրիչ վերածել Tailwind CSS-ի և օգտագործել Tailwind-ը ձեր նախագծում և հարմարեցնել ոճը այնպես, ինչպես ցանկանում եք:

Սուզվեք Tailwind CSS փիլիսոփայության մեջ

Tailwind CSS-ի հիմքում ընկած փիլիսոփայությունն է կենտրոնանալ օգտակարության վրա: Սա նշանակում է, որ բաղադրիչների դասերը նախապես սահմանելու փոխարեն, Tailwind CSS-ը տրամադրում է ցածր մակարդակի օգտակար դասեր, որոնք թույլ են տալիս ստեղծել եզակի դիզայն՝ առանց ձեր HTML-ից դուրս գալու:

Ինչու՞ հեռանալ ավանդական CSS-ից:

Ավանդական CSS-ը կարող է առաջացնել ավելորդ կիրառում, փքված ֆայլեր և «div ապուր»: Անցնելով օգտակար առաջին CSS շրջանակին, ինչպիսին է Tailwind CSS-ը, դուք կարող եք մեղմել այս խնդիրները՝ հանգեցնելով ավելի մաքուր, ավելի պարզեցված կոդերի բազայի:

Փորձեք Կոմունալ ծառայությունների դասերի ուժը

Կոմունալ դասերը օգնում են ձեզ խուսափել նույն ոճերի կրկնությունից ձեր ոճաթերթերում: Դա «Մի կրկնիր ինքդ քեզ» (DRY) սկզբունքն է: Այս դասերը խնայում են ձեզ զգալի ժամանակ և ջանք և հանգեցնում են խիստ պահպանվող կոդերի բազայի:

Հետազոտելով Tailwind CSS հրահանգները

Tailwind CSS-ը ներկայացնում է մի քանի հրահանգներ, որոնք կարող են օգտագործվել ձեր ոճաթերթերում: Դրանք ներառում են @apply, @variants և @screen: Այս հրահանգների ըմբռնումը և օգտագործումը կարող է մեծապես բարելավել ձեր Tailwind CSS փորձը: Դրանք կարող են տեղադրվել Tailwind Config CSS ֆայլում: Դուք կարող եք գրել css դասեր՝ օգտագործելով այս մոտեցումը:

Ընդլայնել Tailwind CSS-ը պլագիններով

Tailwind CSS-ը կարող է ընդլայնվել պլագիններով՝ ավելացնելով նոր ֆունկցիոնալություն կամ հարմարեցնելով գոյություն ունեցողը: Իմացեք, թե ինչպես օգտագործել պլագինները՝ ձեր վեբ նախագծերի արդյունավետությունն ու գեղագիտությունը առավելագույնի հասցնելու համար:

Ներառեք Tailwind CSS-ը ձեր աշխատանքային հոսքի մեջ

Tailwind CSS-ի ինտեգրումը ձեր զարգացման աշխատանքային հոսքին պարզ է, անկախ նրանից՝ դուք օգտագործում եք կառուցման գործիքներ, ինչպիսիք են Webpack-ը կամ Parcel-ը, կամ աշխատում եք շրջանակների հետ, ինչպիսիք են Next.js-ը կամ Gatsby-ը:

Բարելավեք մատչելիությունը Tailwind CSS-ի միջոցով

Tailwind CSS-ը խրախուսում է մատչելի դիզայնը՝ ներառելով ARIA ատրիբուտների մի շարք իր դասերում: Ստեղծեք ավելի մատչելի ինտերֆեյսներ և ընդլայնեք օգտվողի փորձը բոլորի համար:

Օգտագործեք Flexbox-ի և Grid-ի ուժը Tailwind CSS-ի միջոցով

Օգտագործեք ժամանակակից CSS դասավորության մոդուլներ, ինչպիսիք են Flexbox-ը և Grid-ը Tailwind CSS-ով: Իմացեք, թե ինչպես կարող են օգտակար դասերը օգտագործվել դասավորությունը ճկուն և արձագանքող ձևով վերահսկելու համար:

Ինչպես կարգաբերել ձեր Tailwind CSS նախագծերը

Tailwind CSS-ը տրամադրում է վրիպազերծման մի քանի գործիքներ և տեխնիկա, որոնք հեշտացնում են ոճավորման խնդիրների նույնականացումը և լուծումը: Հասկացեք այս գործիքները և զարգացրեք վրիպազերծման ձեր հմտությունները:

Ստեղծեք գունավոր վեբ Tailwind CSS-ով

Tailwind CSS-ը գալիս է հարմարեցվող գույների լայն գունապնակով: Իմացեք, թե ինչպես օգտագործել և հարմարեցնել այս գույները վառ և տեսողականորեն գրավիչ դիզայներ ստեղծելու համար:

Ավելի արագ զարգացրեք Tailwind CSS-ի JIT ռեժիմով

Խորացեք Tailwind CSS-ի Just-In-Time ռեժիմում: Հասկացեք, թե ինչպես է այն աշխատում և ինչպես կարող է զգալիորեն արագացնել ձեր զարգացումը և կառուցել ժամանակները:

Զրոյից մինչև հերոս. Master Tailwind 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>

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-ը ձևավորում վեբ դիզայնի ապագան: Իմացեք դրա ազդեցության և աճի ներուժի մասին վեբ զարգացման ոլորտում: