Style with TailwindCSS
To demonstrate that the attributes (like [class], in this example’s
case),applied to the elements declared in the
#validation_message_template block persist across validations, this
commit styles the form elements with TailwindCSS and its Form
styles .
Collapse app/views/authentications/new.html.erb
Expand app/views/authentications/new.html.erb
app/views/authentications/new.html.erb
diff --git a/app/views/authentications/new.html.erb b/app/views/authentications/new.html.erb
index ac77308..8cf2402 100644
--- a/app/views/authentications/new.html.erb
+++ b/app/views/authentications/new.html.erb
@@ -1,27 +1,29 @@
<%= form_with(model: authentication) do |form| %>
<%= form.validation_message_template do |messages, tag| %>
- <%= tag.span(messages.to_sentence) %>
+ <%= tag.span(messages.to_sentence, class: "text-red-500 text-xs italic") %>
<% end %>
<%= form.validation_message :base, aria: { live: "assertive" } do |errors, tag| %>
- <%= tag.p errors.to_sentence %>
+ <%= tag.p errors.to_sentence, class: "text-red-500 text italic" %>
<% end %>
- <div>
+ <div class="flex flex-col mb-4 space-y-2">
<%= form.label :username %>
- <%= form.text_field :username, aria: {
+ <%= form.text_field :username, class: "form-input", aria: {
describedby: form.validation_message_id(:username),
} %>
<%= form.validation_message :username %>
</div>
- <div>
+ <div class="flex flex-col mb-4 space-y-2">
<%= form.label :password %>
- <%= form.password_field :password, aria: {
+ <%= form.password_field :password, class: "form-input", aria: {
describedby: form.validation_message_id(:password),
} %>
<%= form.validation_message :password %>
</div>
- <%= form.button %>
+ <div class="flex items-center justify-between">
+ <%= form.button class: "bg-blue-500 hover:bg-blue-700 disabled:opacity-75 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"%>
+ </div>
<% end %>
Collapse app/views/messages/index.html.erb
Expand app/views/messages/index.html.erb
app/views/messages/index.html.erb
diff --git a/app/views/messages/index.html.erb b/app/views/messages/index.html.erb
index 256c69f..cda26b8 100644
--- a/app/views/messages/index.html.erb
+++ b/app/views/messages/index.html.erb
@@ -7,10 +7,10 @@
<% if Current.user %>
<%= form_with model: message do |form| %>
<%= form.validation_message_template do |messages, tag| %>
- <%= tag.span(messages.to_sentence) %>
+ <%= tag.span(messages.to_sentence, class: "text-red-500 text-xs italic") %>
<% end %>
- <div>
+ <div class="flex flex-col mb-4 space-y-2">
<%= form.label :content %>
<%= form.rich_text_area :content, aria: {
describedby: form.validation_message_id(:content),
@@ -18,7 +18,9 @@
<%= form.validation_message :content %>
</div>
- <%= form.button %>
+ <div class="flex items-center justify-between">
+ <%= form.button class: "bg-blue-500 hover:bg-blue-700 disabled:opacity-75 disabled:cursor-not-allowed text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"%>
+ </div>
<% end %>
<%= button_to authentication_path, method: :delete do %>
Collapse package.json
Expand package.json
package.json
diff --git a/package.json b/package.json
index e0c6a58..f21f1db 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
},
"version": "0.1.0",
"devDependencies": {
+ "@tailwindcss/custom-forms": "^0.2.1",
"webpack-dev-server": "^3.11.0"
}
}
Collapse tailwind.config.js
Expand tailwind.config.js
tailwind.config.js
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..8339f75
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+ plugins: [
+ require("@tailwindcss/custom-forms"),
+ ],
+ variants: {
+ cursor: ["responsive", "disabled"],
+ opacity: ["responsive", "hover", "focus", "disabled"],
+ },
+}
Collapse yarn.lock
Expand yarn.lock
yarn.lock
diff --git a/yarn.lock b/yarn.lock
index b3314be..e48db87 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -956,6 +956,15 @@
webpack-cli "^3.3.11"
webpack-sources "^1.4.3"
+"@tailwindcss/custom-forms@^0.2.1":
+ version "0.2.1"
+ resolved "https://registry.yarnpkg.com/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz#40e5ed1fff6d29d8ed1c508a0b2aaf8da96962e0"
+ integrity sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==
+ dependencies:
+ lodash "^4.17.11"
+ mini-svg-data-uri "^1.0.3"
+ traverse "^0.6.6"
+
"@types/color-name@^1.1.1":
version "1.1.1"
resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -4574,6 +4583,11 @@ mini-css-extract-plugin@^0.9.0:
schema-utils "^1.0.0"
webpack-sources "^1.1.0"
+mini-svg-data-uri@^1.0.3:
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
+ integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
+
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -7292,6 +7306,11 @@ tough-cookie@~2.5.0:
psl "^1.1.28"
punycode "^2.1.1"
+traverse@^0.6.6:
+ version "0.6.6"
+ resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
+ integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
+
trim-newlines@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"