Ի՞նչ է Tailwind CSS-ը. պարզ ուղեցույց հավելվածների կառուցողների համար

Tailwind CSS-ը վեբ կայքերի ոճավորման գործիքակազմ է։ Առանձին ոճային կանոններ առանձին ֆայլում գրելու փոխարեն դուք յուրաքանչյուր տարրին տալիս եք կարճ, պատրաստի դասի անուններ՝ bg-white սպիտակ ֆոնի համար, p-4 ներքին տարածության համար, text-lg ավելի մեծ տեքստի համար, rounded-xl կլորացված անկյունների համար, և Tailwind-ը գեներացնում է բրաուզերին անհրաժեշտ CSS-ը։ Այն անվճար է, բաց կոդով և ժամանակակից վեբ հավելվածների ոճավորման ամենատարածված եղանակներից մեկն է։

Ինչու է Tailwind-ը կարևոր AI-ով կառուցելիս

Եթե վեբ հավելված եք կառուցում AI հավելվածի կառուցողով, շատ հավանական է, որ ձեր հավելվածը ոճավորված է Tailwind-ով։ Օրինակ՝ Mythex-ը նոր նախագծերը սկսում է Vite + React + TypeScript + Tailwind կառուցվածքով, եթե այլ բան չխնդրեք (ինչպես է ընտրվում տեխնոլոգիան)։

Դա ձեզ համար կարևոր է երեք առումով։

• Դիզայնի փոփոխությունները էժան են։ Քանի որ ոճավորումը գտնվում է յուրաքանչյուր կոճակի, քարտի և վերնագրի կողքին, AI-ն կարող է «դարձրու քարտերն ավելի քիչ խիտ» հրահանգը կատարել՝ մեկ տեղում մի քանի դաս խմբագրելով։
• Կարելի է կարդալ։ Tailwind-ի դասերը մոտ են սովորական անգլերենին։ text-center font-bold text-2xl-ը դժվար չէ վերծանել, նույնիսկ եթե երբեք կոդ չեք գրել։
• Տեսքը մնում է համահունչ։ Tailwind-ը գալիս է չափերի, տարածությունների և գույների ֆիքսված սանդղակով։ Դա պահում է հավելվածը այնպիսի վիճակից, երբ լինում են 14 մի քիչ տարբեր մոխրագույններ։

Առօրյա անալոգիա

Պատկերացրեք ներկը և տան կառուցումը։

Սովորական CSS-ը նման է յուրաքանչյուր պատի համար սեփական ներկ խառնելուն։ Լրիվ ազատություն ունեք, բայց որոշ ժամանակ անց հյուրասենյակը «տաք սպիտակ» է, միջանցքը՝ «մի քիչ ավելի տաք սպիտակ», և ոչ ոք չի հիշում, թե ինչու։

Tailwind-ը նման է ներկի խանութի գունային աղյուսակին և պիտակավորված կպչուկների հավաքածուին։ Յուրաքանչյուր պատ ստանում է կպչուկ՝ «սպիտակ, մատովի, 2 շերտ», և աղյուսակը առաջարկում է միայն ընտրված երանգներ։ Մի քիչ ազատություն եք կորցնում, բայց աշխատանքի բոլոր մասնակիցները կարդալով կպչուկը ճշգրիտ գիտեն, թե յուրաքանչյուր պատ ինչպիսին պետք է լինի։

Ինչպես է աշխատում Tailwind-ը

Վեբ էջը կառուցված է HTML-ից (բովանդակություն և կառուցվածք) և CSS-ից (տեսք)։ Սովորաբար CSS-ը գտնվում է առանձին ֆայլում այսպիսի կանոններով։

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind-ով այդ կանոնը գրելու փոխարեն դասերը դնում եք ուղղակի տարրի վրա։

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

Յուրաքանչյուր դաս կատարում է մի փոքր աշխատանք։ Երբ հավելվածը կառուցվում է, Tailwind-ը սկանավորում է ձեր ֆայլերը, գտնում այն դասերը, որոնք իրականում օգտագործել եք, և գեներացնում է միայն դրանց CSS-ը։ Դա պահում է վերջնական ոճային թերթը փոքր։

Tailwind տարբերակ 4-ը, որը ընթացիկ հիմնական տարբերակն է, կարգավորվում է շատ քիչ կոնֆիգուրացիայով։ տեղադրում եք այն, ավելացնում եք նրա plugin-ը ձեր build գործիքում և ձեր CSS ֆայլի սկզբում գրում @import "tailwindcss";։ Անհատականացումները, ինչպիսիք են ֆիրմային գույները և տառատեսակները, սահմանվում են CSS-ում որպես դիզայնի թոքեններ, այլ ոչ թե մեծ JavaScript կոնֆիգուրացիայի ֆայլում, ինչպես պահանջում էին հին տարբերակները։ Եթե կարդում եք հին ուղեցույց, որտեղ հիշատակվում է tailwind.config.js-ը, հենց դրա պատճառով է։

Աշխատած օրինակ։ գնային քարտ

