Tailwind CSS to pierwsza użyteczna platforma CSS, która umożliwia programistom projektowanie niestandardowych komponentów internetowych bez przełączania się na plik CSS. Z tego samouczka dowiesz się, jak zainstalować CSS Tailwind w React i jak za jego pomocą zbudować prostą stronę React.

Dlaczego warto korzystać z CSS Tailwind?

Jest już dużo CSS frameworki, które upraszczają sposób projektowania stron internetowych przez programistów. Dlaczego więc warto korzystać z CSS Tailwind?

Struktury CSS, takie jak Bootstrap i Foundation, są strukturami upartymi, co oznacza, że ​​zapewniają programistom predefiniowane komponenty, które mają domyślne style. Ogranicza to zarówno dostosowywanie, jak i kreatywność, a w rezultacie otrzymujesz strony internetowe, które wyglądają raczej ogólnie.

CSS Tailwind, to jednak platforma zorientowana na użyteczność, która zapewnia kreatywną kontrolę nad tworzeniem dynamicznych komponentów. I w przeciwieństwie do Bootstrap, możesz łatwo dostosowywać projekty według własnego uznania.

Kolejną zaletą korzystania z CSS Tailwind jest to, że otrzymujesz mały rozmiar pakietu CSS, ponieważ usuwa on wszystkie nieużywany CSS podczas procesu budowania (co różni się od Bootstrap, ponieważ zawiera wszystkie pliki CSS w zbudować).

Dowiedz się więcej o różnice między CSS Tailwind i Bootstrap z naszego artykułu na ten temat.

Wady używania Tailwind CSS

CSS Tailwind ma stromą krzywą uczenia się nawet dla doświadczonych programistów. Nauczenie się, jak w pełni korzystać z klas narzędziowych, zajmuje trochę czasu i może być konieczne częste odwoływanie się do dokumentacji. Jednak po zapoznaniu się z klasami okaże się, że jest to łatwiejsze i szybsze w porównaniu ze zwykłym CSS.

Większość programistów lubi kierować się zasadą separacji obaw, tak że pliki CSS i HTML są zapisywane w różnych plikach. W CSS Tailwind piszesz CSS bezpośrednio w znacznikach HTML – co dla niektórych jest wadą.

Nawet z tymi wadami Tailwind CSS jest strukturą, którą powinieneś poważnie rozważyć, jeśli znasz już CSS i chcesz szybciej tworzyć projekty.

Pierwsze kroki: Utwórz projekt React

Uruchom następujące polecenie w terminalu, aby utworzyć szkielet a Reagować aplikacja za pomocą aplikacja-stwórz-reaguj.

npx create-react-app react-tailwind

aplikacja-stwórz-reaguj zapewnia łatwy sposób tworzenia aplikacji React bez konfigurowania narzędzi do budowania, takich jak webpack, babel lub linter. Oznacza to, że w ciągu kilku minut otrzymujesz działające środowisko React.

Powyższe polecenie tworzy nowy folder o nazwie Reaguj-tylny wiatr. Przejdź do folderu i otwórz go za pomocą preferowanego edytora tekstu.

cd reak-tailwind

Następnie zainstaluj Tailwind CSS i skonfiguruj go do pracy z aplikacją React.

Użyj CSS Tailwind w React

Zainstaluj CSS Tailwind i jego zależności za pomocą tego polecenia:

npm zainstaluj tailwindcss postcss autoprefixer

PostCSS używa wtyczek JavaScript, aby CSS był kompatybilny z większością przeglądarek. Sprawdza przeglądarkę, w której działa aplikacja, i określa wypełnienia potrzebne do bezproblemowego działania CSS. Autoprefixer to wtyczka PostCSS, która używa wartości z caniuse.com aby automatycznie dodawać przedrostki dostawców do reguł CSS.

Zainicjuj CSS Tailwind

Uruchom początek tylnego wiatru polecenie, aby wygenerować domyślne pliki konfiguracyjne CSS Tailwind.

npx tailwindcss init

To tworzy tailwind.config.js w folderze głównym, który przechowuje wszystkie pliki konfiguracyjne Tailwind i zawiera następujące elementy:

moduł.eksport = {
 zawartość: [],
 temat: {
 poszerzać: {},
 },
 wtyczki: [],
}

Skonfiguruj ścieżki szablonów

