Predefined Styles

TheDevSpace boilerplate is created with TailwindCSS, a utility-first CSS framework.

The problem with TailwindCSS is that sometimes you need to add a long list of class names just to style one single element. Especially when it involves animations and smooth transitions.

To make your life easier, the boilerplate includes a set of predefined styles, which you can find in src/app/globals.css.

With the predefined styles, when you are styling a button, instead of repeating a list of classes over and over again, all you need is button button-primary.

<!-- Before -->
<button
  class="text-sm font-bold rounded-md border-2 px-3 py-1 focus:outline-2 focus:outline-offset-2 bg-violet-500 hover:bg-violet-600 border-violet-500 hover:border-violet-600 focus:outline-violet-600 transition-colors duration-150 text-gray-50"></button>
 
<!-- After -->
<button class="button button-primary"></button>