One of the main challenges of using CSS in a Rails application is managing the complexity of its codebase. As the application grows, the CSS codebase can become large and unwieldy, making it difficult to find and update styles. This leads to inconsistencies in the design, and it can also make it difficult to maintain over time.
One way of managing a CSS codebase is by using Utility Classes. It’s a popular technique in front-end development that allows developers to quickly and easily apply common styles to View elements. These classes are pre-defined and reusable, are typically used to handle common layout and presentation tasks, and also create common UI components for the whole app.
In this article, we’ll explore one of the most popular CSS frameworks for utility classes, Tailwind CSS, and how we can use it in a Rails application.
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that has recently gained popularity among developers due to its ability to quickly design web pages. The framework provides a large set of pre-defined utility classes that can be used to quickly style elements.
Tailwind has an extensive utility library that includes a plethora of styles that developers can also use to create complex reusable components. Creating consistent, well-designed interfaces from HTML can be done just by adding and combining the framework’s pre-defined classes, saving development time in creating and managing a CSS codebase.
Let’s compare a vanilla CSS implementation to a Tailwind one for a quick example:
Vanilla CSS
style.css
.black-rectangle {
background-color: #000;
padding: 24px;
height: 40px;
color: white;
}
layout.html.erb
```<div class=“black-rectangle” > ```
```Hello, World! ```
```</div>```
Tailwind
layout.html.erb
```<div class=“bg-black p-6 h-10 text-white” >```
```Hello, World!```
```</div> ```
The challenge for Tailwind is mostly about becoming familiar with its utility classes. But once you’ve mastered it, you’ll be able to construct custom components more efficiently.
Tailwind in Rails
With Rails 7 you can generate a new application preconfigured with Tailwind by using rails new my-app --css tailwind.
If you’d like to configure Tailwind manually, you’ll need to add the Tailwind CSS gem to your Rails project.
- Add the Tailwind CSS gem to your Gemfile and install:
Terminal
> gem 'tailwindcss-rails'
> bundle install
- Once the gem is installed, you’ll need to run the following command to generate the Tailwind config file:
Terminal
> rails tailwindcss:install
This creates a tailwind.config.js file in the ./config directory. You can use this file to customise the default settings for Tailwind, such as the default colors and font sizes.
You can then add the paths to all of your template files to your config file:
tailwind.config.js
module.exports = {
content: [
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*',
],
theme: {
extend: {},
},
plugins: [],
}
Next, you’ll need to add the @tailwind directives for each of Tailwind’s layers in your application:
application.tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Finally, once the styles are imported, you can start using the utility classes in your views!
For example, the simple mark-up code below creates a responsive shopping cart icon for E-commerce sites:
shopping_cart.html.erb
<div class="h-screen bg-gray-100 flex justify-center items-center">
<div class="relative py-2">
<div class="t-0 absolute left-3">
<p class="flex h-2 w-2 items-center justify-center rounded-full bg-red-500 p-3 text-xs text-white">
<%= chart_items.count %>
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="file: mt-4 h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924- 7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
</div>
</div>
Tailwind is a powerful CSS framework that can greatly speed up the development of Rails projects by providing a set of pre-defined utility classes. Thanks to its easy integration and customization options, it is a great choice for any Rails developer looking to improve their workflow and produce consistent, high-quality designs.
Happy Styling!