Aby zobaczyć, jakie klasy CSS są używane, musisz poinformować Tailwind CSS o plikach, które powinien sprawdzić. Dzięki temu Tailwind może zidentyfikować i usunąć nieużywane klasy, a tym samym zmniejszyć rozmiar wygenerowanego kodu CSS.

w tailwind.config.js, dodaj ścieżki szablonów pod kluczem treści.

moduł.eksport = {
 zawartość: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 temat: {
 poszerzać: {},
 },
 wtyczki: [],
}

Wstaw CSS Tailwind do React

Następnym krokiem jest włączenie Tailwind CSS do aplikacji za pomocą @tailwind. dyrektywy.

Usuń wszystko w index.css i dodaj poniższe, aby zaimportować podstawowe style, komponenty i narzędzia.

@tailwind baza;
komponenty @tailwind;
narzędzia @tailwind;

Na koniec upewnij się, że index.css jest importowany w index.js CSS Tailwind będzie gotowy do użycia.

Używanie CSS Tailwind do stylizowania komponentu React

Poniżej utworzysz prostą stronę internetową i stylizujesz ją za pomocą klas narzędziowych Tailwind.

Ta strona zawiera dwie główne sekcje: a Pasek nawigacyjnyi sekcję bohatera (która ma nagłówek i przycisk).

Aby zilustrować, w jaki sposób Tailwind CSS ułatwia pisanie CSS, spróbuj stylizować stronę internetową za pomocą zwykłego CSS i Tailwind CSS.

Zacznij od zmodyfikowania App.js w src folder, aby usunąć niepotrzebny kod.

importuj „./App.css”
funkcja App() {
 powrót (



 );
}
eksportuj domyślną aplikację;

Następnie dodaj zawartość strony internetowej do App.js.

importuj "./App.css";
funkcja App() {
 powrót (







 CSS Tailwind ułatwia stylizowanie komponentów React!



Zaczynaj






 );
}

Aby użyć zwykłego CSS, dodaj CSS do App.css.

nawigacja {
 wyświetlacz: elastyczny;
 uzasadnienie-treść: spacja-pomiędzy;
 dopełnienie: 16px 36px;
 kolor: #000;
 box-shadow: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 rozmiar czcionki: 18px;
 grubość czcionki: pogrubiona;
}
ul {
 styl listy: brak;
 wyświetlacz: wbudowany flex;
}
ul li {
 margines lewy: 16px;
 kursor: wskaźnik;
}
.bohater {
 wyświetlacz: elastyczny;
 kierunek ugięcia: kolumna;
 wyrównaj-elementy: środek;
 margines górny: 64px;
}
h1 {
 rozmiar czcionki: 36px;
 wyrównanie tekstu: środek;
}
.btn {
 kolor tła: #000000;
 kolor: #fff;
 wypełnienie: 10px;
 szerokość: dopasowanie treści;
 margines górny: 36px;
}

Dzięki Tailwind CSS nie musisz pisać reguł CSS dla każdej klasy. Zamiast tego używasz klas użytkowych. Są to klasy ograniczone do pojedynczej właściwości CSS. Na przykład, jeśli chcesz utworzyć przycisk z czarnym tłem i białym tekstem, musisz użyć bg-czarny oraz tekst-biały klasy użyteczności.

App.js powinien wyglądać tak.

funkcja App() {
 powrót (







 CSS Tailwind ułatwia stylizowanie komponentów React!




 Zaczynaj







 );
}

Nie musisz importować App.css ponieważ style generowane przez CSS Tailwind są przechowywane w index.css które zaimportowałeś w index.js wcześniej.

W porównaniu ze zwykłym CSS, to podejście skutkuje mniejszą ilością kodu, który jest łatwy do zrozumienia.

Kod w stylu dzięki CSS Tailwind

W tym artykule poznałeś CSS Tailwind, jego mocne i słabe strony oraz sposób wykorzystania jego klas narzędziowych w aplikacjach React. Oprócz klas Tailwind CSS oferuje również inne dodatkowe funkcje, w tym możliwość tworzenia responsywnych układów i komponentów wielokrotnego użytku.

Ale, jak wspomnieliśmy wcześniej, Tailwind nie jest jedynym frameworkiem CSS na rynku. Którego użyjesz w swoim następnym projekcie?

CSS Tailwind a Bootstrap: który jest lepszym frameworkiem?

Wybierając framework CSS, ważne jest, aby znaleźć taki, który spełnia Twoje wymagania.

Czytaj dalej

O autorze