Tailwind CSS: Sekcja nowości i używanie systemu pluginów w TailwindCSS

0:00No i teraz spotykamy się z pewnym problemem,

0:03bo mamy tekst i generalnie rzecz biorąc rozwiązań tutaj jest kilka.

0:09Moglibyśmy dostać już z backendu gotowy

0:11tekst, oczywiście przygotowany specjalnie dla nas.

0:14Moglibyśmy tutaj korzystać jakieś sztuczki

0:17i próbować za pomocą truncat on overflow jakoś łamać sobie ten tekst.

0:22Natomiast ja chcę zaproponować inne rozwiązanie rozwiązanie, które

0:25przygotowali dla nas też twórcy właśnie frameworka Tailwind CSS.

0:29Mianowicie plugin, dodatkowy plugin, który pozwoli Ci określić

0:33liczbę wierszy, po której możesz sobie ucinać tekst i zobaczysz jak fajnie i jak

0:38łatwo jest to zaimplementować w tym momencie do naszego projektu.

0:41Teraz pokażę Ci jak możesz sobie

0:43rozszerzać możliwości frameworka Tailwind za pomocą pluginów.

0:47I teraz, żeby dowiedzieć się więcej na temat systemu pluginów w Tailwindzie, możesz

0:51przejść do dokumentacji, wcisnąć Control+K i wpisać plugins.

0:55I już mamy tutaj stronę informacyjną na temat dodatkowych rozszerzeń, które możesz

1:00sobie samemu pisać lub możesz wykorzystywać rozszerzenia, które

1:03stworzyli dla nas już twórcy tego frameworka.

1:06I jednym z tych rozszerzeń jest właśnie

1:08rzecz, która jest nam teraz bardzo potrzebna, mianowicie line-clamp.

1:13Jak widzisz

1:14ten plugin pozwoli Ci uciąć linie i zrobić truncat i trzy kropeczki na końcu

1:20w zależności od tego jaki numer tutaj wprowadzimy.

1:22Dlatego teraz skonfigurujemy sobie nasze

1:25środowisko do tego, żebyś mógł sobie wykorzystać ten plugin.

1:29Mamy tutaj Tailwind CSS line-clamp.

1:30Zainstalujemy to sobie w naszym naszym projekcie.

1:33Przejdźmy teraz do naszego terminala.

1:36Zainstalujemy sobie ten plugin.

1:40Po zainstalowaniu tej paczki w Twoim package.json powinna się pojawić nowa

1:44informacja, że nowa paczka została zainstalowana.

1:47Tutaj mamy Tailwind CSS line-clamp.

1:50I w tym momencie musimy sobie przejść tutaj do konfiguracji i w sekcji plugins,

1:55poprzez rozszerzanie tego, mówimy z których pluginów powinien korzystać.

2:01I tutaj jeżeli zainstalowaliśmy sobie ten

2:03plugin Tailwind CSS line-clamp to teraz poprzez prosty require

2:07możemy sobie wpisać właśnie ten plugin i dzięki temu

2:11uzyskamy dostęp do specjalnej klasy, która jest pokazana tutaj w dokumentacji,

2:16mianowicie linc-clamp i za pomocą myślnik i liczba linii możemy powiedzieć w którym

2:22momencie nasz tekst powinien zostać ucięty.

2:25Zobacz, skopiuję sobie tę klasę.

2:28Przejdę sobie teraz naszego edytora kodu i przejdźmy do naszego p,

2:33I nadajemy mu klasę line-clamp-3.

2:38Na razie to nie zadziałało zobaczyliśmy.

2:40Wróćmy sobie do naszej konfiguracji.

2:43Zobaczymy czy czegoś nie pominęliśmy.

2:47Konfiguracja.

2:49Oczywiście require nie required.

2:52I musimy sobie zbudować nasze style na nowo.

2:55Już w tym momencie zobacz

2:57jak pięknie zaczął nam działać plugin o dokładnie trzeciej line,

3:01na trzeciej linijce ucina nam tekst tak jak tego chcieliśmy.

3:04Teraz możemy sobie wrócić do stylowania tego elementu.