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.

Tailwind CSS

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.

The official TailwindCSS plugins are included by default:

Be sure to modify the tailwind.config.js file to include any additional colors, fonts, and other customizations.

How to Use Tailwind UI with Jumpstart Pro

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.