Draft: switch tailwindcss

Gemfile

@@ -15,11 +15,11 @@ gem "pg", "~> 1.1"
 # Use the Puma web server [https://github.com/puma/puma]
 gem "puma", "~> 5.0"
 
-# Bundle and transpile JavaScript [https://github.com/rails/jsbundling-rails]
-gem "jsbundling-rails"
+# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
+gem "importmap-rails"
 
-# Bundle and process CSS [https://github.com/rails/cssbundling-rails]
-gem "cssbundling-rails"
+# Use Tailwind CSS [https://github.com/rails/tailwindcss-rails]
+gem "tailwindcss-rails"
 
 # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem "jbuilder"

Gemfile.lock

@@ -91,8 +91,6 @@ GEM
       rest-client (>= 2.0.0)
     concurrent-ruby (1.1.9)
     crass (1.0.6)
-    cssbundling-rails (1.1.0)
-      railties (>= 6.0.0)
     debug (1.4.0)
       irb (>= 1.3.6)
       reline (>= 0.2.7)
@@ -143,15 +141,16 @@ GEM
     image_processing (1.12.2)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
+    importmap-rails (1.0.3)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
     io-console (0.5.9)
     io-wait (0.2.1)
     irb (1.3.7)
       reline (>= 0.2.7)
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-    jsbundling-rails (1.0.2)
-      railties (>= 6.0.0)
     jwt (2.2.3)
     loofah (2.14.0)
       crass (~> 1.0.2)
@@ -333,6 +332,14 @@ GEM
       sprockets (>= 3.0.0)
     stackprof (0.2.19)
     strscan (3.0.1)
+    tailwindcss-rails (2.0.7)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.0.7-aarch64-linux)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.0.7-arm64-darwin)
+      railties (>= 6.0.0)
+    tailwindcss-rails (2.0.7-x86_64-linux)
+      railties (>= 6.0.0)
     thor (1.2.1)
     timeout (0.2.0)
     tzinfo (2.0.4)
@@ -369,15 +376,14 @@ DEPENDENCIES
   bootsnap
   capybara
   cloudinary
-  cssbundling-rails
   debug
   dotenv-rails
   factory_bot_rails
   flamegraph
   heavens_door
   image_processing (~> 1.2)
+  importmap-rails
   jbuilder
-  jsbundling-rails
   meta-tags
   newrelic_rpm
   omniauth
@@ -398,6 +404,7 @@ DEPENDENCIES
   selenium-webdriver
   sprockets-rails
   stackprof
+  tailwindcss-rails
   tzinfo-data
   web-console
   webdrivers

Procfile.dev

@@ -1,3 +1,2 @@
-web: bin/rails server -p 3000 -b 0.0.0.0
-js: yarn build --watch
-css: yarn build:css --watch
+web: bin/rails server -b 0.0.0.0 -p 3000
+css: bin/rails tailwindcss:watch

app/assets/config/manifest.js

@@ -1,2 +1,5 @@
 //= link_tree ../images
+//= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js
 //= link_tree ../builds

app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
+@import 'actiontext.css';

app/javascript/application.js

@@ -1,11 +1,6 @@
-// Entry point for the build script in your package.json
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "trix"
 import "@rails/actiontext"
-import Rails from "@rails/ujs"
+import Rails from "@rails/ujs";
 
-import './src/bulma-navbar'
-import './src/bulma-notification'
-import './src/trix'
-import './src/highlight'
-
-Rails.start()
+Rails.start();

app/views/auths/show.html.erb

@@ -7,9 +7,9 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Noto+Sans+JP', media: 'all' %>
-    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+    <%= stylesheet_link_tag "tailwind", "inter-font" %>
     <%= stylesheet_link_tag "application" %>
+    <%= javascript_importmap_tags %>
   </head>
 
   <body>

app/views/layouts/application.html.erb

@@ -20,10 +20,9 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
-    <%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Noto+Sans+JP', media: 'all' %>
-    <%= javascript_include_tag "application" %>
+    <%= stylesheet_link_tag "tailwind", "inter-font" %>
     <%= stylesheet_link_tag "application" %>
-
+    <%= javascript_importmap_tags %>
     <%= auto_discovery_link_tag :atom, feed_url, title: 'Atom' %>
   </head>
 

bin/importmap

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"

config/importmap.rb

@@ -0,0 +1,6 @@
+# Pin npm packages by running ./bin/importmap
+
+pin "application", preload: true
+pin "trix"
+pin "@rails/actiontext", to: "actiontext.js"
+pin "@rails/ujs", to: "https://ga.jspm.io/npm:@rails/[email protected]/lib/assets/compiled/rails-ujs.js"

config/tailwind.config.js

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

spec/spec_helper.rb

@@ -12,7 +12,7 @@
 # the additional setup, and require it from the spec files that actually need
 # it.
 #
-# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
+# See https://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
 RSpec.configure do |config|
   # rspec-expectations config goes here. You can use an alternate
   # assertion/expectation library such as wrong or the stdlib/minitest
@@ -61,9 +61,7 @@
 
   # Limits the available syntax to the non-monkey patched syntax that is
   # recommended. For more details, see:
-  #   - http://rspec.info/blog/2012/06/rspecs-new-expectation-syntax/
-  #   - http://www.teaisaweso.me/blog/2013/05/27/rspecs-new-message-expectation-syntax/
-  #   - http://rspec.info/blog/2014/05/notable-changes-in-rspec-3/#zero-monkey-patching-mode
+  # https://relishapp.com/rspec/rspec-core/docs/configuration/zero-monkey-patching-mode
   config.disable_monkey_patching!
 
   # Many RSpec users commonly either run the entire suite or an individual