This package contains exclusively utility classes. These classes are not opinionated or styled in any way, and can be used for rapidly designing unique components.
You can install the package with npm or yarn using the following commands:
# With NPM
npm install sass-utility-classes --save-dev
# With Yarn
yarn add sass-utility-classes --dev
If using Sass in your own project, you can import the utility classes using the following directive:
@import "~sass-utility-classes/src/styles";
If not using Sass, you can include the prebuilt styles.css
file in the build directory as a regular.
<link rel="stylesheet" href="/link/to/built/styles.css" />
The utility classes names can be found in the source files.
Sass Utility Classes includes Laravel Mix as a build tool that wraps around Webpack. If you wish to recompile the source Sass files to CSS, you can run one of the following commands:
# Compile the files
npm run dev
# Watch the source files and automatically recompile when a change is made
npm run watch
# Compile the files for production, minifying the output
npm run production
Most of the utilities found in this package are named and styled based off of the TailwindCSS utility library project.
You can find examples and additional explanation for each of the utilities from the TailwindCSS documentation.
Note that this is not a direct port of TailwindCSS. There are a handful of additional utility classes, some from TailwindCSS are not included, and the configuration methods are completely different.
Please see the changelog file for more information on what has changed recently.
Please see the upgrading file for details on upgrading from previous versions.
Please see the contributing file and code of conduct for details on contributing to the project.
The MIT License (MIT). Please see the license file for more information.