PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.

PrimeFlex is available for download at NPM for usage with a module bundler such as webpack.

npm install primeflex

After installation you may include the library by importing from node_modules.


PrimeFlex can also be loaded from a CDN using a link tag.

<link rel="stylesheet" href="">                                         

PrimeFlex does not ship with a built-in color scheme by default as it is derived from the Prime UI library. In case you need to use it standalone without a Prime library, include one of the themes from the themes folder.


SASS variables are available to customize and create your own primeflex build. To begin with clone the primeflex repo and then build the primeflex.scss file after your customizations. Refer to Sass documentation for more information about how to build scss files.

$smBreakpoint of screens such as phones.576px
$mdBreakpoint of screens such as tablets.768px
$lgBreakpoint of screens such as notebook monitors.992px
$xlBreakpoint of smaller screens such as desktop monitors.1200px
$gutterPadding of a grid column..5rem
$fieldMarginSpacing of a field. Can be vertical of horizontal depending on form layout.1rem
$fieldLabelMarginSpacing of a field label. Can be vertical of horizontal depending on form layout..5rem
$helperTextMarginTop spacing of a helper text..25rem
$spacerBase value to use in spacing utilities, view spacing documentation for details.1rem
$separatorSeparator between responsive breakpoints like md: and pseudo classes like hover:.:

Commonly used class blocks can be merged as a single class to be reused using the styleclass mixin. Import the utils from primeflex/utils to be able to create your own classes based on PrimeFlex classes. Here is how to create a class called mybuttonwith the built-in features.

@import 'primeflex/primeflex.scss';

.mybutton {
    @include styleclass('bg-blue-500 hover:bg-blue-600 border-round transition-colors transition-duration-150 p-3 border-none');

If the import does not work, update your build configuration to import from node_modules or explicitly use the relative path e.g. ../node_modules/primeflex/primeflex.scss.

<button type="button" class="mybutton">My Button</button>

When using a utility CSS library like PrimeFlex, it is likely to use only a set of classes from the library leaving the rest of the library as unused. To avoid including the unused part from your application, it is strongly recommended to use a tool like PurgeCSS that analyzes your code and generates an optimized primeflex file that only contains the utilities you've used.

The official PrimeFlex extension for VSCode provides code completion and snippets support for the classes. Search for "PrimeFlex" at VSCode marketplace to download and install the extension.