Co to jest TailwindCSS?

Co to jest TailwindCSS?

Jest to framework CSS, w kt贸rym stawiamy przede wszystkim na u偶yteczno艣膰. Sk艂ada si臋 on z ma艂ych, niezmiennych i wyra藕nie sugeruj膮cych w艂a艣ciwo艣ci klas. Nie posiadamy gotowych komponent贸w, tylko je tworzymy.

Przyk艂ad

Gdyby艣my chcieli doda膰 komponent bez u偶ycia tailwindcss, standardowo zdefiniujemy klasie i przypiszemy do niej warto艣ci.

<div class="notification">
  <p class="notification-message">You have a new message!</p>
</div>

<style>
  .notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Natomiast je艣li u偶yjemy tailwindcss zamiast zdefiniowanych klas, u偶yjemy klas dla konkretnych w艂a艣ciwo艣ci.

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl"></div>

Co nam to daje?

  • Mo偶emy w pe艂ni customizowa膰 nasz膮 stron臋. Nie jeste艣my uzale偶nieni od konkretnych komponent贸w
  • Tworz膮c strony nie b臋d膮 one do siebie podobne w por贸wnaniu do klasycznych framework贸w
  • Nie nadpisujemy styl贸w dla zdefiniowanych klas
  • Nie musimy wymy艣la膰 nazwy klasy
  • Nie powtarzamy warto艣ci dla nowych klas
  • Komponenty s膮 przewidywalne, jasno widzimy jak co艣 wygl膮da
  • Pliki styl贸w nie powi臋kszaj膮 rozmiaru
  • Nie martwimy si臋, 偶e zepsujemy re u偶ywalne klasy

Jakie s膮 wady?

Pomimo zachowana czysto艣ci, w obiektach DOM pojawiaj膮 si臋 du偶o klas CSS. Mo偶e to na pocz膮tku bardzo przeszkadza膰. Z drugie strony komponent jest bardziej przewidywalny. Spojrzenie na widok HTML sugeruje, jak b臋dzie wygl膮da膰 komponent.

Podsumowanie

TailwindCSS jest nowoczesnym podej艣ciem dla frameworkow CSS. Wida膰 tutaj wi臋cej walet ni偶 maj膮 klasycznie frameworki. Komponenty tworzy si臋 szybciej. A jak tam wasze do艣wiadczenia z TailwidCSS? Korzystali艣cie? Dajcie zna膰 w komentarzu.

Copyright 漏 2021 DevLuk