Adds Tailwind

.gitignore

@@ -34,3 +34,5 @@ yarn-debug.log*
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
+
+frontend/styles/jit-refresh.css

Rakefile

@@ -27,11 +27,13 @@ end
 namespace :frontend do
   desc "Build the frontend with esbuild for deployment"
   task :build do
+    sh "touch frontend/styles/jit-refresh.css"
     sh "yarn run esbuild"
   end
 
   desc "Watch the frontend with esbuild during development"
   task :dev do
+    sh "touch frontend/styles/jit-refresh.css"
     sh "yarn run esbuild-dev"
   rescue Interrupt
   end

frontend/styles/index.css

@@ -1,3 +1,12 @@
+/* If you need to add @import statements, do so up here */
+
+@import "jit-refresh.css"; /* triggers frontend rebuilds */
+
+/* Set up Tailwind imports */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   --body-background: #f2f2f2;
   --body-color: #444;

package.json

@@ -14,6 +14,7 @@
     "postcss-import": "^15.1.0",
     "postcss-load-config": "^4.0.1",
     "postcss-preset-env": "^9.1.2",
-    "read-cache": "^1.0.0"
+    "read-cache": "^1.0.0",
+    "tailwindcss": "^3.4.1"
   }
 }

plugins/builders/tailwind_jit.rb

@@ -0,0 +1,16 @@
+class Builders::TailwindJit < SiteBuilder
+  def build
+    hook :site, :pre_reload do |_, paths|
+      # Skip if paths are not defined (e.g: from console reload)
+      next unless paths
+
+      # Don't trigger refresh if it's a frontend-only change
+      next if paths.length == 1 && paths.first.ends_with?("manifest.json")
+
+      # Save out a comment file to trigger Tailwind's JIT
+      refresh_file = site.in_root_dir("frontend", "styles", "jit-refresh.css")
+      File.write refresh_file, "/* #{Time.now.to_i} */"
+      throw :halt # don't continue the build, wait for watcher rebuild
+    end
+  end
+end

postcss.config.js

@@ -1,11 +1,12 @@
-module.exports = {  
+module.exports = {
   plugins: {
+    'tailwindcss': {},
     'postcss-flexbugs-fixes': {},
     'postcss-preset-env': {
       autoprefixer: {
         flexbox: 'no-2009'
       },
-      stage: 3
+      stage: 2
     }
   }
-}
+}

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/**/*.{html,md,liquid,erb,serb,rb}',
+    './frontend/javascript/**/*.js',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+