„Tailwind CSS“: „Utility-First CSS Framework“ ir API greitam, reaguojančiam dizainui

„Tailwind“ CSS sistema

Nors kasdien gilinuosi į technologijas, neturiu tiek laiko, kiek norėčiau pasidalyti sudėtingomis integracijomis ir automatizavimu, kurį mano įmonė taiko klientams. Be to, aš neturiu daug laiko atradimams. Dauguma technologijų, apie kurias rašau, yra įmonės, kurios ieško Martech Zone dengdamas juos, bet retkarčiais - ypač per „Twitter“ - matau šurmulio apie naują technologiją, kuria turiu pasidalyti.

If you work in web design, mobile app development, or even just set up a content management system, you’ve probably wrestled with the frustrations of competing styles across multiple stylesheets. Even with the amazing development tools built within each browser, tracking down and cleaning up CSS can require far too much time and energy.

CSS rėmai

Pastaraisiais metais dizaineriai padarė gana nuostabų darbą išleisdami paruoštų ir paruoštų naudoti stilių kolekcijas. Šios CSS stiliaus lentelės yra geriau žinomos kaip CSS rėmai, bandant pritaikyti visus skirtingus stilius ir reagavimo galimybes, kad kūrėjai galėtų tiesiog nurodyti sistemą, o ne kurti CSS failą nuo nulio. Kai kurios populiarios sistemos yra:

  • Bootstrap – a framework that’s evolved over a decade, first introduced by Twitter. It offers countless features. It does have downsides, requiring SASS, difficult to overwreied, dependent on JQquery, and it’s pretty hefty to load.
  • rasti – a clean framework that’s developer-friendly and has no dependency on JavaScript.
  • Pagrindas – a more generic and usable CSS framework that has tons of components that are easily customizable. Additionally, there’s El. Pašto fondas ir Judesio vartotojo sąsaja animacijoms.
  • Vartotojo sąsaja -HTML, „JavaScript“ ir CSS derinys, kad jūsų sąsaja būtų sukurta greitai ir lengvai.

„Tailwind“ CSS sistema

Nors kitos sistemos puikiai atlieka populiarius vartotojo sąsajos elementus, „Tailwind“ naudoja metodiką, žinomą kaip Atominis CSS. In short, Tailwind ingeniously organized the class names using natural language to do what they say they do. So, while Tailwind doesn’t have a library of components, the ability to easily build a powerful, responsive interface just by referencing CSS class names is elegant, fast, and incomparable.

Štai keletas tikrai puikių pavyzdžių:

CSS tinkleliai

css stulpelio pradžios tinklelių stulpeliai

CSS gradientai

css gradientai

CSS tamsaus režimo palaikymui

css tamsus režimas

„Tailwind“ taip pat turi fantastišką galimas plėtinys for VS Code so that you can easily identify and insert classes from Microsoft’s code editor.

Dar išradingesnis „Tailwind“ automatiškai pašalina visas nepanaudotas CSS, kurdamas gamybai, o tai reiškia, kad galutinis CSS paketas yra mažiausias, koks tik gali būti. Tiesą sakant, dauguma „Tailwind“ projektų klientui siunčia mažiau nei 10 KB CSS.

Ką manote?

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.