Tailwind CSS with Rails
By: Apurva Karankar Category: Ruby on Rails Technologies: Ruby on Rails, CSS
Tailwind CSS is a famous CSS framework that helps developers quickly build and style site pages with an exceptional utility-based approach. unlike another CSS framework, it accompanies its own build tooling.
Setting up Tailwind with a Rails App:
1. rails new tailwind-example
2. cd tailwind-example
Finally, serve your project locally to check that everything is working accurately: rails server.
Then, explore over to localhost:3000 in your browser to see the Rails invite page.
You’re ready to add Tailwind and begin making interfaces faster.
3. yarn add tailwindcss — — (add TailwindCSS as a dependency)
4. npx tailwindcss init — — (use this command to create a tailwind configuration file in the proper place)
5. require (“tailwindcss”) — — (Open the postcss.config.js file in your project’s root directory and add this)
6. create a file called application.css in app/javascript. Inside the CSS file, add the following imports:
@import “tailwindcss/base”;
@import “tailwindcss/utilities”;
@import “tailwindcss/components”;
7. add import “../application.css”; to the list of imports in app/javascript/packs/application.js
8. npm uninstall tailwindcss postcss autoprefixer
9.npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@⁷ autoprefixer@⁹
To show off our new CSS library, we’ll create a new view, controller, and model. This is easy with Rails scaffolding
10. rails generate scaffold User email:string password:string
12. root ‘users#index’ to config/routes.rb — — (set routes)
13. to confirm that we have Tailwind CSS set up appropriately with our project,
we should add the following HTML to the actual top of
app/views/users/index.html.erb
<div class=”max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class=”mb-4 text-3xl font-black”>Here are all our users!</h1>
<p class=”text-lg leading-snug”>If this looks nice, it means Tailwind is set up properly.</p>
</div>
Using Tailwind CSS Classes to Save Time
The general purpose of Tailwind CSS is to help you design better, more reliably, and quicker. Styling your page is basically as simple as adding the right class names.
<div class=”max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class=”mb-4 text-3xl font-black”>Here are all our users!</h1>
<p class=”text-lg leading-snug”>If this looks nice, it means Tailwind is set up properly.</p>
</div>
<div class=”p-10">
<h1 class=”mb-4 text-4xl font-black”>Users</h1>
<table class=”min-w-full table-auto”>
<thead class=”bg-gray-800 text-gray-300" >
<tr>
<th>Email</th>
<th>Password</th>
<th colspan=”3">Actions</th>
</tr>
</thead>
<tbody>
<% @users.each do |user| %>
<tr class=”border-4 border-gray-200">
<td><%= user.email %></td>
<td><%= user.password %></td>
<td><%= link_to ‘Show’, user %></td>
<td><%= link_to ‘Edit’, edit_user_path(user) %></td>
<td><%= link_to ‘Destroy’, user, method: :delete, data: { confirm: ‘Are you sure?’ } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to ‘New User’, new_user_path, class: “bg-indigo-500 text-white px-4 py-2 border rounded-md hover:bg-white hover:border-indigo-500 hover:text-black” %>
<div>
Adding these changes result in our user record page seems to be this:
Thank you !!
Originally published at https://www.cryptextechnologies.com.
