added Tailwindcss

added gem 'gravatar_image_tag'
replaced .postcssrc.yml with postcss.config.js

fix to babel.config.js (see rails/webpacker#2109 (comment))
add app/javascript/styles/base.css with tailwind imports
add stylesheet_pack_tag 'base' to app layout
add resolve_paths to config/webpacker.yml
add postcss-preset-env, and remove postcss plugins it encompasses
play with some example tailwind styles on app/views/pages/hello.html.slim

Gemfile

@@ -50,7 +50,8 @@ gem "slim-rails"
 gem "redcarpet"
 # Stacic Pages
 gem 'high_voltage'
-
+# Avatars
+gem 'gravatar_image_tag'
 
 ############################################################################
 # Deployment

Gemfile.lock

@@ -108,6 +108,7 @@ GEM
     get_process_mem (0.2.3)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
+    gravatar_image_tag (1.2.0)
     guard (2.15.0)
       formatador (>= 0.2.4)
       listen (>= 2.7, < 4.0)
@@ -131,7 +132,7 @@ GEM
     i18n (1.6.0)
       concurrent-ruby (~> 1.0)
     io-like (0.3.0)
-    jaro_winkler (1.5.2)
+    jaro_winkler (1.5.3)
     jbuilder (2.9.1)
       activesupport (>= 4.2.0)
     jquery-rails (4.3.5)
@@ -161,7 +162,7 @@ GEM
     mini_mime (1.0.1)
     mini_portile2 (2.4.0)
     minitest (5.11.3)
-    msgpack (1.2.10)
+    msgpack (1.3.0)
     nenv (0.3.0)
     nio4r (2.3.1)
     nokogiri (1.10.3)
@@ -344,6 +345,7 @@ DEPENDENCIES
   derailed_benchmarks
   figaro
   foreman
+  gravatar_image_tag
   guard-rspec
   high_voltage
   html2slim

app/javascript/controllers/index.js

@@ -1,9 +1,16 @@
 // Load all the controllers within this directory and all subdirectories. 
 // Controller files must be named *_controller.js.
 
-import { Application } from "stimulus"
-import { definitionsFromContext } from "stimulus/webpack-helpers"
+import {
+  Application
+} from "stimulus"
+import {
+  definitionsFromContext
+} from "stimulus/webpack-helpers"
 
 const application = Application.start()
 const context = require.context("controllers", true, /_controller\.js$/)
 application.load(definitionsFromContext(context))
+
+
+console.log("controllers/index")

app/javascript/packs/application.js

@@ -18,3 +18,4 @@
 console.log('Hello World from Webpacker')
 
 import "controllers"
+import '../styles/base.css'

app/javascript/src/tailwind.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {}
+  },
+  variants: {},
+  plugins: []
+}

app/javascript/styles/base.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

app/views/layouts/application.html.slim

@@ -4,8 +4,9 @@ html
     title
       | Mefkit
     = csrf_meta_tags
-    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
     = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
+    = stylesheet_pack_tag 'base', 'data-turbolinks-track': 'reload'
+  body.bg-orange-100
+    .container.mx-auto.mt-2
+      = yield
     = javascript_pack_tag 'application'
-  body
-    = yield

app/views/pages/hello.html.slim

@@ -1 +1,10 @@
-h1 Hello World
+.bg-white.mx-auto.max-w-sm.shadow-lg.rounded-lg.border.border-orange-400.p-6.overflow-hidden class="md:flex"
+  = gravatar_image_tag('lastobelus@mac.com', alt: 'Michael Johnston', class: "block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0", gravatar: {size: 96})
+  .text-center.sm:text-left.sm:flex-grow
+    .mb-4
+      p.text-xl.leading-tight.text-gray-700 Michael Johnston
+      p.text-sm.leading-tight.text-gray-500 Developer at Metafeat Apps.
+    div
+      button.text-xs.font-semibold.text-teal-700.rounded-full.px-4.py-1.leading-normal.bg-teal-100.border.border-teal-700.shadow class="hover:bg-teal-700 hover:text-white"
+        | Message
+

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
   var validEnv = ['development', 'test', 'production']
   var currentEnv = api.env()
   var isDevelopmentEnv = api.env('development')
@@ -8,10 +8,10 @@ module.exports = function(api) {
   if (!validEnv.includes(currentEnv)) {
     throw new Error(
       'Please specify a valid `NODE_ENV` or ' +
-        '`BABEL_ENV` environment variables. Valid values are "development", ' +
-        '"test", and "production". Instead, received: ' +
-        JSON.stringify(currentEnv) +
-        '.'
+      '`BABEL_ENV` environment variables. Valid values are "development", ' +
+      '"test", and "production". Instead, received: ' +
+      JSON.stringify(currentEnv) +
+      '.'
     )
   }
 
@@ -58,7 +58,7 @@ module.exports = function(api) {
         {
           helpers: false,
           regenerator: true,
-          corejs: 3
+          corejs: false
         }
       ],
       [
@@ -69,4 +69,4 @@ module.exports = function(api) {
       ]
     ].filter(Boolean)
   }
-}
+}

config/initializers/gravatar_image_tag.rb

