Kas ir Tailwind CSS? Vienkārša rokasgrāmata lietotņu veidotājiem

Tailwind CSS ir rīkkopa tīmekļa vietņu noformēšanai. Tā vietā, lai rakstītu atsevišķus stilu noteikumus savā failā, katram elementam dodat īsus, gatavus klašu nosaukumus — bg-white balts fons, p-4 iekšējā atstarpe, text-lg lielāks teksts, rounded-xl noapaļoti stūri — un Tailwind izveido CSS, kas nepieciešams pārlūkprogrammai. Tas ir bezmaksas, atvērtā koda rīks un viens no biežākajiem veidiem, kā mūsdienu tīmekļa lietotnes tiek noformētas.

Kāpēc Tailwind ir svarīgs, veidojot ar AI

Ja veidojat tīmekļa lietotni ar AI lietotņu veidotāju, ir liela iespēja, ka jūsu lietotne ir noformēta ar Tailwind. Piemēram, Mythex jaunus projektus sāk ar Vite + React + TypeScript + Tailwind, ja vien neprasāt ko citu (kā tiek izvēlēts tehnoloģiju steks).

Tas jums ir svarīgs trijos veidos:

• Dizaina izmaiņas ir lētas. Tā kā stils atrodas tieši blakus katrai pogai, kartītei un virsrakstam, AI var izpildīt „padari kartītes mazāk pārslogotas”, mainot dažas klases vienā vietā.
• Jūs to varat izlasīt. Tailwind klases ir tuvu vienkāršai angļu valodai. text-center font-bold text-2xl nav grūti atšifrēt, pat ja nekad neesat rakstījis kodu.
• Izskats paliek konsekvents. Tailwind nāk ar fiksētu izmēru, atstarpju un krāsu skalu. Tas neļauj lietotnei nonākt pie 14 nedaudz atšķirīgiem pelēkiem toņiem.

Ikdienas salīdzinājums

Padomājiet par krāsošanu un mājas būvēšanu.

Parastais CSS ir kā katras sienas krāsas maisīšana pašam. Jums ir pilna brīvība, bet pēc laika dzīvojamā istaba ir „silti balta”, gaitenis ir „mazliet siltāk balta”, un neviens vairs neatceras, kāpēc.

Tailwind ir kā krāsu paraugu katalogs ar iezīmētām uzlīmēm. Katrai sienai ir uzlīme — „balta, matēta, 2 kārtas” — un katalogs piedāvā tikai atlasītu toņu kopu. Jūs zaudējat nedaudz brīvības, bet ikviens darbā zina, kādai jābūt katrai sienai, tikai izlasot uzlīmi.

Kā darbojas Tailwind

Tīmekļa lapa tiek veidota no HTML (saturs un struktūra) un CSS (izskats). Parasti CSS atrodas atsevišķā failā ar šādiem noteikumiem:

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

Ar Tailwind šo noteikumu nerakstāt, bet utilītklases ievietojat tieši elementā:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Jūsu rezervācija ir apstiprināta
</div>

Katra klase veic vienu nelielu darbu. Kad lietotne tiek izveidota, Tailwind skenē jūsu failus, atrod klases, ko patiesi izmantojāt, un ģenerē CSS tikai tām. Tas notur gala stilu lapu nelielu.

Tailwind 4. versija, pašreizējā galvenā versija, tiek iestatīta ar ļoti nelielu konfigurāciju: jūs to instalējat, pievienojat tā spraudni savam būvēšanas rīkam un ievietojat @import "tailwindcss"; CSS faila augšā. Pielāgojumi, piemēram, zīmola krāsas un fonti, tiek definēti CSS kā dizaina marķieri, nevis lielā JavaScript konfigurācijas failā, kā to prasīja vecākas versijas. Ja lasāt vecāku pamācību, kurā pieminēts tailwind.config.js, tāpēc tā ir.

Darba piemērs: cenu kartīte

