Merge pull request #126 from clue-labs/tailwind

Add minimal build of Tailwind CSS v3.2.4 instead of using full CSS

Author: SimonFrings

.github/workflows/diff.yml

@@ -20,7 +20,6 @@ jobs:
         with:
           php-version: ${{ matrix.php }}
           coverage: none
-      - run: test -f Makefile || echo -en "build:\n\tcomposer install\n\tvendor/bin/sculpin generate\n" > Makefile # remove me once Makefile is merged
       - run: make && mv build/ old/
 
       # check out head ref and build site into new/

.gitignore

@@ -1,2 +1,3 @@
 /vendor/
 /build/
+/tailwindcss

Makefile

@@ -1,10 +1,17 @@
-build: vendor
+build: vendor www/src/tailwind.min.css
 	vendor/bin/sculpin generate
 
 vendor: composer.json composer.lock
 	composer install
 	touch $@
 
+www/src/tailwind.min.css: www/_layouts/* www/_posts/* www/_talks/* www/*.html www/*.html.twig tailwindcss tailwind.config.js
+	./tailwindcss -o $@ --minify
+	touch $@
+
+tailwindcss:
+	test -x tailwindcss || curl -L https://github.com/tailwindlabs/tailwindcss/releases/download/v3.2.4/tailwindcss-linux-x64 > tailwindcss && chmod +x tailwindcss
+
 serve: build
 	docker run -it --rm -p 80:80 -v "$$PWD"/build/:/var/www/html/ php:8.1-apache sh -c "ln -s /etc/apache2/mods-available/rewrite.load /etc/apache2/mods-enabled; apache2-foreground"
 
@@ -15,8 +22,9 @@ served: build
 
 test:
 	bash tests/acceptance.sh
+	test -z "$$(git status --porcelain)" || (echo Directory is dirty && git status && exit 1)
 
 clean:
-	rm -rf build/ vendor/
+	rm -rf build/ vendor/ tailwindcss
 
 .PHONY: build serve served test clean

tailwind.config.js

@@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "www/_layouts/*",
+    "www/_posts/*",
+    "www/_talks/*",
+    "www/*.html",
+    "www/*.html.twig"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

www/_layouts/default.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title }}</title>
     <link href="{{base}}src/landing-page.v2.css" rel="stylesheet">
-    <link href="{{base}}src/tailwind-2.0.3.min.css" rel="stylesheet">
+    <link href="{{base}}src/tailwind.min.css" rel="stylesheet">
 {# always include javascript except for index and blog posts #}
 {% if page.url != "/." and not (page.url matches "#/.*/#") %}
     <script async src="{{base}}src/app.v2.js"></script>