@@ -0,0 +1,8 @@
+GravatarImageTag.configure do |config|
+  config.default_image = nil   # Set this to use your own default gravatar image rather then serving up Gravatar's default image [ 'http://example.com/images/default_gravitar.jpg', :identicon, :monsterid, :wavatar, 404 ].
+  config.filetype = nil   # Set this if you require a specific image file format ['gif', 'jpg' or 'png'].  Gravatar's default is png
+  config.include_size_attributes = false  # The height and width attributes of the generated img will be set to avoid page jitter as the gravatars load.  Set to false to leave these attributes off.
+  config.rating = nil   # Set this if you change the rating of the images that will be returned ['G', 'PG', 'R', 'X']. Gravatar's default is G
+  config.size = nil   # Set this to globally set the size of the gravatar image returned (1..512). Gravatar's default is 80
+  config.secure = true # Set this to true if you require secure images on your pages.
+end

config/webpacker.yml

@@ -10,8 +10,10 @@ default: &default
   webpack_compile_output: false
 
   # Additional paths webpack should lookup modules
-  # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  resolved_paths: [
+    'app/javascript/src',
+    'app/javascript/styles'
+  ]
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false

package.json

@@ -4,6 +4,9 @@
     "stimulus": "^1.1.1"
   },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^1.2.0",
+    "postcss-preset-env": "^6.6.0",
+    "tailwindcss": "^1.0.4",
     "webpack-dev-server": "^3.4.1"
   }
-}
+}

postcss.config.js

@@ -0,0 +1,32 @@
+let environment = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('tailwindcss')('./app/javascript/src/tailwind.js'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}
+
+// Only run PurgeCSS in production (you can also add staging here)
+if (process.env.RAILS_ENV === "production") {
+  environment.plugins.push(
+    require('@fullhuman/postcss-purgecss')({
+      content: [
+        './app/**/*.html.erb',
+        './app/**/*.html.slim',
+        './app/helpers/**/*.rb',
+        './app/javascript/**/*.js',
+        './app/javascript/**/*.js.erb',
+        './app/javascript/**/*.vue',
+        './app/javascript/**/*.jsx',
+      ],
+      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
+    })
+  )
+}
+module.exports = environment

public/packs/manifest.json

@@ -1,13 +1,13 @@
 {
-  "application.js": "/packs/js/application-ef32c4d9667bff13c780.js",
-  "application.js.map": "/packs/js/application-ef32c4d9667bff13c780.js.map",
+  "application.js": "/packs/js/application-8f025eb638b36edd7c81.js",
+  "application.js.map": "/packs/js/application-8f025eb638b36edd7c81.js.map",
   "entrypoints": {
     "application": {
       "js": [
-        "/packs/js/application-ef32c4d9667bff13c780.js"
+        "/packs/js/application-8f025eb638b36edd7c81.js"
       ],
       "js.map": [
-        "/packs/js/application-ef32c4d9667bff13c780.js.map"
+        "/packs/js/application-8f025eb638b36edd7c81.js.map"
       ]
     }
   }

todos/main.todo

@@ -46,19 +46,11 @@ Base:
     ☐ action cable badge hello world with cypress test
     ☐ cypress CI
 
-  Static Pages:
-    ✔ add high-voltage @done(2019-06-20 19:04)
-
-  Users:
-    ☐ devise setup
-    ☐ administrate setup
-    ☐ login with google
-    ☐ login with github
-    ☐ login with facebook
-
   GUI/CSS:
-    ☐ add tailwind @next
-      ☐ tailwind helloworld on home & hello pages
+    ✔ add tailwind @done(2019-06-24 11:31)
+      ✔ tailwind helloworld on hello pages @done(2019-06-24 10:24)
+      ✔ tailwind on home page @done(2019-06-24 11:30)
+      ✘ spec that tailwind is loading @cancelled(2019-06-24 11:31)
     ☐ choose a powerful widget platform
       ☐ must be themeable
       ☐ must be built on a standard
@@ -69,6 +61,22 @@ Base:
     ☐ evaluate https://flatpickr.js.org (see https://github.com/adrienpoly/rails_stimulus_flatpickr)
 
 
+  Assets:
+    ☐ remove asset pipeline (sprockets)
+      https://medium.com/michelada-io/from-the-asset-pipeline-to-webpack-ce5a4bc323a9
+      https://medium.com/@coorasse/goodbye-sprockets-welcome-webpacker-3-0-ff877fb8fa79
+
+  Static Pages:
+    ✔ add high-voltage @done(2019-06-20 19:04)
+
+  Users:
+    ☐ devise setup @next
+    ☐ administrate setup
+    ☐ login with google
+    ☐ login with github
+    ☐ login with facebook
+
+
   Templates/Components:
     do evil martians tutorial
     evaluate komposable/komponent
@@ -115,6 +123,10 @@ Base:
   Deployment:
     ☐ research economical alternatives to heroku for hosting multiple rails experiments, and choose one
     ☐ invest $50/month on hosting & ensure CI/CD of the base on that hosting
+    CI of Deployment:
+      spec that css is loaded by checking the style of an element
+      spec that tailwind is minimized with postcss-purgecss
+
 
   Development: (2)
     investigate and use [Overmind](https://github.com/DarthSim/overmind)