Pieņemsim, ka esat lūdzis savam AI veidotājam cenu lapu un vēlaties, lai kartīte „Pro” izceltos. Kartītes kods varētu izskatīties šādi (React komponentā class tiek rakstīts kā 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">
    Sākt izmēģinājumu
  </button>
</div>

Lasot no kreisās uz labo:

Ja lūdzat „padari Pro kartīti izceltu ar zilu apmali un smalku ēnu”, AI var mainīt border-gray-200 uz border-2 border-blue-600 un pievienot shadow-lg. Tā ir visa izmaiņa.

Adaptīvs dizains un tumšais režīms

Tailwind ir īsi priedēkļi ekrāna izmēriem un stāvokļiem:

• md:grid-cols-3 — trīs kolonnas vidējos ekrānos un lielākos; tālrunī spēkā ir noklusējuma viena kolonna. Tailwind ir mobile-first: klases bez priedēkļa attiecas uz visiem ekrāniem, bet priedēkļi pievieno izmaiņas lielākiem ekrāniem.
• hover:bg-gray-700 — tumšāka poga, kad pele atrodas virs tās.
• dark:bg-gray-900 — cits fons, kad ir ieslēgts tumšais režīms.

Tāpēc prasīt layoutu, kas pielāgojas mobilajiem vai tumšo režīmu parasti Tailwind projektā ir ātri.

Galvenie termini

Biežākie nepareizi priekšstati

• „Tailwind ir dizains.” Nav. Tailwind dod celtniecības blokus, nevis izskatu. Divas Tailwind vietnes var izskatīties pilnīgi atšķirīgi. Vispārīgais „AI lietotnes izskats” rodas no noklusējumiem, nevis no pašas Tailwind — dodiet savam veidotājam īstu virzienu. Skatiet kā ar AI izveidot labi izskatīgu lietotni.
• „Tas ir tas pats, kas iekšējie stili.” Ne gluži. Klases nāk no kopīgas skalas, atbalsta hover, tumšo režīmu un ekrāna platuma punktus un build laikā tiek pārvērstas parastā CSS.
• „Tailwind padara lapas smagākas.” Būvēšanā tiek iekļautas tikai jūsu izmantotās klases, tāpēc apmeklētājiem nosūtītais CSS parasti ir mazs.
• „Gars klašu saraksts nozīmē nekārtīgu kodu.” Sākumā tie izskatās pārslogoti, bet viss par elementa izskatu atrodas vienā vietā. Atkārtoti modeļi parasti tiek apvienoti komponentos, piemēram, vienā Button.
• „Ja izmantoju Tailwind, nevaru izmantot pielāgotu CSS.” Jūs joprojām varat rakstīt parastu CSS, kad to vajag.

Ko prasīt no sava AI veidotāja

• „Definējiet mūsu zīmola krāsas un fontus vienreiz kā tēmas marķierus un izmantojiet tos visur, nevis cietkodētas krāsas.”
• „Lai katrai kartītei, pogai un ievadei būtu tāds pats stūru rādiuss un atstarpes.”
• „Pārbaudiet izkārtojumu tālruņa platumā un izlabojiet visu, kas pārsniedz robežas vai ir par mazu, lai uzspiestu.”
• „Pievienojiet tumšo režīmu, izmantojot Tailwind dark: variantu, un pārliecinieties, ka teksta kontrasts paliek lasāms.”
• „Apvienojiet atkārtotos pogu stilus vienā atkārtoti lietojamā Button komponentā.”
• „Izskaidrojiet šīs sadaļas Tailwind klases vienkāršā valodā.”

Tailwind Mythex

Jaunie Mythex projekti pēc noklusējuma izmanto Tailwind kopā ar React un TypeScript, tāpēc vizuālās izmaiņas varat prasīt vienkāršos vārdos un redzēt tās tiešraides priekšskatījumā. Ja labāk vēlaties redzēt kodu, koda redaktors rāda katru klasi (Free plānā tikai lasāms, Pro plānā rediģējams). Ja dodat priekšroku parastam CSS vai citai iestatījumu kopai, pasakiet to savā pirmajā uzvednē — dokumentācijā ir paskaidrots, kā tiek izvēlēts steks.

Jautājumi