Использование TailWindCSS вместе с HtmlBuilder для публикации на FireBase

Файл publish.sh 

#!/bin/bash

cd ~/$1/build2

echo "Обработка HTML, CSS и JS файлов с помощью конвеера TailWind"

npm run process

echo "Копируем в каталог для публикации собранные файлы"

cp ./dist/ ~/$2/public -r
cp ./css/  ~/$2/public -r
cp ./js/ ~/$2/public -r
cp ./*.html ~/$2/public
cp ./o/ ~/$2/public -r

echo "Прибираемся, удаляем временные файлы..."
rm ./processed -rf
rm ./temp -rf

cd ~/$2/public

echo "Выгружаем на удаленный сервер сборку"

firebase deploy

cd -

git add -A
git status
git commit -m "Автокоммит $(date)"

read

Файл tailwind.config.js 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./**/*.html",       // All HTML files in root & subfolders
    "./js/*.js",     // JS files (if any)
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Файл package.json

{
  "scripts": {
      "concat": "concat -o ./temp/combined.css ./processed/*.css", 
      "build": "tailwindcss -i ./temp/combined.css -o ./dist/output.css",
      "process": "npm run build:all && npm run concat && npm run build",
      "build:aside": "tailwindcss -i ./css/aside.css -o ./processed/aside.css --watch",
      "build:all": "for file in ./css/*.css; do tailwindcss -i \"$file\" -o \"./processed/$(basename $file)\"; done"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.21",
    "concat": "^1.0.3",
    "postcss": "^8.5.4",
    "tailwindcss": "^4.1.8"
  },
  "dependencies": {
    "@tailwindcss/cli": "^4.1.8"
  }
}
Теги документа