Migrate to tailwindcss

README.md

@@ -1,6 +1,6 @@
    [![Code Climate](https://codeclimate.com/github/shakacode/react-webpack-rails-tutorial/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react-webpack-rails-tutorial) [![Coverage Status](https://coveralls.io/repos/shakacode/react-webpack-rails-tutorial/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react-webpack-rails-tutorial?branch=master)
 
-# React, Redux, React-Bootstrap, ES7, Webpack, Ruby on Rails Demo
+# React, Redux, Tailwind CSS, ES7, Webpack, Ruby on Rails Demo
 
 * Server-Side Rendering of React via the [react_on_rails gem](https://github.com/shakacode/react_on_rails)
 * Live at [www.reactrails.com](http://www.reactrails.com/)
@@ -87,7 +87,7 @@ You can see this tutorial live here: [http://reactrails.com/](http://reactrails.
 + [Webpack](#webpack)
   + [Configuration Files](#configuration-files)
   + [Additional Resources](#additional-resources)
-+ [Sass, CSS Modules, and Twitter Bootstrap integration](#sass-css-modules-and-twitter-bootstrap-integration)
++ [Sass, CSS Modules, and Tailwind CSS integration](#sass-css-modules-and-tailwind-css-integration)
   + [Fonts with SASS](#fonts-with-sass)
 + [Process Management during Development](#process-management-during-development)
 + [Rendering with Express Server](#rendering-with-express-server)
@@ -116,8 +116,6 @@ See package.json and Gemfile for versions
 
 1. [react_on_rails gem](https://github.com/shakacode/react_on_rails/)
 1. [React](http://facebook.github.io/react/)
-1. [react-bootstrap](https://react-bootstrap.github.io/)
-1. [bootstrap-loader](https://www.npmjs.com/package/bootstrap-loader/)
 1. [Redux](https://github.com/reactjs/redux)
 1. [react-router](https://github.com/reactjs/react-router)
 1. [react-router-redux](https://github.com/reactjs/react-router-redux)
@@ -127,6 +125,7 @@ See package.json and Gemfile for versions
 1. [Heroku for Rails 7 deployment](https://devcenter.heroku.com/articles/getting-started-with-rails7)
 1. [Deployment to the ControlPlane](.controlplane/readme.md)
 1. [Turbolinks 5](https://github.com/turbolinks/turbolinks)
+1. [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss)
 
 ## Basic Demo Setup
 
@@ -181,7 +180,10 @@ _Converted to use Shakapacker webpack configuration_.
 - [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/)
 - Good overview: [Pete Hunt's Webpack Howto](https://github.com/petehunt/webpack-howto)
 
-## Sass, CSS Modules, and Twitter Bootstrap Integration
+## Sass, CSS Modules, and Tailwind CSS Integration
+This example project uses mainly Tailwind CSS for styling.
+Besides this, it also demonstrates Sass and CSS modules, particularly for some CSS transitions.
+
 We're using Webpack to handle Sass assets so that we can use CSS modules. The best way to understand how we're handling assets is to close follow this example. We'll be working on more docs soon. If you'd like to give us a hand, that's a great way to learn about this!
 
 For example in [client/app/bundles/comments/components/CommentBox/CommentBox.jsx](client/app/bundles/comments/components/CommentBox/CommentBox.jsx), see how we use standard JavaScript import syntax to refer to class names that come from CSS modules:

app/views/comments/_form.html.erb

@@ -1,6 +1,6 @@
-<%= form_for(comment) do |f| %>
+<%= form_for(comment, html: { class: "flex flex-col gap-4" }) do |f| %>
   <% if comment.errors.any? %>
-    <div id="error_explanation">
+    <div id="error_explanation" class="prose bg-pink-100 p-4 mb-4 border border-pink-200 rounded text-red-800 prose-strong:text-red-800 prose-ul:my-1">
       <h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment from being saved:</h2>
 
       <ul>
@@ -13,13 +13,13 @@
 
   <div class="field">
     <%= f.label :author, 'Your Name' %><br>
-    <%= f.text_field :author %>
+    <%= f.text_field :author, class: "px-3 py-1 leading-4 border border-gray-300 rounded" %>
   </div>
   <div class="field">
     <%= f.label :text, 'Say something using markdown...' %><br>
-    <%= f.text_area :text %>
+    <%= f.text_area :text, class: "px-3 py-1 leading-4 border border-gray-300 rounded" %>
   </div>
   <div class="actions">
-    <%= f.submit 'Post' %>
+    <%= f.submit 'Post', class: "self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800 cursor-pointer" %>
   </div>
 <% end %>

app/views/comments/edit.html.erb

@@ -1,4 +1,4 @@
-<h1>Editing Comment</h1>
+<h2>Editing Comment</h2>
 
 <%= render 'form', comment: @comment %>
 

app/views/comments/index.html.erb

@@ -1,36 +1,37 @@
-<h1>Using Classic Rails 4.2 "generate scaffold"</h1>
-<hr/>
+  <h2>
+    Using Classic Rails 4.2 "generate scaffold"
+  </h2>
 
-<p id="notice"><%= notice %></p>
+<div class="prose max-w-full prose-a:text-sky-700 prose-li:my-0 prose-code:text-rose-600 prose-code:bg-yellow-100 prose-headings:text-gray-700">
+  <% if notice %>
+    <p id="notice" class="bg-success bg-green-100 px-6 py-4"><%= notice %></p>
+  <% end %>
 
-<h2>Listing Comments</h2>
+  <h2>Listing Comments</h2>
 
-<table data-turbo="true">
-  <thead>
-    <tr>
-      <th>Author</th>
-      <th>Text</th>
-      <th colspan="3"></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% @comments.each do |comment| %>
-      <tr>
-        <td><%= comment.author %></td>
-        <td><%= comment.text %></td>
-      </tr>
-      <tr>
-        <td><%= link_to 'Show', comment %></td>
-        <td><%= link_to 'Edit', edit_comment_path(comment) %></td>
-      </tr>
+  <table data-turbo="true">
+    <thead>
       <tr>
-        <td><%= button_to 'Destroy', comment, method: :delete, data: { turbo_confirm: 'Are you sure?' } %></td>
+        <th>Author</th>
+        <th>Text</th>
+        <th></th>
       </tr>
-    <% end %>
-  </tbody>
-</table>
+    </thead>
 
-<br>
+    <tbody>
+      <% @comments.each do |comment| %>
+        <tr>
+          <td><%= comment.author %></td>
+          <td><%= markdown_to_html(comment.text) %></td>
+          <td class="flex flex-col lg:flex-row gap-2">
+            <%= link_to 'Show', comment %>
+            <%= link_to 'Edit', edit_comment_path(comment) %>
+            <%= button_to 'Destroy', comment, method: :delete, data: { turbo_confirm: 'Are you sure?' }, class: "text-red-500 cursor-pointer" %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
 
-<%= link_to 'New Comment', new_comment_path %>
+  <%= link_to 'New Comment', new_comment_path, class: "not-prose px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800" %>
+</div>

app/views/comments/new.html.erb

@@ -1,4 +1,4 @@
-<h1>New Comment</h1>
+<h2>New Comment</h2>
 
 <%= render 'form', comment: @comment %>
 

app/views/comments/show.html.erb

@@ -1,5 +1,7 @@
-<div class="comment">
-  <p id="notice"><%= notice %></p>
+<div class="comment my-4">
+  <% if notice %>
+    <p id="notice" class="bg-success bg-green-100 px-6 py-4"><%= notice %></p>
+  <% end %>
 
   <p class="js-comment-author">
     <strong>Author:</strong>

app/views/comments/stimulus.html.erb

@@ -1,14 +1,18 @@
 <h2>Stimulus + Rails Backend (with <a href="https://github.com/shakacode/react_on_rails">react_on_rails gem</a>)</h2>
-  <%= render "pages/header" %>
-<div class="container" data-controller="comments">
+
+<%= render "pages/header" %>
+
+<div class="prose max-w-none prose-a:text-sky-700 prose-li:my-0" data-controller="comments">
   <h2>Comments</h2>
+
   <ul>
     <li><a class="refresh-btn link-primary" data-action="click->comments#refreshCommentList">Force Refresh of All Comments.</a></li>
     <li>Text supports Github Flavored Markdown.</li>
     <li>Comments older than 24 hours are deleted.</li>
     <li>Name is preserved. Text is reset, between submits</li>
     <li>To see Action Cable instantly update two browsers, open two browsers and submit a comment!</li>
   </ul>
+
   <div>
     <%= render "comments/turbo/horizontal_form" %>
     <%= render "comments/turbo/comment_list" %>

app/views/comments/turbo/_comment_list.html.erb

@@ -4,7 +4,7 @@
   <div data-comments-target="commentList">
     <% @comments.each do |comment| %>
       <div>
-        <h2><%= comment.author %></h2>
+        <h2 class="text-blue-800"><%= comment.author %></h2>
         <span><%= markdown_to_html(comment.text) %></span>
       </div>
     <% end %>

app/views/comments/turbo/_error_notice.html.erb

@@ -1,4 +1,4 @@
-<div class="alert alert-danger hidden" data-comments-target="alertDiv">
+<div class="bg-pink-100 p-4 mb-4 border border-pink-200 rounded text-red-800 prose-strong:text-red-800 prose-ul:my-1 hidden" data-comments-target="alertDiv">
   <strong>Your comment was not saved!</strong>
   <ul data-comments-target="errorList">
   </ul>

app/views/comments/turbo/_horizontal_form.html.erb

@@ -1,28 +1,23 @@
 <%= turbo_frame_tag "form_tabs", data: { turbo: true } do %>
   <%= render "comments/turbo/error_notice" %>
   <%= render "comments/turbo/tabs" %>
+
   <hr />
-  <%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-horizontal") do |f| %>
-    <div class="form-group">
-      <div class="col-sm-2">
-        <%= f.label "Name", class: "form-label pull-right" %>
-      </div>
-      <div class="col-sm-10">
-        <%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "form-control", placeholder: "Your Name" %>
-      </div>
+
+  <%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-horizontal flex flex-col gap-4") do |f| %>
+    <div class="form-group flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
+        <%= f.label "Name", class: "w-full lg:w-2/12 lg:text-end shrink-0" %>
+        <%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded w-full", placeholder: "Your Name" %>
     </div>
-    <div class="form-group">
-      <div class="col-sm-2">
-        <%= f.label :text, class: "form-label pull-right" %>
-      </div>
-      <div class="col-sm-10">
-        <%= f.text_field :text, data: { comments_target: "commentText" }, class: "form-control", placeholder: "Say something using markdown..." %>
-      </div>
+
+    <div class="form-group flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
+        <%= f.label :text, class: "w-full lg:w-2/12 lg:text-end shrink-0" %>
+        <%= f.text_field :text, data: { comments_target: "commentText" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded w-full", placeholder: "Say something using markdown..." %>
     </div>
-    <div class="form-group">
-      <div class="col-sm-10 col-sm-offset-2">
-        <%= f.submit "Post", class: "btn btn-primary" %>
-      </div>
+
+    <div class="form-group flex flex-col gap-0 lg:gap-4 lg:flex-row">
+      <div class="hidden lg:block lg:w-2/12 grow-0"></div>
+      <%= f.submit "Post", class: "self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800" %>
     </div>
   <% end %>
 <% end %>

app/views/comments/turbo/_inline_form.html.erb

@@ -1,18 +1,22 @@
 <%= turbo_frame_tag "form_tabs", data: { turbo: true } do %>
   <%= render "comments/turbo/error_notice" %>
   <%= render "comments/turbo/tabs" %>
+
   <hr />
-  <%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-inline") do |f| %>
-    <div class="form-group">
+
+  <%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-inline flex flex-col lg:flex-row flex-wrap gap-4") do |f| %>
+    <div class="flex gap-2 items-center">
       <%= f.label "Name", class: "form-label mr-15" %>
-      <%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "form-control", placeholder: "Your Name" %>
+      <%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded", placeholder: "Your Name" %>
     </div>
-    <div class="form-group ml-15 mr-15">
+
+    <div class="flex gap-2 items-center">
       <%= f.label :text, class: "form-label mr-15" %>
-      <%= f.text_field :text, data: { comments_target: "commentText" }, class: "form-control w-50", placeholder: "Say something using markdown..." %>
+      <%= f.text_field :text, data: { comments_target: "commentText" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded", placeholder: "Say something using markdown..." %>
     </div>
-    <div class="form-group">
-      <%= f.submit "Post", class: "btn btn-primary" %>
+
+    <div class="flex gap-2">
+      <%= f.submit "Post", class: "self-start px-3 py-1 font-semibold border-0 rounded text-sky-50 bg-sky-600 hover:bg-sky-800" %>
     </div>
   <% end %>
 <% end %>