Tailwind CSS: Хэрэглээний анхны CSS-ийн хүрээ ба хурдан, хариу өгөх дизайны API

Tailwind CSS Framework

Би өдөр бүр технологийн чиглэлээр гүн гүнзгий судалж байгаа хэдий ч миний компаний үйлчлүүлэгчдэд зориулан хэрэгжүүлж буй цогц интеграцчилал, автоматжуулалтыг хуваалцах цаг надад тийм их байдаггүй. Надад нээлт хийх цаг тийм ч их байдаггүй. Миний бичсэн ихэнх технологи бол эрэл хайгуул хийдэг компаниуд юм Martech Zone тэдгээрийг хамардаг, гэхдээ хааяа нэг удаа, ялангуяа твиттерээр дамжуулан би хуваалцах хэрэгтэй шинэ технологийн эргэн тойронд зарим чимээг олж хардаг.

Хэрэв та вэб дизайн, мобайл апп хөгжүүлэх, эсвэл бүр контентийн менежментийн системийг ажиллуулж байгаа бол олон загварын хуудсан дээр өрсөлдөж буй хэв маягийн бухимдалтай тэмцэж байсан байх. Хөтөч болгонд бүтээгдсэн гайхалтай хөгжүүлэлтийн хэрэгслүүд байсан ч CSS -ийг хайх, цэвэрлэхэд хэт их цаг хугацаа, энерги шаардагдах болно.

CSS-ийн хүрээ

Сүүлийн жилүүдэд дизайнерууд бэлэн болсон, ашиглахад бэлэн болсон хэв маягийн цуглуулга гаргахдаа үнэхээр гайхалтай ажил хийжээ. Эдгээр CSS загварын хүснэгтийг CSS Frameworks гэж нэрлэдэг бөгөөд өөр өөр хэв маяг, хариу үйлдэл үзүүлэх чадварыг багтаахыг хичээдэг бөгөөд ингэснээр хөгжүүлэгчид CSS файлыг эхнээс нь үүсгэхээс илүүтэйгээр хүрээ рүү хандах боломжтой болно. Зарим алдартай хүрээ нь:

  • эхлүүлэгч - Твиттерээс анх танилцуулсан арав гаруй жилийн хугацаанд хөгжсөн хүрээ. Энэ нь тоо томшгүй олон боломжуудыг санал болгодог. Энэ нь сул талуудтай бөгөөд SASS шаарддаг, хэт даван туулахад хэцүү, JQquery -ээс хамаардаг бөгөөд ачаалахад нэлээд хүнд байдаг.
  • олох -хөгжүүлэгчдэд ээлтэй, JavaScript-ээс хамааралгүй цэвэр бүтэц.
  • сан - хялбарчлах боломжтой олон тооны бүрэлдэхүүн хэсгүүдтэй илүү ерөнхий бөгөөд ашиглах боломжтой CSS хүрээ. Нэмж хэлэхэд, байдаг Имэйлийн үндэс суурь болон Хөдөлгөөний UI анимацийн хувьд.
  • UI хэрэгсэл -HTML, JavaScript, CSS-ийн хослол нь таны урд хэсгийг хурдан бөгөөд хялбар хөгжүүлэх боломжийг олгодог.

Tailwind CSS Framework

Бусад хүрээ нь хэрэглэгчийн интерфэйсийн түгээмэл элементүүдийг байрлуулах маш сайн ажил хийдэг бол Tailwind нь гэгддэг аргачлалыг ашигладаг Атомын CSS. Товчхондоо, Tailwind ангийнхаа нэрийг өөрсдийн хэлснээр хийснээр нь байгалийн хэлээр зохион байгуулжээ. Тиймээс, Tailwind нь бүрэлдэхүүн хэсгүүдийн номын сангүй боловч CSS ангийн нэрийг дурдсанаар хүчирхэг, хариу үйлдэл үзүүлэх интерфэйсийг хялбархан бүтээх чадвар нь дэгжин, хурдан бөгөөд харьцуулашгүй юм.

Энд үнэхээр гайхалтай хэдэн жишээ байна:

CSS сүлжээ

css багана эхлүүлэх сүлжээ багана

CSS градиент

css градиент

Харанхуй горимыг дэмжих CSS

css харанхуй горим

Tailwind бас гайхалтай өргөтгөл ашиглах боломжтой VS Code -ийн хувьд та Microsoft -ийн код засварлагчаас ангиудыг хялбархан таньж, оруулах боломжтой болно.

Илүү овсгоотой Tailwind нь үйлдвэрлэх явцад ашиглагдаагүй бүх CSS -ийг автоматаар устгадаг бөгөөд энэ нь таны CSS -ийн эцсийн багц нь байж болох хамгийн бага хэмжээтэй гэсэн үг юм. Үнэн хэрэгтээ ихэнх Tailwind төслүүд үйлчлүүлэгчиддээ 10кБ -аас бага хэмжээтэй CSS илгээдэг.

Чи юу гэж бодож байна?

Энэ сайт нь спамыг багасгахын тулд Akismet-ийг ашигладаг. Таны өгөгдлийг хэрхэн боловсруулдаг талаар суралц.