Tailwind CSS: Usa ka Utility-First CSS Framework ug API alang sa Dali, Responsive Design

Pag-tailail sa CSS Framework

Samtang naa ako sa teknikal nga pang-adlaw-adlaw, wala ako daghang oras sama sa gusto nako nga ipaambit ang mga komplikado nga pagsagol ug pag-automate nga gipatuman sa akong kompanya alang sa mga kostumer. Ingon usab, wala ako daghang oras sa pagdiskobre. Kadaghanan sa teknolohiya nga gisulat nako bahin sa mga kompanya nga nagpangita Martech Zone nga naglangkob sa kanila, apan matag kausa - labi na pinaagi sa Twitter - Nakita nako ang pila ka buzz sa palibot sa usa ka bag-ong teknolohiya nga kinahanglan nako nga ipaambit.

Kung nagtrabaho ka sa laraw sa web, pagpalambo sa mobile app, o bisan pag-set up lang sa usa ka sistema sa pagdumala sa sulud, tingali nakigbugno ka sa mga kasagmuyo sa mga indigay sa mga estilo sa daghang mga styleheet. Bisan sa mga katingad-an nga mga gamit sa pag-uswag nga gitukod sa sulud sa matag browser, ang pagsubay ug paglimpiyo sa CSS mahimong manginahanglan labi ka daghan nga oras ug kusog.

CSS Frameworks

Sa bag-ohay nga katuigan, ang mga tigdesinyo nakahimo usa ka katingalahang trabaho sa pagpagawas sa mga koleksyon sa mga estilo nga giandam ug andam nga gamiton. Kini nga mga CSS Stylesheet labi ka nailhan nga CSS Frameworks, nga gisulayan nga madawat ang tanan nga lainlaing mga istilo ug mga responsibo nga katakus aron ang mga developer makapangutana ra sa usa ka balangkas kaysa paghimo sa usa ka CSS file gikan sa nagaras. Ang pipila nga mga bantog nga laraw mao ang:

  • Bootstrap - usa ka balangkas nga nagbag-o sa usa ka dekada, una nga gipaila sa Twitter. Nagtanyag kini dili maihap nga mga dagway. Adunay kini mga downside, nga nanginahanglan SASS, lisud nga mapasobrahan, nagsalig sa JQquery, ug labi ka daghan ang pagkarga.
  • sa pagpangita - usa ka limpyo nga gambalay nga mahigalaon sa developer ug wala’y pagsalig sa JavaScript.
  • Foundation - usa ka labi ka generic ug magamit CSS framework nga adunay tonelada nga mga sangkap nga dali mapasadya. Dugang pa, adunay Pundasyon alang sa Email ug UI sa Motion alang sa mga animasyon.
  • UI Kit - usa ka kombinasyon sa HTML, JavaScript, ug CSS aron makuha ang imong front-end nga dali ug dali nga pag-uswag.

Pag-tailail sa CSS Framework

Samtang ang ubang mga balangkas naghimo usa ka maayong trabaho sa pag-akomodar sa mga popular nga elemento sa interface sa gumagamit, ang Tailwind naggamit usa ka pamaagi nga nahibal-an nga Atomiko CSS. Sa laktod nga pagkasulti, maabtik nga giorganisar sa Tailwind ang mga ngalan sa klase gamit ang natural nga sinultian aron mahimo ang ilang giingon nga ilang gibuhat. Mao nga, samtang ang Tailwind wala’y librarya nga mga sangkap, ang abilidad nga dali makahimo usa ka kusgan, dali nga pagsanong interface pinaagi ra sa pagkutlo sa mga ngalan sa klase sa CSS nga elegante, dali ug dili matanding.

Ania ang pipila nga maayo kaayo nga mga pananglitan:

Mga Grid sa CSS

css haligi magsugod grids haligi

Mga Gradient sa CSS

css gradients

CSS alang sa Suporta sa Dark Mode

css ngitngit nga mode

Ang tailail usab adunay maayo magamit ang extension alang sa VS Code aron dali nimo mailhan ug isulud ang mga klase gikan sa code editor sa Microsoft.

Labi pa ka utokan, awtomatikong gitangtang sa Tailwind ang tanan nga wala magamit nga CSS kung nagtukod alang sa paghimo, nga nagpasabut nga ang imong katapusang CSS bundle mao ang labing gamay nga mahimo’g mahimo. Sa tinuud, ang kadaghanan sa mga proyekto sa Tailwind nagpadala labi pa sa 10kB nga CSS sa kliyente.

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.