Նշենք, որ AI կառուցողից գնային էջ եք խնդրել և ուզում եք, որ «Pro» քարտը առանձնանա։ Քարտի կոդը կարող է այսպիսին լինել (React կոմպոնենտում class-ը գրվում է className)։

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

Կարդալով ձախից աջ։

Եթե խնդրեք «դարձրու Pro քարտը առանձնացող՝ կապույտ եզրագծով և նուրբ ստվերով», AI-ն կարող է border-gray-200-ը փոխել border-2 border-blue-600-ի և ավելացնել shadow-lg։ Ամբողջ փոփոխությունն այսքանն է։

Արձագանքող դիզայն և մուգ ռեժիմ

Tailwind-ն ունի կարճ նախածանցներ էկրանի չափերի և վիճակների համար։

• md:grid-cols-3՝ երեք սյունակ միջին և ավելի մեծ էկրաններին։ հեռախոսի վրա կիրառվում է լռելյայն մեկ սյունակը։ Tailwind-ը mobile-first է։ առանց նախածանցի դասերը կիրառվում են բոլոր տեղերում, իսկ նախածանցները ավելացնում են փոփոխություններ մեծ էկրանների համար։
• hover:bg-gray-700՝ ավելի մուգ կոճակ, երբ մկնիկը վրան է։
• dark:bg-gray-900՝ այլ ֆոն, երբ մուգ ռեժիմը միացված է։

Այդ պատճառով բջջային-արձագանքող դասավորություն կամ մուգ ռեժիմ խնդրելը սովորաբար արագ է Tailwind նախագծում։

Հիմնական տերմիններ

Ընդհանուր թյուրըմբռնումներ

• «Tailwind-ը դիզայն է»։ Չէ։ Tailwind-ը տալիս է կառուցողական բլոկներ, ոչ թե տեսք։ Երկու Tailwind կայք լրիվ տարբեր տեսք կարող է ունենալ։ AI-ի «ընդհանուր հավելվածի տեսքը» գալիս է լռելյայն կարգավորումներից, ոչ թե հենց Tailwind-ից։ տվեք ձեր կառուցողին իրական ուղղորդում։ Տե՛ս ինչպես դիզայնավորել գեղեցիկ հավելված AI-ով։
• «Նույնն է, ինչ inline ոճերը»։ Ոչ բոլորովին։ Դասերը գալիս են ընդհանուր սանդղակից, աջակցում են hover-ին, մուգ ռեժիմին և էկրանի չափերին, և build-ի ժամանակ վերածվում են սովորական CSS-ի։
• «Tailwind-ը ծանրացնում է էջերը»։ Build-ը ներառում է միայն այն դասերը, որոնք օգտագործում եք, ուստի այցելուներին ուղարկվող CSS-ը սովորաբար փոքր է։
• «Երկար դասերի ցանկերը անկարգ կոդ են նշանակում»։ Սկզբում դրանք ծանրաբեռնված են թվում, բայց տարրի ամբողջ տեսքը գտնվում է մեկ տեղում։ Կրկնվող նախշերը սովորաբար տեղափոխվում են կոմպոնենտների մեջ, օրինակ՝ մեկ Button կոմպոնենտի։
• «Եթե օգտագործում եմ Tailwind, չեմ կարող օգտագործել custom CSS»։ Դեռ կարող եք սովորական CSS գրել, երբ պետք է։

Ինչ խնդրել ձեր AI կառուցողից

• «Սահմանիր մեր ֆիրմային գույները և տառատեսակները մեկ անգամ որպես theme թոքեններ և օգտագործիր դրանք ամենուր՝ կոդում գրված գույների փոխարեն»։
• «Ստիպիր յուրաքանչյուր քարտ, կոճակ և մուտքագրման դաշտ օգտագործել նույն անկյունների կլորացումը և տարածությունը»։
• «Ստուգիր դասավորությունը հեռախոսի լայնության վրա և շտկիր ցանկացած բան, որը դուրս է գալիս կամ շատ փոքր է հպելու համար»։
• «Ավելացրու մուգ ռեժիմ՝ օգտագործելով Tailwind-ի dark: տարբերակը և համոզվիր, որ տեքստի կոնտրաստը մնում է ընթեռնելի»։
• «Կրկնվող կոճակների ոճերը տեղափոխիր մեկ վերօգտագործելի Button կոմպոնենտի մեջ»։
• «Բացատրիր այս բաժնի Tailwind դասերը սովորական բառերով»։

Tailwind Mythex-ում

Mythex-ի նոր նախագծերն ըստ լռելյայնի օգտագործում են Tailwind՝ React-ի և TypeScript-ի հետ միասին, ուստի կարող եք դիզայնի փոփոխություններ խնդրել սովորական բառերով և տեսնել դրանք կենդանի Preview-ում։ Եթե նախընտրում եք տեսնել կոդը, կոդի խմբագիրը ցույց է տալիս յուրաքանչյուր դաս (Free-ում միայն կարդալու համար, Pro-ում՝ խմբագրելի)։ Եթե նախընտրում եք սովորական CSS կամ այլ կարգավորում, ասեք դա առաջին հուշման մեջ։ docs-ը բացատրում է, թե ինչպես է ընտրվում կույտը։

Հարցեր