Cześć!

Dzisiaj zajmiemy się instalacją TailwindCSS przy pomocy NPM.
Zakładam, że macie zainstalowane node.js, jeżeli nie to zapraszam tutaj, poradnik jest na debiana, ale wystarczy wpisać w google node.js install dystrybucja linuksa i podążać za instrukcją 🙂

Teraz po zalogowaniu się na nasze konto SSH utworzymy folder w którym będziemy trzymali pliki naszego projektu.

mkdir projekt-tailwindcss

Następnie przechodzimy do folderu

cd projekt-tailwindcss

Teraz przy pomocy npm generujemy plik package.json

npm init -y

Instalujemy TailwindCSS przy pomocy pakietu npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Następnie generujemy poniższą komendą pliki tailwind.config.js oraz postcss.config.js

npx tailwindcss init --postcss

Następnie tworzymy plik app.css, jest to plik, który będzie służył do generowania naszego style.css, możemy użyć do tego komendy.

touch app.css

Do nowo utworzonego pliku wklejamy poniższe linijki

@tailwind base; @tailwind components; @tailwind utilities;

Następnie tworzymy folder public, który będzie odpowiedzialny za wyświetlenie naszej strony.

mkdir public

Następnie tworzymy plik index.php/index.html w zależności co zamierzamy robić z naszą stroną.
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TailwindCSS - tailwind-forum.pl - Poradnik instalacji NPM</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flex justify-center"> <h1 class="text-3xl text-blue-500">Cześć!</h1> <h1 class="text-2xl text-orange-500">Poradnik instalacji tailwindcss wraz z npm.</h1> </div> </body> </html>

Teraz zajmiemy się edycją naszych plików tailwind.config.js

module.exports = { purge: ['./public/**/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], };

W linijce purge musimy pamiętać aby rozszerzenie .html zmienić na .php jeżeli nasza strona będzie napisana w php lub będziesz używał jej w jakimś frameworku np. laravelu 🙂

package.json

{ "name": "poradniki.tailwind-forum.pl", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "tailwindcss build app.css -o public/style.css", "watch": "tailwindcss build app.css -o public/style.css -w" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^10.4.13", "postcss": "^8.4.19", "tailwindcss": "^3.2.4" } }

Tutaj dodajemy dwie dodatkowe linijki w scripts mianowicie build oraz watch.
"build": "tailwindcss build app.css -o public/style.css",
"watch": "tailwindcss build app.css -o public/style.css -w"

build odpowiada za jednorazową kompilację naszych plików css
watch odpowiada za ciągłe monitorowanie naszych plików, kompilując je za każdym razem gdy dokonamy zapisu pliku php lub html.

Użycie komend wygląda następująco: npm run build/watch

Efekt końcowy:

Pliki source https://tailwind-forum.pl/assets/files/2022-12-05/1670241513-967341-instalacja-npmtar.tar