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.
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.
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
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 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.
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>
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:
npm. Rails uses yarn so running npm could cause things to conflict.
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.
node_modules folder and reinstall with
tmp directory contains caches for various things. Yarn has it's own cache which may need cleaning.
yarn cache clean && yarn autoclean