TailwindCSS

Overview

Jumpstart Pro utilizes Tailwind CSS as a utility-first approach towards designing an application. Refer to the documentation to understand how it works and to configure for your own needs.

To the left are sections of components and their relative code snippets. You're welcome to change anything to match your own branding.

TailwindCSS is configured to automatically purge styles and watches your Rails helpers, views, and Javascript files for CSS classes.

You can modify the app/assets/stylesheets/application.tailwind.css file to include any additional colors, fonts, and other customizations.

TailwindUI

TailwindUI is a set of components you can purchase from the TailwindCSS team. It's a wonderful complement to Jumpstart Pro for adding beautifully designed cards, layouts, and other components to your application.

Simply copy and paste TailwindUI components into your Jumpstart Pro application. There is no additional configuration needed to use TailwindUI components.

Jumpstart Pro includes default styles for HTML elements to provide a nice experience with or without TailwindUI. Some of these styles may conflict with TailwindUI components, so you may need additional classes applied to override these default styles. You can also comment out the default styles in the CSS files if you would like to take that approach instead.

Purging Unused CSS

When Tailwind compiles CSS, it scans the current directory for source files that could contain CSS classes. These files are searched for references to TailwindCSS classes and only the classes in these files will be in the final output.

These files are not evaluated, so you must use the full class name. Dynamically generated classes will not work.

/* BAD */
<% color = "red" %>
<div class="text-<%= color %>-500"></div>

/* Good */
<% color = "text-red-500" %>
<div class="<%= color %>"></div>

Debugging

Sometimes you may run into an issue where you add a TailwindCSS class and it seems to not be generated. Here are a few steps you can use for debugging:

  • Make sure the logs don't have any errors when TailwindCSS recompiles your CSS.
  • If you have run rails assets:precompile locally, make sure to delete the CSS generated by that command in public/assets. Those precompiled files may be served instead of your development app/assets/builds. You may also want to run rails assets:clobber to clear out the assets.
  • Clear out any caches. The tmp directory contains caches for various things.