TailwindCSS

Use this system as a starting point for your own template. We created a set of UI components commonly seen in the wild. Tailor them and/or your Tailwind configuration to meet 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

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.

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

You can modify the tailwind.config.js file to include any additional colors, fonts, and other customizations. For example, looking in tailwind.config.js, you will see that Jumpstart Pro has a CSS class called primary with a default value of colors.blue. This primary class is used throughout the application on various elements. One example is shown in the following screenshot: If you need to change that color to fit your application theme, switching to a different color is a simple change to make as shown in the following screenshot:

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 will read each file in the content: [] config entry. 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.
• Always use yarn, never npm. Rails uses yarn so running npm could cause things to conflict.
• 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.
• Delete the node_modules folder and reinstall with yarn install
• Clear out any caches. The tmp directory contains caches for various things. Yarn has it's own cache which may need cleaning.yarn cache clean && yarn autoclean