replace postcss with tailwindcli

Author: overheadhunter

.github/workflows/gh-pages.yml

@@ -22,8 +22,6 @@ jobs:
         cache: 'npm'
         cache-dependency-path: package-lock.json
         registry-url: 'https://npm.pkg.github.com/'
-    - name: Install Tools
-      run: npm install -g postcss-cli autoprefixer
     - name: NPM install
       run: |
         npm config set "@skymatic:registry" https://npm.pkg.github.com/

README.md

@@ -3,9 +3,6 @@
 # Usage
 ## Requirements
 * Hugo
-* NPM
-  * postcss-cli (`npm install -g postcss-cli`)
-  * autoprefixer (`npm install -g autoprefixer`)
 * Fontawesome Pro `npm config set "@skymatic:registry" https://npm.pkg.github.com/ && npm config set "//npm.pkg.github.com/:_authToken" TOKEN`
 
 ## Building

assets/css/main.css

@@ -1,8 +1,8 @@
 /* purgecss start ignore */
 @import 'tailwindcss';
 /* purgecss end ignore */
-@import './custom.css' layer(components);
-@import './fonts.css' layer(components);
+@import './custom.css';
+@import './fonts.css';
 @import '@skymatic/fontawesome-pro/css/all' layer(components);
 
 @plugin '@tailwindcss/forms';

hugo.toml

@@ -14,6 +14,11 @@ enableemoji = true
     languageName = "Deutsch"
     languageCode = "de_DE"
 
+[build]
+  [[build.cachebusters]]
+    source = 'layouts/.*'
+    target = 'css'
+
 [outputs]
   home = ["HTML", "RSS"]
   section = ["HTML"]

layouts/_default/baseof.html

@@ -52,10 +52,11 @@
     {{ end }}
     <meta name="apple-itunes-app" content="app-id=1560822163">
     {{ if hugo.IsServer }}
-      {{ $css := resources.Get "css/main.css" | postCSS }}
+      {{ $css := resources.Get "css/main.css" | css.TailwindCSS }}
       <link rel="stylesheet" href="{{ $css.RelPermalink }}" media="screen" />
     {{ else }}
-      {{ $css := resources.Get "css/main.css" | postCSS | minify | fingerprint }}
+      {{ $tailwindOpts := dict "minify" true }}
+      {{ $css := resources.Get "css/main.css" | css.TailwindCSS $tailwindOpts | fingerprint }}
       <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" media="screen" />
     {{ end }}
     <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="{{ .Site.LanguagePrefix }}/feed.xml" />