Dlaczego powinieneś mieć go w swoim projekcie?

TailwindCSS

Moja przygoda ze stylowaniem 👨‍🎨

CSS

BEM

B E M

B E M

Frameworki

text.css

text.jsx

+

VANILLA JS

B E M

Każdy projekt to inna historia jeżeli chodzi o stylowanie

Css puchł i puchł…

Duplikacje

🥩

Tobiasz Ciesielski

Front-end developer

3 lata doświadczenia

NgPoland - moje największe osiągnięcie do tej pory

Triathlon, pieczenie 🍞

*

*

*

*

@tobiasz_ciesielski�tobiaszciesielski.github.io

O Firmie

Tworzymy oprogramowanie dla specjalistów PR: Media Database, Online Newsroom, PR CRM, Email Outreach & Analytics, Media Monitoring, PR Reports

Jesteśmy na rynku od 2013 roku

Nasza siedziba mieści się w Warszawie, ale pracujemy zdalnie

Nasz zespół liczy około 90 [super]osób

Obsługujemy 7000+ użytkowników z 90+ krajów

Mamy jedną z najwyższych ocen wśród dostawców rozwiązań software dla PR według G2 Crowd

Jesteśmy jedynym zwycięzca konkursu Dream Employer 2023

78000+ artykułów opublikowanych w 3000+ newsroomach

13m+ emaili wysłanych do dziennikarzy

Jesteśmy częścią Semrush, wiodącej platformy Saas do zarządzania widocznością online i marketingiem treści

Obserwuj nas w mediach społecznościowych

CO TO JEST TAILWIND

Framework do stylowania z podejściem utylitarnym

Koncept

Adam Wathan

Twórca TailwindCSS

​

<div class="user-profile">

​

Nicolas Gallagher

The most reusable components are those with class names that are independent of the content.

“

​

<div class="user-profile">

​

​

<div class="card">

​

​

<div class="card card-md card-shadowed">

​

.card-shadowed {

box-shadow: 4px 4px 12px -10px rgba(66, 68, 90, 1);

}

.shadow {

box-shadow: 4px 4px 12px -10px rgba(66, 68, 90, 1);

}

Kiedy zrobimy tak z każdym modyfikatorem

<div class="shadow-lg px-4 py-2 bg-white rounded-xl">

Brzydkie

Ale

Działa

Dokumentacja BEM

There are only two hard problems in Computer Science: cache invalidation and naming things

“

Phil Karlton

Jesteśmy skupieni na jednym pliku/kontekście

Inne podejście niż to do którego przywykliśmy

Co Tailwind ma do zaoferowania?

Zbiór predefiniowanych klas

Spacing, rozmiary, tranzycje, animacje, layout itd.

Pseudo klasy

&:hover &:first &:focus &:required &:nth-child(odd)

class="hover:p-0 first:p-0 focus:p-0 required:p-0 odd:p-0">

Pseudo elementy

&::before &::after &::marker &::first-letter

class="before:p-0 after:p-0 marker:p-0 first-letter">

Mobile-first

Media queries

class="sm:p-0 md:p-2 xl:p-4">

@media (min-width: 640px) {}

Dark mode

<div class="bg-white dark:bg-red-900">

@media (prefers-color-scheme: dark) {}

Co jeśli nie znajdziemy odpowiedniej klasy?

Arbitrary values

<div class="top-[344px]">

​

.top-\[344px\] {

top: 344px;

}

To nie jest reużywalne tylko customowe.

<div class="grid-rows-[16px_auto]">

​

.grid-rows-\[16px_auto\]{{

grid-template-rows: 16px auto;

}

Czy wszystkie te klasy są wysyłane do klienta?

To właśnie magia Tailwinda ✨

Nie używamy interpolacji.

Biorąc to wszystko pod uwagę…

Czemu nie bootstrap albo material?

To są biblioteki z gotowymi komponentami i zbiorem ograniczonych klas utylitarnych

Konfiguracja

Konwencja

Używamy Tailwind’a, żeby zbudować właśnie takie biblioteki lub design systemy.

Możemy go dostosować całkowicie pod siebie.

tailwind.config.ts

tailwind.config.ts

Rozszerzenie do IDE

Możliwość połączenia z TypeScript

src/breakpoints.ts

tailwind.config.ts

A co z utrzymaniem na dłuższą metę?

@apply

styles.css

I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no `@​apply`

“

Adam Wathan

@apply

Więc czasami to jest najlepsza opcja

Wykorzystaj framework.

Komponenty

Pętle

Wykorzystaj IDE

Multi-cursor

Plugin prettier’a do sortowania klas

cmd + s ⬇️

Inline fold

Konflikty klas

🤔

DEMO

Case Study

Jakie są moje przemyślenia?

Dokumentacja Tailwinda

Customizacja & Podpowiedzi

Animacje

Problem z SSR i zewnętrznymi bibliotekami

Po udanej próbie, zainstalowaliśmy tailwinda w aplikacji głównej (tej dużej)

…ale nie całego naraz.

Czego nauczył mnie TailwindCSS?

Kontrola abstrakcji

Powtórzenia nie są takie złe.

Coupling

Kopiuj wklej to czasami najszybszy sposób na zrobienie czegoś.

It is just about impossible to think this is a good idea the first time you see it

To najlepsze narzędzie frontendowe, jakiego używałem.

@tobiasz_ciesielski�tobiaszciesielski.github.io