@use "uniform" as * with (
leading-trim: both !important;
text-align: left !important;
text-align: center !important;
text-align: right !important;
Install the Uniform node package or clone the project and install its dependencies.
npm i uniformcss
Uniform CSS can be added directly into any Sass project with one line of code.
@use "uniform" as *;
Style components by writing composable utility properties directly in your HTML.
px-24 py-20 border-b-1 ...
All common CSS properties are supported out of the box. You can even add your own custom properties directly in Sass.
Select from a wide range of colors, tints, and shades. Easily tweak the hue and saturation of each color to match any design.
Build pixel perfect components without any compromise. Uniform supports a wide range of common spacing and sizing values.
Take advantage of HSL based colors to instantaneously configure Uniform to match your design with simple to tweak color tokens.
/* styles.css */
Apply composable manipulation to any color. Increase or decrease saturation, lighten, and darken colors directly in your html.
<div class="bg-blue bg-shade-400">
<div class="border-1 border-gray border-opacity-50 hover.border-opacity-100">
<p class="color-yellow color-tint-300">
Uniform comes with built-in inline gradient support. Just override CSS custom properties to apply start and end colors.
<div class="bg-linear" style="--gradient: to right, #ffbebe, #4eff9d;">
<div class="bg-linear" style="--gradient: to right, #c39eff, #85eeff;">
<div class="bg-linear" style="--gradient: to right, #d2d2d2, #ff7ee3;">
Animations are great for providing extra context for your users. Apply bounce, ping, pulse, and spin animations to any element.
Uniform is designed to be fully extendable. Add your own keyframe animations through the configuration directly in your Sass project.
Adding custom animations is easy. Add custom animations to your project by including keyframe settings in your configuration.
Quickly utilize CSS variable hooks to activate theme variables directly in your CSS.
Uniform makes it easily to create, manage, conditionally apply any number of custom themes.
<div class="bg-white dark.bg-blue dark.bg-shade-900 transition-200 ...">
Apply conditional dark mode specific coloring to any element with the dark pseudo.
Dark mode is completely optional and can be disabled with ease in your config.
Add the following code to the head of your project.
Customize design tokens directly in your CSS to fit your design.