Utilities

Along with your standard Tailwind utility classes the frameworks adds a few extras as shown below

Border fix

  • border-fix - special class to prevent double width borders when floating left


Panel

  • panel = create a white panel around the div

Example usage

<div class="panel ">Lorem ...</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, ex dolore voluptatum, rerum accusamus accusantium obcaecati odio eius reiciendis vel nam autem quas tempore pariatur. Temporibus a rerum nobis consequatur?

Background colors

  • bg-light
  • bg-light-gray
  • bg-dark
  • bg-primary
  • bg-secondary
hello
hello
hello
hello

Text helpers


  • v-e Align elements inside vertically
  • h-e Align elements inside horizontally


Media queries and sizing utilities

  • full-screen - make element full screen
  • hide-phone - hide elements on a phone
  • hide-tablet - hide elements on a tablet
  • hide-laptop - hide elements on a laptop screen
  • show-phone - show elements on a phone
  • show-tablet - show elements on a tablet
  • show-laptop show elements on a laptop screen

Image helpers

  • img-responsive - sets the image to be responsive, taking up full width and resizing automatically
  • img-center - centers images

Hover helpers

  • fancy-hover allows a drop shadow transition on hover


Remove styling utilities

  • rm-btn-styles removes button styling
  • rm-input-styles removes default input styles
  • rm-link-styles removes default hyperlink styles
  • rm-list-styles removes ordered and unordered list styles