Use tailwindcss standalone cli

project/StylesPlugin.scala

@@ -23,7 +23,7 @@ object StylesPlugin extends AutoPlugin {
     val stylesDirectory = settingKey[File]("The directory containing source styles")
     val stylesOutputDir = settingKey[File]("The directory to put the final outcome")
     val stylesMode = settingKey[StylesMode]("The compile mode, dev or production")
-    val stylesNpxCommand = settingKey[String]("The npx executable")
+    val stylesTwCommand = settingKey[String]("The tailwindcss executable")
     val stylesNpmCommand =
       settingKey[String]("The npm executable for installing dependencies")
 
@@ -40,19 +40,19 @@ object StylesPlugin extends AutoPlugin {
       stylesDirectory := (Compile / sourceDirectory).value / "styles",
       stylesOutputDir := (Compile / resourceManaged).value /
         "META-INF" / "resources" / "webjars" / name.value / version.value,
-      stylesNpxCommand := "npx",
+      stylesTwCommand := "tailwindcss",
       stylesNpmCommand := "npm",
       stylesMode := StylesMode.Dev,
       stylesBuild := {
         val logger = streams.value.log
-        val npx = stylesNpxCommand.value
+        val tw = stylesTwCommand.value
         val npm = stylesNpmCommand.value
         val inDir = stylesDirectory.value
         val outDir = stylesOutputDir.value
         val wd = (Compile / baseDirectory).value
         val mode = stylesMode.value
         npmInstall(npm, wd, logger)
-        val files = postCss(npx, inDir, outDir, wd, mode, logger) ++
+        val files = runTailwind(tw, inDir, outDir, wd, mode, logger) ++
           copyWebfonts(wd, outDir, logger) ++
           copyFlags(wd, outDir, logger)
         logger.info(s"Styles built at $outDir")
@@ -77,8 +77,8 @@ object StylesPlugin extends AutoPlugin {
     }
   }
 
-  def postCss(
-      npx: String,
+  def runTailwind(
+      tailwind: String,
       inDir: File,
       outDir: File,
       wd: File,
@@ -86,25 +86,20 @@ object StylesPlugin extends AutoPlugin {
       logger: Logger
   ): Seq[File] = {
     val env = mode match {
-      case StylesMode.Dev  => "development"
-      case StylesMode.Prod => "production"
+      case StylesMode.Dev  => Seq.empty
+      case StylesMode.Prod => Seq("--minify")
     }
     val target = outDir / "css" / "styles.css"
     IO.createDirectory(target.getParentFile)
     logger.info("Compiling css stylesheets…")
-    Cmd.run(
-      Seq(
-        npx,
-        "postcss",
-        s"$inDir/index.css",
-        "-o",
-        target.absolutePath,
-        "--env",
-        env
-      ),
-      wd,
-      logger
-    )
+    val cmd = Seq(
+      tailwind,
+      "--input",
+      s"$inDir/index.css",
+      "-o",
+      target.absolutePath
+    ) ++ env
+    Cmd.run(cmd, wd, logger)
     val gz = file(target.toString + ".gz")
     IO.gzip(target, gz)
     Seq(target, gz)
@@ -121,7 +116,7 @@ object StylesPlugin extends AutoPlugin {
 
   def copyFlags(baseDir: File, outDir: File, logger: Logger): Seq[File] = {
     val flagDir =
-      baseDir / "node_modules" / "flag-icon-css" / "flags"
+      baseDir / "node_modules" / "flag-icons" / "flags"
     val targetDir = outDir / "flags"
     IO.createDirectory(targetDir)
 

project/dev-ui-build.sh

@@ -23,7 +23,7 @@ compile_css() {
     echo "Building css …"
     local srcs="$wdir/modules/webapp/src/main/styles/index.css"
     local target="$targetbase/css/styles.css"
-    cd $wdir/modules/webapp && npx tailwindcss --input "$srcs" -o "$target" --config ./tailwind.config.js --postcss ./postcss.config.js  --env development && cd -
+    cd $wdir/modules/webapp && tailwindcss --input "$srcs" -o "$target" --config ./tailwind.config.js --postcss ./postcss.config.js  --env development && cd -
     cat "$target" | gzip > "$targetbase/css/styles.css.gz"
     cp "$targetbase/css/styles.css" "$resourcebase/css/"
     cp "$targetbase/css/styles.css.gz" "$resourcebase/css/"
@@ -47,7 +47,7 @@ watch_css() {
     local srcs="$wdir/modules/webapp/src/main/styles/index.css"
     local target="$targetbase/css/styles.css"
     cd $wdir/modules/webapp && \
-        npx tailwindcss --input "$srcs" \
+        tailwindcss --input "$srcs" \
             -o "$target" -m \
             --config ./tailwind.config.js \
             --postcss ./postcss.config.js --watch