Tailwind CSS: Утилитаның бірінші CSS негізі және жылдам, жауап беретін дизайн үшін API

Tailwind CSS Framework

Мен күнделікті технологиямен шұғылданатын болсам да, менің компаниямның тұтынушылар үшін енгізетін күрделі интеграциясы мен автоматизациясымен бөліскім келмейді. Сонымен қатар, менің ашуға көп уақытым жоқ. Мен жазатын технологиялардың көпшілігі - ізденетін компаниялар Martech Zone оларды қамтиды, бірақ анда -санда - әсіресе Twitter арқылы - мен бөлісуім керек жаңа технологияның айналасында шуылдарды көремін.

Егер сіз веб -дизайнмен, мобильді қосымшаларды әзірлеумен немесе мазмұнды басқарудың жаңа жүйесімен жұмыс жасасаңыз, сіз бірнеше стиль кестесіндегі бәсекелес стильдердің наразылығымен күрескен шығарсыз. Әрбір браузерде орнатылған таңғажайып даму құралдарының өзінде CSS -ті іздеу және тазалау тым көп уақыт пен энергияны қажет етуі мүмкін.

CSS негіздері

Соңғы жылдары дизайнерлер дайын және пайдалануға дайын стильдер жинағын шығару бойынша керемет жұмыс жасады. Бұл CSS мәнер кестелері CSS Frameworks деп аталады, олар әр түрлі стильдер мен жауап беру мүмкіндіктерін орналастыруға тырысады, осылайша әзірлеушілер CSS файлын нөлден құрудың орнына жақтауға сілтеме жасай алады. Кейбір танымал құрылымдар:

  • жүктеу - алғаш рет Twitter -де енгізілген он жыл ішінде дамыған құрылым. Ол сансыз мүмкіндіктерді ұсынады. Оның кемшіліктері бар, SASS талап етеді, оны қайта өңдеу қиын, JQquery -ге тәуелді және жүктеу өте ауыр.
  • табылған -әзірлеушілерге ыңғайлы және JavaScript-ке тәуелділігі жоқ таза негіз.
  • іргетас - оңай реттелетін көптеген компоненттері бар қарапайым және қолдануға болатын CSS құрылымы. Сонымен қатар, бар Электрондық поштаға арналған қор және Motion UI анимация үшін.
  • UI жиынтығы HTML-дің, JavaScript-тің және CSS-тің комбинациясы сіздің фронтальды тез және оңай дамытуға мүмкіндік береді.

Tailwind CSS Framework

Басқа жақтаулар танымал пайдаланушы интерфейсінің элементтерін орналастыруда үлкен жұмыс атқарса да, Tailwind белгілі методологияны қолданады Атомдық CSS. Қысқаша айтқанда, Tailwind сынып атауларын табиғи тілді қолдана отырып, олар айтқандарын орындау үшін ұйымдастырды. Сонымен, Tailwind компоненттерінің кітапханасы болмаса да, CSS сынып атауларына сілтеме жасай отырып, қуатты, жауап беретін интерфейсті оңай құру мүмкіндігі талғампаз, жылдам және теңдесі жоқ.

Міне, кейбір керемет мысалдар:

CSS торлары

css бағанының торлар бағандарының басталуы

CSS градиенттері

css градиенттері

Қараңғы режимге арналған CSS

css қараңғы режимі

Tailwind -те фантастика бар кеңейтім қол жетімді Microsoft код редакторынан сыныптарды оңай анықтауға және кірістіруге мүмкіндік беретін VS Code үшін.

Одан да тапқыр, Tailwind өндіріске арналған барлық пайдаланылмаған CSS -ті автоматты түрде жояды, бұл сіздің соңғы CSS -дің болуы мүмкін ең кіші. Шын мәнінде, Tailwind жобаларының көпшілігі клиентке 10кБ -тан аз CSS жібереді.

Сен не ойлайсың?

Бұл сайт спамның төмендеуі үшін Akismet пайдаланады. Деректеріңіздің қалай өңделетінін біліңіз.