Jak zainstalować Node.js, npm i Tailwind CSS w WordPressie (metoda lokalna, bez CDN)

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!