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
