Skip to content

utilitycss/utility

Repository files navigation

Node.js CI

UtilityCSS

Installation

$ yarn install @utilitycss/utility

Usage

Simple Default setting

This will use the default options for the plugins which is configured here.

In main.css

@utility;

In postcss.config.js

const utility = require("@utilitycss/utility");
module.exports = {
  plugins: [utility()]
};

Simple Default setting

In main.css

@utility;

In postcss.config.js

const utility = require("@utilitycss/utility");
module.exports = {
  plugins: [utility()]
};

PostCSS Options

option description
config <Object> with the follow [key]:<value> breakPointSeparator: "", seriesSeparator: "", pseudoClassesSeparator: "", breakPoints: undefined
modules List of modules in here.
plugins List of modules in here.

Supported Modules

  1. single
  2. series
  3. backgroundImage
  4. border
  5. spacing
  6. position
  7. zIndex
  8. float
  9. clear
  10. colors
  11. display
  12. visibility
  13. opacity
  14. outline
  15. overflow
  16. resize
  17. cursor
  18. boxSizing
  19. width
  20. height
  21. flexbox
  22. font
  23. verticalAlign
  24. textAlign
  25. textDecoration
  26. textTransform
  27. transform
  28. transition