Skip to content

Commit 2c8073b

Browse files
ahangarhaahangarha
authored
Migrate to tailwindcss (#553)
1 parent 9c3bb2e commit 2c8073b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+715
-787
lines changed

‎.bootstraprc

-123
This file was deleted.

‎README.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[![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)
22

3-
# React, Redux, React-Bootstrap, ES7, Webpack, Ruby on Rails Demo
3+
# React, Redux, Tailwind CSS, ES7, Webpack, Ruby on Rails Demo
44

55
* Server-Side Rendering of React via the [react_on_rails gem](https://github.com/shakacode/react_on_rails)
66
* 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.
8787
+ [Webpack](#webpack)
8888
+ [Configuration Files](#configuration-files)
8989
+ [Additional Resources](#additional-resources)
90-
+ [Sass, CSS Modules, and Twitter Bootstrap integration](#sass-css-modules-and-twitter-bootstrap-integration)
90+
+ [Sass, CSS Modules, and Tailwind CSS integration](#sass-css-modules-and-tailwind-css-integration)
9191
+ [Fonts with SASS](#fonts-with-sass)
9292
+ [Process Management during Development](#process-management-during-development)
9393
+ [Rendering with Express Server](#rendering-with-express-server)
@@ -116,8 +116,6 @@ See package.json and Gemfile for versions
116116

117117
1. [react_on_rails gem](https://github.com/shakacode/react_on_rails/)
118118
1. [React](http://facebook.github.io/react/)
119-
1. [react-bootstrap](https://react-bootstrap.github.io/)
120-
1. [bootstrap-loader](https://www.npmjs.com/package/bootstrap-loader/)
121119
1. [Redux](https://github.com/reactjs/redux)
122120
1. [react-router](https://github.com/reactjs/react-router)
123121
1. [react-router-redux](https://github.com/reactjs/react-router-redux)
@@ -127,6 +125,7 @@ See package.json and Gemfile for versions
127125
1. [Heroku for Rails 7 deployment](https://devcenter.heroku.com/articles/getting-started-with-rails7)
128126
1. [Deployment to the ControlPlane](.controlplane/readme.md)
129127
1. [Turbolinks 5](https://github.com/turbolinks/turbolinks)
128+
1. [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss)
130129

131130
## Basic Demo Setup
132131

@@ -181,7 +180,10 @@ _Converted to use Shakapacker webpack configuration_.
181180
- [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/)
182181
- Good overview: [Pete Hunt's Webpack Howto](https://github.com/petehunt/webpack-howto)
183182
184-
## Sass, CSS Modules, and Twitter Bootstrap Integration
183+
## Sass, CSS Modules, and Tailwind CSS Integration
184+
This example project uses mainly Tailwind CSS for styling.
185+
Besides this, it also demonstrates Sass and CSS modules, particularly for some CSS transitions.
186+
185187
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!
186188
187189
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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<%= form_for(comment) do |f| %>
1+
<%= form_for(comment, html: { class: "flex flex-col gap-4" }) do |f| %>
22
<% if comment.errors.any? %>
3-
<div id="error_explanation">
3+
<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">
44
<h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment from being saved:</h2>
55

66
<ul>
@@ -13,13 +13,13 @@
1313

1414
<div class="field">
1515
<%= f.label :author, 'Your Name' %><br>
16-
<%= f.text_field :author %>
16+
<%= f.text_field :author, class: "px-3 py-1 leading-4 border border-gray-300 rounded" %>
1717
</div>
1818
<div class="field">
1919
<%= f.label :text, 'Say something using markdown...' %><br>
20-
<%= f.text_area :text %>
20+
<%= f.text_area :text, class: "px-3 py-1 leading-4 border border-gray-300 rounded" %>
2121
</div>
2222
<div class="actions">
23-
<%= f.submit 'Post' %>
23+
<%= 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" %>
2424
</div>
2525
<% end %>

‎app/views/comments/edit.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h1>Editing Comment</h1>
1+
<h2>Editing Comment</h2>
22

33
<%= render 'form', comment: @comment %>
44

‎app/views/comments/index.html.erb

+30-29
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
1-
<h1>Using Classic Rails 4.2 "generate scaffold"</h1>
2-
<hr/>
1+
<h2>
2+
Using Classic Rails 4.2 "generate scaffold"
3+
</h2>
34

4-
<p id="notice"><%= notice %></p>
5+
<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">
6+
<% if notice %>
7+
<p id="notice" class="bg-success bg-green-100 px-6 py-4"><%= notice %></p>
8+
<% end %>
59

6-
<h2>Listing Comments</h2>
10+
<h2>Listing Comments</h2>
711

8-
<table data-turbo="true">
9-
<thead>
10-
<tr>
11-
<th>Author</th>
12-
<th>Text</th>
13-
<th colspan="3"></th>
14-
</tr>
15-
</thead>
16-
17-
<tbody>
18-
<% @comments.each do |comment| %>
19-
<tr>
20-
<td><%= comment.author %></td>
21-
<td><%= comment.text %></td>
22-
</tr>
23-
<tr>
24-
<td><%= link_to 'Show', comment %></td>
25-
<td><%= link_to 'Edit', edit_comment_path(comment) %></td>
26-
</tr>
12+
<table data-turbo="true">
13+
<thead>
2714
<tr>
28-
<td><%= button_to 'Destroy', comment, method: :delete, data: { turbo_confirm: 'Are you sure?' } %></td>
15+
<th>Author</th>
16+
<th>Text</th>
17+
<th></th>
2918
</tr>
30-
<% end %>
31-
</tbody>
32-
</table>
19+
</thead>
3320

34-
<br>
21+
<tbody>
22+
<% @comments.each do |comment| %>
23+
<tr>
24+
<td><%= comment.author %></td>
25+
<td><%= markdown_to_html(comment.text) %></td>
26+
<td class="flex flex-col lg:flex-row gap-2">
27+
<%= link_to 'Show', comment %>
28+
<%= link_to 'Edit', edit_comment_path(comment) %>
29+
<%= button_to 'Destroy', comment, method: :delete, data: { turbo_confirm: 'Are you sure?' }, class: "text-red-500 cursor-pointer" %>
30+
</td>
31+
</tr>
32+
<% end %>
33+
</tbody>
34+
</table>
3535

36-
<%= link_to 'New Comment', new_comment_path %>
36+
<%= 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" %>
37+
</div>

‎app/views/comments/new.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<h1>New Comment</h1>
1+
<h2>New Comment</h2>
22

33
<%= render 'form', comment: @comment %>
44

‎app/views/comments/show.html.erb

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
<div class="comment">
2-
<p id="notice"><%= notice %></p>
1+
<div class="comment my-4">
2+
<% if notice %>
3+
<p id="notice" class="bg-success bg-green-100 px-6 py-4"><%= notice %></p>
4+
<% end %>
35

46
<p class="js-comment-author">
57
<strong>Author:</strong>

‎app/views/comments/stimulus.html.erb

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

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div data-comments-target="commentList">
55
<% @comments.each do |comment| %>
66
<div>
7-
<h2><%= comment.author %></h2>
7+
<h2 class="text-blue-800"><%= comment.author %></h2>
88
<span><%= markdown_to_html(comment.text) %></span>
99
</div>
1010
<% end %>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="alert alert-danger hidden" data-comments-target="alertDiv">
1+
<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">
22
<strong>Your comment was not saved!</strong>
33
<ul data-comments-target="errorList">
44
</ul>

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

+14-19
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
<%= turbo_frame_tag "form_tabs", data: { turbo: true } do %>
22
<%= render "comments/turbo/error_notice" %>
33
<%= render "comments/turbo/tabs" %>
4+
45
<hr />
5-
<%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-horizontal") do |f| %>
6-
<div class="form-group">
7-
<div class="col-sm-2">
8-
<%= f.label "Name", class: "form-label pull-right" %>
9-
</div>
10-
<div class="col-sm-10">
11-
<%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "form-control", placeholder: "Your Name" %>
12-
</div>
6+
7+
<%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-horizontal flex flex-col gap-4") do |f| %>
8+
<div class="form-group flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
9+
<%= f.label "Name", class: "w-full lg:w-2/12 lg:text-end shrink-0" %>
10+
<%= 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" %>
1311
</div>
14-
<div class="form-group">
15-
<div class="col-sm-2">
16-
<%= f.label :text, class: "form-label pull-right" %>
17-
</div>
18-
<div class="col-sm-10">
19-
<%= f.text_field :text, data: { comments_target: "commentText" }, class: "form-control", placeholder: "Say something using markdown..." %>
20-
</div>
12+
13+
<div class="form-group flex flex-col gap-0 items-center lg:gap-4 lg:flex-row">
14+
<%= f.label :text, class: "w-full lg:w-2/12 lg:text-end shrink-0" %>
15+
<%= 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..." %>
2116
</div>
22-
<div class="form-group">
23-
<div class="col-sm-10 col-sm-offset-2">
24-
<%= f.submit "Post", class: "btn btn-primary" %>
25-
</div>
17+
18+
<div class="form-group flex flex-col gap-0 lg:gap-4 lg:flex-row">
19+
<div class="hidden lg:block lg:w-2/12 grow-0"></div>
20+
<%= 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" %>
2621
</div>
2722
<% end %>
2823
<% end %>

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

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
<%= turbo_frame_tag "form_tabs", data: { turbo: true } do %>
22
<%= render "comments/turbo/error_notice" %>
33
<%= render "comments/turbo/tabs" %>
4+
45
<hr />
5-
<%= form_with(model: @comment, data: { action: "turbo:submit-end->comments#resetText" }, class: "form-inline") do |f| %>
6-
<div class="form-group">
6+
7+
<%= 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| %>
8+
<div class="flex gap-2 items-center">
79
<%= f.label "Name", class: "form-label mr-15" %>
8-
<%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "form-control", placeholder: "Your Name" %>
10+
<%= f.text_field :author, data: { comments_target: "commentAuthor" }, class: "px-3 py-1 leading-4 border border-gray-300 rounded", placeholder: "Your Name" %>
911
</div>
10-
<div class="form-group ml-15 mr-15">
12+
13+
<div class="flex gap-2 items-center">
1114
<%= f.label :text, class: "form-label mr-15" %>
12-
<%= f.text_field :text, data: { comments_target: "commentText" }, class: "form-control w-50", placeholder: "Say something using markdown..." %>
15+
<%= 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..." %>
1316
</div>
14-
<div class="form-group">
15-
<%= f.submit "Post", class: "btn btn-primary" %>
17+
18+
<div class="flex gap-2">
19+
<%= 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" %>
1620
</div>
1721
<% end %>
1822
<% end %>

0 commit comments

Comments
 (0)