tailwindcss

.gitignore

@@ -33,3 +33,6 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+/app/assets/builds/*
+!/app/assets/builds/.keep

Gemfile

@@ -74,3 +74,5 @@ group :test do
   gem "selenium-webdriver"
   gem "webdrivers"
 end
+
+gem "tailwindcss-rails", "~> 2.0"

Gemfile.lock

@@ -187,6 +187,8 @@ GEM
     sqlite3 (1.6.3-x86_64-linux)
     stimulus-rails (1.2.1)
       railties (>= 6.0.0)
+    tailwindcss-rails (2.0.29-x86_64-linux)
+      railties (>= 6.0.0)
     thor (1.2.2)
     timeout (0.3.2)
     turbo-rails (1.4.0)
@@ -229,6 +231,7 @@ DEPENDENCIES
   sprockets-rails
   sqlite3 (~> 1.4)
   stimulus-rails
+  tailwindcss-rails (~> 2.0)
   turbo-rails
   tzinfo-data
   web-console

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: bin/rails tailwindcss:watch

README.md

@@ -7,3 +7,12 @@
 * [x] Rufo Formatter
 * [x] Semantic Logging (efficient for dark theme)
 * [x] Max duration to complete in order to prevent long action
+* [x] tailwindcss-rails
+
+## Interesting Gems to try out
+
+* [ ] Devise
+  * [ ] **Noticed**
+  * [ ] CANCANCAN
+* [ ] AASM - State machines
+* [ ] SimpleForm

app/assets/config/manifest.js

@@ -2,3 +2,4 @@
 //= link_directory ../stylesheets .css
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
+//= link_tree ../builds

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+

app/controllers/main_controller.rb

@@ -1,10 +1,11 @@
 class MainController < ApplicationController
   def home
+    logger.info "efficient logging for dark theme"
   end
 
   def about
     logger.debug "some debugging info"
-    logger.info "efficient logging for dark theme"
+    logger.info "line1\nline2\nline3"
     logger.warn "a warning"
     logger.error "an error"
     sleep 3

app/javascript/application.js

@@ -1,3 +1,7 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+
+// The two following lines disable Turbo on the whole application
+// import { Turbo } from "@hotwired/turbo-rails"
+// Turbo.session.drive = false

app/views/layouts/application.html.erb

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>

app/views/main/home.html.erb

@@ -1,2 +1,5 @@
 <h1>Main#home</h1>
 <p>Find me in app/views/main/home.html.erb</p>
+<h1 class="text-3xl font-bold underline text-red-400">
+  Hello world!
+</h1>

bin/dev

@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+
+if ! gem list foreman -i --silent; then
+  echo "Installing foreman..."
+  gem install foreman
+fi
+
+exec foreman start -f Procfile.dev "$@"

config/tailwind.config.js

@@ -0,0 +1,23 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+
+module.exports = {
+  content: [
+    './public/*.html',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.js',
+    './app/views/**/*.{erb,haml,html,slim}'
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/aspect-ratio'),
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/container-queries'),
+  ]
+}

lib/formatters/basic_formatter.rb

@@ -12,6 +12,7 @@ class BasicFormatter < SemanticLogger::Formatters::Color
             info: SemanticLogger::AnsiColors::GREEN,
             warn: SemanticLogger::AnsiColors::YELLOW,
           ))
+    @time_format = nil if File.exist?(File.join(Rails.root, "Procfile.dev"))
   end
 
   def time
@@ -65,4 +66,16 @@ class BasicFormatter < SemanticLogger::Formatters::Color
       "-- #{ANSI_REVERSED_ERROR}#{log.exception.class}: #{log.exception.message}#{color_map.clear}\n\n"
     end
   end
+
+  def call(log, logger)
+    self.color = color_map[log.level]
+    self.log = log
+    self.logger = logger
+
+    if @time_format
+      [time, level, process_info, tags, named_tags, duration, name, message, payload, exception].compact.join(" ")
+    else
+      [level, process_info, tags, named_tags, duration, name, message, payload, exception].compact.join(" ")
+    end
+  end
 end