Tailwind CSS: Тез, Жооптуу Дизайн үчүн Утилит-Биринчи CSS Framework жана API

Tailwind CSS Framework

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

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

CSS Frameworks

Акыркы жылдары дизайнерлер даярдалган жана колдонууга даяр болгон стилдердин коллекцияларын чыгаруу боюнча укмуштуудай иштерди жасашты. Бул CSS стилдер жадыбалы CSS Frameworks катары белгилүү, ар кандай стилдерге жана жооп берүүчү жөндөмдөрдүн бардыгын жайгаштырууга аракет кылып, иштеп чыгуучулар CSS файлын нөлдөн баштап куруунун ордуна, алкакка шилтеме бере алышат. Кээ бир популярдуу алкактар:

  • жүктөгүч - он жылдан ашуун убакыттан бери өнүгүп келе жаткан алкак, биринчи жолу Twitter тарабынан киргизилген. Бул сансыз өзгөчөлүктөрдү сунуш кылат. Анын терс жактары бар, SASSти талап кылат, ашыкча иштетүү кыйын, JQqueryден көз каранды жана жүктөө өтө оор.
  • Табуу -иштеп чыгуучуга ылайыктуу жана JavaScriptтен эч кандай көз карандысыз таза алкак.
  • Foundation - оңой ыңгайлаштырылган көптөгөн компоненттери бар кыйла жалпы жана колдонууга жарактуу CSS алкагы. Кошумча, бар Электрондук почта үчүн фонд жана Motion UI анимациялар үчүн.
  • UIKit -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 долбоорлору кардарга CSSтин 10кБдан азын жөнөтөт.

Эмне деп ойлойсуң?

Бул сайт спам азайтуу Akismet колдонот. Сиздин комментарий маалымат кандайча иштелишин Үйрөнүү.