mod: более новая версия TailWindCSS + Скрпит-сборщик с новым input.css внутри (чтобы собиралось только то, что нужно для проекта!)

frontend-assembly/tailwind/package.json

@@ -1,14 +1,12 @@
 {
   "name": "lpon-tailwind",
   "version": "1.0.0",
-  "description": "Tailwind CSS build for LPON.RU Django Frontend",
   "private": true,
   "scripts": {
-    "build": "tailwindcss -i ./src/tailwind.css -o ../../public/static/css/tailwind.min.css --minify"
+    "build": "npx tailwindcss -i input.css -o ../../public/static/css/tailwind.min.css --minify"
   },
   "devDependencies": {
-    "tailwindcss": "^3.4.1",
+    "@tailwindcss/cli": "^4.0.0",
-    "@tailwindcss/forms": "^0.5.7",
+    "tailwindcss": "^4.0.0"
-    "@tailwindcss/typography": "^0.5.10"
   }
-}
+}

scripts/build-tailwind.sh

@@ -18,7 +18,7 @@ fail() {
 }
 
 cleanup() {
-  rm -rf "$TAILWIND_DIR/src" "$TAILWIND_DIR/node_modules" "$TAILWIND_DIR/tailwind.config.js"
+  rm -rf "$TAILWIND_DIR/src" "$TAILWIND_DIR/node_modules" "$TAILWIND_DIR/tailwind.config.js" "$TAILWIND_DIR/input.css"
 }
 
 trap cleanup EXIT INT TERM
@@ -37,31 +37,21 @@ fi
 
 mkdir -p "$OUTPUT_DIR"
 
-log "Создаю конфиги и entry point для Tailwind"
+log "Создаю entry point для Tailwind"
 
-# tailwind.config.js
+# input.css (entry point)
-cat > "$TAILWIND_DIR/tailwind.config.js" <<'EOF'
+# Проверяем: если input.css вообще нет, только тогда создаем базовый
-/** @type {import('tailwindcss').Config} */
+# ВАЖНО: Tailwind так устроен, что он собирает в CSS только те классы, которые реально используются в исходниках (HTML,
-module.exports = {
+#        Python и т.д.) Это очень круто, т.к. финальный CSS проекта будет минимальным по размеру!
-  content: [
+#        Чтобы Tailwind знал, где искать классы, нужно указать ему исходники через директиву @source в input.css.
-    '../../lpon_site/templates/**/*.html',
+#        @source "../../lpon_site/templates/**/*.html"; <-- ищем все HTML-шаблоны в проекте
-  ],
+#        @source "../../lpon_site/frontend/**/*.py";    <-- ищем все Python-файлы в проекте (например, там могут
-  theme: {
+#                                                           генерироваться классы, которые генерируют HTML)
-    extend: {},
+cat > "$TAILWIND_DIR/input.css" <<'EOF'
-  },
+@import "tailwindcss";
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-  ],
-}
-EOF
 
-# src/tailwind.css (entry point)
+@source "../../lpon_site/templates/**/*.html";
-mkdir -p "$TAILWIND_DIR/src"
+@source "../../lpon_site/frontend/**/*.py";
-cat > "$TAILWIND_DIR/src/tailwind.css" <<'EOF'
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 EOF
 
 log "СОБИРАЮ Tailwind CSS"