Tailwindcss

Opublikowano przez

Na podstawie https://www.youtube.com/watch?v=lCxcTsOHrjo i własnego doświadczenia

Zainstalować Node.js wraz z npm (https://nodejs.org/en/download) lub rozpakować (wersja zip) do systemu i dodać do zmiennych systemowych użytkownika ścieżkę (np: c:\Moje_tools\node-v22.14.0-win-x64)

Sprawdzenie czy jest zainstalowany: npm -v

Instalacja tailwindcss: npx tailwindcss@3 init
Po wielu próbach doszedłem do wniosku że w dokumentacji instalacji brakuje @3, bo bez tego były błędy instalacji.
Wynikiem działania powinien być wygenerowany plik tailwind.config.js
W powstałym pliku definiujemy gdzie znajdują się nasze pliki .html, by mogła je przeszukiwać i uwzględnić użyte klasy.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./build/**/*.html'], // tu podajemy gdzie szukac naszych plików html
  theme: {
    extend: {},
  },
  plugins: [],
}

Należy przygotować plik stylów wejściowych (np. ./static/css/input.css, lub .src/css/input.css) w którym importujemy style :

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

/* mozna tez dodać swoje wlasne style poniżej */
.moj-radial-blue {
  background: radial-gradient( yellow, #2c5282);
}

Następnie uruchamiamy polecenie generujące wyjściowy plik style.css.

npx tailwindcss@3 -i ./src/input.css -o ./build/css/style.css

Wygeneruje nam to plik w katalogu .build/css/style.css, ale mozemy wygenerowac w dowolnej lokalizacji i z dowolna nazwa. Generowanie jest jednokrotne.
W celu automatycznego śledzenia zmian i generowania plików css z użytymi przez nas klasami należy uruchomić proces, który automatycznie wykrywa zmiany i uwzględnia je w pliku wyjsciowym.css

npx tailwindcss@3 -i ./src/input.css -o ./build/css/style.css  --watch

Ścieżkę do pliku wyjściowego należy zalinkować w docelowym pliku html

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css"><!-- dodajemy normalnie link do pliku.css -->
</head>
<body class="min-h-screen grid place-content-center radial-blue ">

Przygotowujemy skrypt ułatwiający uruchamiania tailwindcss.

npm init -y

W powstałym pliku package.json dopisujemy konfigurację do uruchamiania.

{
  "name": "tailwindcss",
  "version": "1.0.0",
  "main": "tailwind.config.js",
  "scripts": {
    "tailwind": "npx tailwindcss@3 -i ./src/input.css -o ./build/css/style.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Następnie w celu uruchomienia wpisujemy w bash/shell:

npm run tailwind

Przydatne i polecone dodatki do VSCode:
Tailwindcss Intellisense – https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Inline fold – https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold