Dlaczego lokalna instalacja Tailwind CSS jest lepsza?
Chociaż Tailwind CSS można szybko podłączyć przez CDN, to metoda lokalna oferuje znacznie więcej korzyści:
- Niezależność: Twoje style są serwowane z Twojej domeny, bez zależności od zewnętrznego CDN.
- Optymalizacja rozmiaru pliku: Dzięki funkcji PurgeCSS, wygenerowany plik CSS zawiera tylko te style, których faktycznie używasz. To znacząco przyspiesza ładowanie strony.
- Lepsza wydajność i SEO: Szybciej ładujące się strony są lepiej oceniane przez wyszukiwarki.
Instalacja Node.js i npm
Krok 1: Pobierz i Zainstaluj Node.js (z npm):
Przejdź na oficjalną stronę: nodejs.org/en/download
Zalecam pobranie wersji LTS (Long Term Support). To najbardziej stabilna wersja, polecana dla większości użytkowników.
Pobierz odpowiedni instalator dla swojego systemu operacyjnego. Dla macOS będzie to: macOS Installer (.pkg).
Uruchom pobrany instalator i postępuj zgodnie z instrukcjami. Zazwyczaj wystarczy klikać „Next” (Dalej), akceptując domyślne ustawienia. Instalator automatycznie zainstaluje zarówno Node.js, jak i npm.
Krok 2: Sprawdź, czy Node.js i npm zostały poprawnie zainstalowane:
Po zakończeniu instalacji (może być wymagane zamknięcie i ponowne otwarcie terminala), otwórz terminal.
Wpisz kolejno komendy i naciśnij Enter po każdej:
node -v
npm -v
Powinieneś zobaczyć numery wersji (np. v20.14.0 dla Node.js i 10.8.1 dla npm).
Kontynuujemy konfigurację Tailwind CSS
Krok 1: Przejdź do katalogu szabonu w WordPressie
Utwórz nowy, pusty folder buildera Tailwinda w katalogu szablonu WordPressa. Folder ten będzie służył jako „miejsce pracy” do generowania stylów Tailwind.
mkdir tailwind-builder
Pamiętaj, że tailwind-builder to sugerowana nazwa folderu, możesz wybrać inną, jeśli wolisz.
Przejdź do nowo utworzonego katalogu:
cd tailwind-builder
Upewnij się, że jesteś w tym katalogu, sprawdzając swoją ścieżkę w terminalu (pwd na macOS).
Krok 2: Zainicjuj projekt npm
W tym kroku stworzymy plik package.json, który będzie przechowywał informacje o zależnościach Twojego projektu.
Zainicjuj projekt npm:
npm init -y
Po wykonaniu tej komendy w katalogu tailwind-builder powinien pojawić się plik package.json.
Krok 3: Zainstaluj Tailwind CSS i jego zależności
Teraz zainstalujemy same pakiety Tailwind CSS, PostCSS i Autoprefixer. Te narzędzia są potrzebne do zbudowania Twojego CSS.
Zainstaluj zależności deweloperskie
Wymuś instalację konkretnej, stabilnej wersji Tailwinda aby uniknąć błędów:
npm install -D tailwindcss@3.4.1 postcss autoprefixer
Poczekaj, aż ta komenda zakończy działanie. Powinieneś zobaczyć, jak npm pobiera pakiety, a w Twoim katalogu tailwind-builder powinien pojawić się folder node_modules. Folder ten zawiera wszystkie zainstalowane zależności i jest niezbędny do działania Tailwind CSS.
Sprawdź package.json: Otwórz plik package.json i upewnij się, że w sekcji "devDependencies" są wymienione tailwindcss, postcss i autoprefixer z jakimiś numerami wersji. Jeśli są, wszystko jest w porządku.
Krok 4: Zainicjuj konfigurację Tailwind CSS
Ten krok tworzy pliki konfiguracyjne dla Tailwind CSS (tailwind.config.js) i PostCSS (postcss.config.js).
Zainicjuj konfigurację Tailwind:
npx tailwindcss init -p
Jeśli wszystko poszło zgodnie z planem, powinieneś zobaczyć komunikaty potwierdzające utworzenie plików:
Created tailwind.config.js
Created postcss.config.js
Sprawdź swój katalog tailwind-builder – powinny tam być te dwa nowe pliki.
Podpinanie Tailwinda lokalnie do istniejącej strony (zamiast cdn.tailwindcss.com)
1. Usuń cdn.tailwindcss.com z HTML-a
Usuń ten fragment z <head>:
<script src="https://cdn.tailwindcss.com"></script>
2. Utwórz plik input.css
W katalogu projektu (tailwind-builder) utwórz plik input.css i umieść w nim poniższy kod:
@tailwind base;
@tailwind components;
@tailwind utilities;
3. Edytuj plik tailwind.config.js
W katalogu projektu (tailwind-builder) zmień zawartość pliku tailwind.config.js, by wskazywał na katalog twojego szablonu WordPressa.
Przykład. Załóżmy, że Twoja strona na WordPressie działa na szablonie w poniższym katalogu:
/Users/[username]/Local Sites/[sitename]/app/public/wp-content/themes/[themename]/
Pamiętaj, żeby [username], [sitename], [themename] podmienić na nazwy używne w twoim projekcie.
Tailwind jest skonfigurowany w:
/Users/[username]/Local Sites/[sitename]/app/public/wp-content/themes/[themename]/tailwind-builder
W takim wypadku — w pliku tailwind.config.js (w katalogu tailwind-builder) ustaw:
module.exports = {
content: [
"./../**/*.php",
"./../**/*.js"
],
theme: {
extend: {},
},
plugins: [],
}
Tailwind będzie skanował wszystkie pliki PHP i JS w katalogu nadrzędnym do tailwind-builder (czyli w głównym katalogu motywu) i wszystkich jego podkatalogach.
4. Zbuduj Tailwinda lokalnie
Załóżmy, że w Twoim szablonie WordPress masz folder na pliki CSS, np.:
/Users/[username]/Local Sites/[sitename]/app/public/wp-content/themes/[themename]/assets/css/
Teraz w terminalu wygeneruj pliki CSS Tailwinda potrzebne do twojego projektu:
npx tailwindcss -i ./input.css -o "/Users/[username]/Local Sites/[sitename]/app/public/wp-content/themes/[themename]/assets/css/tailwind-output.css" --minify
To wygeneruje plik CSS Tailwinda do katalogu Twojej strony:
/Users/[username]/Local Sites/[sitename]/app/public/wp-content/themes/[themename]/assets/css/tailwind-output.css
Opcja --minify zmniejsza rozmiar pliku CSS.
5. Podłącz wygenerowany CSS
W szablonie WordPress (functions.php) dodaj wygenerowany CSS do ładowania w WordPressie, np.:
function shps_enqueue_styles() {
wp_enqueue_style(
'tailwind',
get_template_directory_uri() . '/assets/css/tailwind-output.css',
[],
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'shps_enqueue_styles');
Gotowe!
Tagi: nodejs, npm, tailwind
Jak zainstalować Node.js, npm i Tailwind CSS w WordPressie (metoda lokalna, bez CDN) 
