Utilities Nile Dashboard provides a wide set of utility classes to help you customize everything in your Dashboard from grid, flex, sizing, spacing to colors and more...
Disable Utilities
Utilities are enabled by default, you can disable by configuring the library options from your frontal.config.js as follows
// frontal.config.js
module.exports = {
  library: {
    options: {
      utilities: false, // disable utilities
    }
  },
}
Bootstrap Utilities
Bootstrap offers utility classes that are different from whats offered by Nile Dashboard, here is the commonly used ones:
Base Colors
The following base colors adjust automatically on dark mode with different colors, read more about the design system
bg-base-1
bg-base-2
bg-base-3
bg-base-4
bg-base-5
bg-base-6
<div class="bg-base-1 ..."></div>

<div class="bg-base-2 ..."></div>

<div class="bg-base-3 ..."></div>

<div class="bg-base-4 ..."></div>

<div class="bg-base-5 ..."></div>

<div class="bg-base-6 ..."></div>
Theme Variants
Theme variant backgrounds are changed automatically on dark mode
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white
bg-body
bg-transparent
<div class="bg-primary ..."></div>

<div class="bg-secondary ..."></div>

<div class="bg-success ..."></div>

<div class="bg-danger ..."></div>

<div class="bg-info ..."></div>

<div class="bg-light ..."></div>

<div class="bg-dark ..."></div>

<div class="bg-body ..."></div>

<div class="bg-white ..."></div>

<div class="bg-transparent ..."></div>
Background Gradient
Use background colors to apply gradients to elements
Starting color
Ending color
Middle color
<!-- Define starting color -->
<div class="bg-gradient-to-r from-cerulean-500 ..."></div>

<!-- Define middle color -->
<div class="bg-gradient-to-r from-cerulean-500 via-cerulean-600 ..."></div>

<!-- Define end color -->
<div class="bg-gradient-to-r from-cerulean-500 via-cerulean-600 to-cerulean-800 ..."></div>

<!-- Define gradient directions -->
<div class="bg-gradient-to-l from-cerulean-500 to-green-500 ..."></div>

<div class="bg-gradient-to-r from-red-500 to-green-500 ..."></div>

<div class="bg-gradient-to-t from-green-500 to-green-500 ..."></div>

<div class="bg-gradient-to-b from-yellow-500 to-green-500 ..."></div>
Background Opacity
Background opacity levels can be controlled via bg-opacity classes
100%
75%
50%
25%
0%
<div class="bg-cerulean-500 bg-opacity-100"></div>

<div class="bg-cerulean-500 bg-opacity-75"></div>

<div class="bg-cerulean-500 bg-opacity-50"></div>

<div class="bg-cerulean-500 bg-opacity-25"></div>

<div class="bg-cerulean-500 bg-opacity-0"></div>
Helper Classes
Helper classes enables you to change the background color on certain states, alt, hover, active and focus
Changes on dark mode
Changes on hover
Changes on active
<!-- red-500 on light and pink-500 on alt theme (dark mode) -->
<div class="bg-red-500 alt:bg-pink-500"></div>

<!-- from red-500 to red-700 on hover -->
<div class="bg-red-500 hover:bg-red-700"></div>

<!-- from red-500 to red-700 on active -->
<div class="bg-red-500 active:bg-red-700"></div>

<!-- from red-500 to red-700 on focus -->
<input class="form-control bg-red-500 focus:bg-red-700" />
Background Color
Color ClassGradient fromGradient viaGradient toTone preview
bg-blackfrom-blackvia-blackto-black
bg-whitefrom-whitevia-whiteto-white
bg-gray-50from-gray-50via-gray-50to-gray-50
bg-gray-100from-gray-100via-gray-100to-gray-100
bg-gray-200from-gray-200via-gray-200to-gray-200
bg-gray-300from-gray-300via-gray-300to-gray-300
bg-gray-400from-gray-400via-gray-400to-gray-400
bg-gray-500from-gray-500via-gray-500to-gray-500
bg-gray-600from-gray-600via-gray-600to-gray-600
bg-gray-700from-gray-700via-gray-700to-gray-700
bg-gray-800from-gray-800via-gray-800to-gray-800
bg-gray-900from-gray-900via-gray-900to-gray-900
bg-red-50from-red-50via-red-50to-red-50
bg-red-100from-red-100via-red-100to-red-100
bg-red-200from-red-200via-red-200to-red-200
bg-red-300from-red-300via-red-300to-red-300
bg-red-400from-red-400via-red-400to-red-400
bg-red-500from-red-500via-red-500to-red-500
bg-red-600from-red-600via-red-600to-red-600
bg-red-700from-red-700via-red-700to-red-700
bg-red-800from-red-800via-red-800to-red-800
bg-red-900from-red-900via-red-900to-red-900
bg-pink-50from-pink-50via-pink-50to-pink-50
bg-pink-100from-pink-100via-pink-100to-pink-100
bg-pink-200from-pink-200via-pink-200to-pink-200
bg-pink-300from-pink-300via-pink-300to-pink-300
bg-pink-400from-pink-400via-pink-400to-pink-400
bg-pink-500from-pink-500via-pink-500to-pink-500
bg-pink-600from-pink-600via-pink-600to-pink-600
bg-pink-700from-pink-700via-pink-700to-pink-700
bg-pink-800from-pink-800via-pink-800to-pink-800
bg-pink-900from-pink-900via-pink-900to-pink-900
bg-purple-50from-purple-50via-purple-50to-purple-50
bg-purple-100from-purple-100via-purple-100to-purple-100
bg-purple-200from-purple-200via-purple-200to-purple-200
bg-purple-300from-purple-300via-purple-300to-purple-300
bg-purple-400from-purple-400via-purple-400to-purple-400
bg-purple-500from-purple-500via-purple-500to-purple-500
bg-purple-600from-purple-600via-purple-600to-purple-600
bg-purple-700from-purple-700via-purple-700to-purple-700
bg-purple-800from-purple-800via-purple-800to-purple-800
bg-purple-900from-purple-900via-purple-900to-purple-900
bg-indigo-50from-indigo-50via-indigo-50to-indigo-50
bg-indigo-100from-indigo-100via-indigo-100to-indigo-100
bg-indigo-200from-indigo-200via-indigo-200to-indigo-200
bg-indigo-300from-indigo-300via-indigo-300to-indigo-300
bg-indigo-400from-indigo-400via-indigo-400to-indigo-400
bg-indigo-500from-indigo-500via-indigo-500to-indigo-500
bg-indigo-600from-indigo-600via-indigo-600to-indigo-600
bg-indigo-700from-indigo-700via-indigo-700to-indigo-700
bg-indigo-800from-indigo-800via-indigo-800to-indigo-800
bg-indigo-900from-indigo-900via-indigo-900to-indigo-900
bg-blue-50from-blue-50via-blue-50to-blue-50
bg-blue-100from-blue-100via-blue-100to-blue-100
bg-blue-200from-blue-200via-blue-200to-blue-200
bg-blue-300from-blue-300via-blue-300to-blue-300
bg-blue-400from-blue-400via-blue-400to-blue-400
bg-blue-500from-blue-500via-blue-500to-blue-500
bg-blue-600from-blue-600via-blue-600to-blue-600
bg-blue-700from-blue-700via-blue-700to-blue-700
bg-blue-800from-blue-800via-blue-800to-blue-800
bg-blue-900from-blue-900via-blue-900to-blue-900
bg-cerulean-50from-cerulean-50via-cerulean-50to-cerulean-50
bg-cerulean-100from-cerulean-100via-cerulean-100to-cerulean-100
bg-cerulean-200from-cerulean-200via-cerulean-200to-cerulean-200
bg-cerulean-300from-cerulean-300via-cerulean-300to-cerulean-300
bg-cerulean-400from-cerulean-400via-cerulean-400to-cerulean-400
bg-cerulean-500from-cerulean-500via-cerulean-500to-cerulean-500
bg-cerulean-600from-cerulean-600via-cerulean-600to-cerulean-600
bg-cerulean-700from-cerulean-700via-cerulean-700to-cerulean-700
bg-cerulean-800from-cerulean-800via-cerulean-800to-cerulean-800
bg-cerulean-900from-cerulean-900via-cerulean-900to-cerulean-900
bg-cyan-50from-cyan-50via-cyan-50to-cyan-50
bg-cyan-100from-cyan-100via-cyan-100to-cyan-100
bg-cyan-200from-cyan-200via-cyan-200to-cyan-200
bg-cyan-300from-cyan-300via-cyan-300to-cyan-300
bg-cyan-400from-cyan-400via-cyan-400to-cyan-400
bg-cyan-500from-cyan-500via-cyan-500to-cyan-500
bg-cyan-600from-cyan-600via-cyan-600to-cyan-600
bg-cyan-700from-cyan-700via-cyan-700to-cyan-700
bg-cyan-800from-cyan-800via-cyan-800to-cyan-800
bg-cyan-900from-cyan-900via-cyan-900to-cyan-900
bg-teal-50from-teal-50via-teal-50to-teal-50
bg-teal-100from-teal-100via-teal-100to-teal-100
bg-teal-200from-teal-200via-teal-200to-teal-200
bg-teal-300from-teal-300via-teal-300to-teal-300
bg-teal-400from-teal-400via-teal-400to-teal-400
bg-teal-500from-teal-500via-teal-500to-teal-500
bg-teal-600from-teal-600via-teal-600to-teal-600
bg-teal-700from-teal-700via-teal-700to-teal-700
bg-teal-800from-teal-800via-teal-800to-teal-800
bg-teal-900from-teal-900via-teal-900to-teal-900
bg-green-50from-green-50via-green-50to-green-50
bg-green-100from-green-100via-green-100to-green-100
bg-green-200from-green-50via-green-50to-green-50
bg-green-300from-green-300via-green-300to-green-300
bg-green-400from-green-400via-green-400to-green-400
bg-green-500from-green-500via-green-500to-green-500
bg-green-600from-green-600via-green-600to-green-600
bg-green-700from-green-700via-green-700to-green-700
bg-green-800from-green-800via-green-800to-green-800
bg-green-900from-green-900via-green-900to-green-900
bg-yellow-50from-yellow-50via-yellow-50to-yellow-50
bg-yellow-100from-yellow-100via-yellow-100to-yellow-100
bg-yellow-200from-yellow-200via-yellow-200to-yellow-200
bg-yellow-300from-yellow-300via-yellow-300to-yellow-300
bg-yellow-400from-yellow-400via-yellow-400to-yellow-400
bg-yellow-500from-yellow-500via-yellow-500to-yellow-500
bg-yellow-600from-yellow-600via-yellow-600to-yellow-600
bg-yellow-700from-yellow-700via-yellow-700to-yellow-700
bg-yellow-800from-yellow-800via-yellow-800to-yellow-800
bg-yellow-900from-yellow-900via-yellow-900to-yellow-900
bg-amber-50from-amber-50via-amber-50to-amber-50
bg-amber-100from-amber-100via-amber-100to-amber-100
bg-amber-200from-amber-200via-amber-200to-amber-200
bg-amber-300from-amber-300via-amber-300to-amber-300
bg-amber-400from-amber-400via-amber-400to-amber-400
bg-amber-500from-amber-500via-amber-500to-amber-500
bg-amber-600from-amber-600via-amber-600to-amber-600
bg-amber-700from-amber-700via-amber-700to-amber-700
bg-amber-800from-amber-800via-amber-800to-amber-800
bg-amber-900from-amber-900via-amber-900to-amber-900
bg-orange-50from-orange-50via-orange-50to-orange-50
bg-orange-100from-orange-100via-orange-100to-orange-100
bg-orange-200from-orange-200via-orange-200to-orange-200
bg-orange-300from-orange-300via-orange-300to-orange-300
bg-orange-400from-orange-400via-orange-400to-orange-400
bg-orange-500from-orange-500via-orange-500to-orange-500
bg-orange-600from-orange-600via-orange-600to-orange-600
bg-orange-700from-orange-700via-orange-700to-orange-700
bg-orange-800from-orange-800via-orange-800to-orange-800
bg-orange-900from-orange-900via-orange-900to-orange-900
bg-brown-50from-brown-50via-brown-50to-brown-50
bg-brown-100from-brown-100via-brown-100to-brown-100
bg-brown-200from-brown-200via-brown-200to-brown-200
bg-brown-300from-brown-300via-brown-300to-brown-300
bg-brown-400from-brown-400via-brown-400to-brown-400
bg-brown-500from-brown-500via-brown-500to-brown-500
bg-brown-600from-brown-600via-brown-600to-brown-600
bg-brown-700from-brown-700via-brown-700to-brown-700
bg-brown-800from-brown-800via-brown-800to-brown-800
bg-brown-900from-brown-900via-brown-900to-brown-900
Base Colors
The following base colors adjust automatically on dark mode with different colors, read more about the design system
text-surface-high
text-surface-medium
text-surface-low
text-surface-lowest
text-base-1
text-base-2
text-base-3
text-base-4
text-base-5
text-base-6
<div class="text-surface-high ...">Text...</div>

<div class="text-surface-medium ...">Text...</div>

<div class="text-surface-low ...">Text...</div>

<div class="text-surface-lowest ...">Text...</div>

<!-- Base colors are also available for text -->

<div class="text-base-1 ...">Text...</div>

<div class="text-base-2 ...">Text...</div>

<div class="text-base-3 ...">Text...</div>

<div class="text-base-4 ...">Text...</div>

<div class="text-base-5 ...">Text...</div>

<div class="text-base-6 ...">Text...</div>
Theme Variants
The following theme variants changes automatically on dark mode, read more about the design system
text-primary
text-secondary
text-success
text-danger
text-warning
text-info
text-dark
text-light
<div class="text-primary ...">Text...</div>

<div class="text-secondary ...">Text...</div>

<div class="text-success ...">Text...</div>

<div class="text-danger ...">Text...</div>

<div class="text-warning ...">Text...</div>

<div class="text-info ...">Text...</div>

<div class="text-dark ...">Text...</div>

<div class="text-light ...">Text...</div>
Text opacity
Text opacity levels can be controlled via text-opacity-{level} classes and only applies to text palette colors
Always remember that you are absolutely unique. Just like everyone else.
Always remember that you are absolutely unique. Just like everyone else.
Always remember that you are absolutely unique. Just like everyone else.
Always remember that you are absolutely unique. Just like everyone else.
Always remember that you are absolutely unique. Just like everyone else.
<div class="text-cerulean-500 text-opacity-100">...</div>

<div class="text-cerulean-500 text-opacity-75">...</div>

<div class="text-cerulean-500 text-opacity-50">...</div>

<div class="text-cerulean-500 text-opacity-25">...</div>

<div class="text-cerulean-500 text-opacity-0">...</div>
Helper Classes
Helper classes enables you to change the text color on certain states, alt, hover, active and focus
Changes on dark mode
Changes on hover
Changes on active
<!-- red-500 on light and pink-500 on alt theme (dark mode) -->
<div class="text-red-500 alt:text-pink-500"></div>

<!-- from red-500 to red-700 on hover -->
<div class="text-red-500 hover:text-red-700"></div>

<!-- from red-500 to red-700 on active -->
<div class="text-red-500 active:text-red-700"></div>

<!-- from red-500 to red-700 on focus -->
<input class="form-control text-red-500 focus:text-red-700" />
Text Colors
Text colors can be controlled via text-{color}-{level} classes
ClassTone preview
text-blackAa
text-whiteAa
text-gray-50Aa
text-gray-100Aa
text-gray-200Aa
text-gray-300Aa
text-gray-400Aa
text-gray-500Aa
text-gray-600Aa
text-gray-700Aa
text-gray-800Aa
text-gray-900Aa
text-red-50Aa
text-red-100Aa
text-red-200Aa
text-red-300Aa
text-red-400Aa
text-red-500Aa
text-red-600Aa
text-red-700Aa
text-red-800Aa
text-red-900Aa
text-pink-50Aa
text-pink-100Aa
text-pink-200Aa
text-pink-300Aa
text-pink-400Aa
text-pink-500Aa
text-pink-600Aa
text-pink-700Aa
text-pink-800Aa
text-pink-900Aa
text-purple-50Aa
text-purple-100Aa
text-purple-200Aa
text-purple-300Aa
text-purple-400Aa
text-purple-500Aa
text-purple-600Aa
text-purple-700Aa
text-purple-800Aa
text-purple-900Aa
text-indigo-50Aa
text-indigo-100Aa
text-indigo-200Aa
text-indigo-300Aa
text-indigo-400Aa
text-indigo-500Aa
text-indigo-600Aa
text-indigo-700Aa
text-indigo-800Aa
text-indigo-900Aa
text-blue-50Aa
text-blue-100Aa
text-blue-200Aa
text-blue-300Aa
text-blue-400Aa
text-blue-500Aa
text-blue-600Aa
text-blue-700Aa
text-blue-800Aa
text-blue-900Aa
text-cerulean-50Aa
text-cerulean-100Aa
text-cerulean-200Aa
text-cerulean-300Aa
text-cerulean-400Aa
text-cerulean-500Aa
text-cerulean-600Aa
text-cerulean-700Aa
text-cerulean-800Aa
text-cerulean-900Aa
text-cyan-50Aa
text-cyan-100Aa
text-cyan-200Aa
text-cyan-300Aa
text-cyan-400Aa
text-cyan-500Aa
text-cyan-600Aa
text-cyan-700Aa
text-cyan-800Aa
text-cyan-900Aa
text-teal-50Aa
text-teal-100Aa
text-teal-200Aa
text-teal-300Aa
text-teal-400Aa
text-teal-500Aa
text-teal-600Aa
text-teal-700Aa
text-teal-800Aa
text-teal-900Aa
text-green-50Aa
text-green-100Aa
text-green-200Aa
text-green-300Aa
text-green-400Aa
text-green-500Aa
text-green-600Aa
text-green-700Aa
text-green-800Aa
text-green-900Aa
text-yellow-50Aa
text-yellow-100Aa
text-yellow-200Aa
text-yellow-300Aa
text-yellow-400Aa
text-yellow-500Aa
text-yellow-600Aa
text-yellow-700Aa
text-yellow-800Aa
text-yellow-900Aa
text-amber-50Aa
text-amber-100Aa
text-amber-200Aa
text-amber-300Aa
text-amber-400Aa
text-amber-500Aa
text-amber-600Aa
text-amber-700Aa
text-amber-800Aa
text-amber-900Aa
text-orange-50Aa
text-orange-100Aa
text-orange-200Aa
text-orange-300Aa
text-orange-400Aa
text-orange-500Aa
text-orange-600Aa
text-orange-700Aa
text-orange-800Aa
text-orange-900Aa
text-brown-50Aa
text-brown-100Aa
text-brown-200Aa
text-brown-300Aa
text-brown-400Aa
text-brown-500Aa
text-brown-600Aa
text-brown-700Aa
text-brown-800Aa
text-brown-900Aa
More border utility classes on Bootstrap
Base Colors
The following base border colors adjust automatically on dark mode with different colors, read more about the design system
border-base-1
border-base-2
border-base-3
border-base-4
border-base-5
border-base-6
<div class="border border-base-1 ..."></div>

<div class="border border-base-2 ..."></div>

<div class="border border-base-3 ..."></div>

<div class="border border-base-4 ..."></div>

<div class="border border-base-5 ..."></div>

<div class="border border-base-6 ..."></div>
Theme Variants
The following theme variants changes automatically on dark mode, read more about the design system
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-dark
border-light
border-white
<div class="border border-primary ..."></div>

<div class="border border-secondary ..."></div>

<div class="border border-success ..."></div>

<div class="border border-danger ..."></div>

<div class="border border-warning ..."></div>

<div class="border border-info ..."></div>

<div class="border border-dark ..."></div>

<div class="border border-light ..."></div>
Border Opacity
Border opacity levels can be controlled via border-opacity-{level} classes, only applies to palette border colors
100%
75%
50%
25%
0%
<div class="border border-red-500 border-opacity-100"></div>

<div class="border border-red-500 border-opacity-75"></div>

<div class="border border-red-500 border-opacity-50"></div>

<div class="border border-red-500 border-opacity-25"></div>

<div class="border border-red-500 border-opacity-0"></div>
Helper Classes
Helper classes enables you to change border colors on certain states, alt, hover, active and focus
Changes on dark mode
Changes on hover
Changes on active
<!-- red-500 on light and green-800 on alt theme (dark mode) -->
<div class="border-red-500 alt:border-green-800"></div>

<!-- from red-500 to red-700 on hover -->
<div class="border-red-500 hover:border-red-700"></div>

<!-- from red-500 to red-700 on active -->
<div class="border-red-500 active:border-red-700"></div>

<!-- from red-500 to red-700 on focus -->
<input class="form-control border-red-500 focus:border-red-700" />
Background Color
Color ClassPreview
border-black
border-white
border-gray-50
border-gray-100
border-gray-200
border-gray-300
border-gray-400
border-gray-500
border-gray-600
border-gray-700
border-gray-800
border-gray-900
border-red-50
border-red-100
border-red-200
border-red-300
border-red-400
border-red-500
border-red-600
border-red-700
border-red-800
border-red-900
border-pink-50
border-pink-100
border-pink-200
border-pink-300
border-pink-400
border-pink-500
border-pink-600
border-pink-700
border-pink-800
border-pink-900
border-purple-50
border-purple-100
border-purple-200
border-purple-300
border-purple-400
border-purple-500
border-purple-600
border-purple-700
border-purple-800
border-purple-900
border-indigo-50
border-indigo-100
border-indigo-200
border-indigo-300
border-indigo-400
border-indigo-500
border-indigo-600
border-indigo-700
border-indigo-800
border-indigo-900
border-blue-50
border-blue-100
border-blue-200
border-blue-300
border-blue-400
border-blue-500
border-blue-600
border-blue-700
border-blue-800
border-blue-900
border-cerulean-50
border-cerulean-100
border-cerulean-200
border-cerulean-300
border-cerulean-400
border-cerulean-500
border-cerulean-600
border-cerulean-700
border-cerulean-800
border-cerulean-900
border-cyan-50
border-cyan-100
border-cyan-200
border-cyan-300
border-cyan-400
border-cyan-500
border-cyan-600
border-cyan-700
border-cyan-800
border-cyan-900
border-teal-50
border-teal-100
border-teal-200
border-teal-300
border-teal-400
border-teal-500
border-teal-600
border-teal-700
border-teal-800
border-teal-900
border-green-50
border-green-100
border-green-200
border-green-300
border-green-400
border-green-500
border-green-600
border-green-700
border-green-800
border-green-900
border-yellow-50
border-yellow-100
border-yellow-200
border-yellow-300
border-yellow-400
border-yellow-500
border-yellow-600
border-yellow-700
border-yellow-800
border-yellow-900
border-amber-50
border-amber-100
border-amber-200
border-amber-300
border-amber-400
border-amber-500
border-amber-600
border-amber-700
border-amber-800
border-amber-900
border-orange-50
border-orange-100
border-orange-200
border-orange-300
border-orange-400
border-orange-500
border-orange-600
border-orange-700
border-orange-800
border-orange-900
border-brown-50
border-brown-100
border-brown-200
border-brown-300
border-brown-400
border-brown-500
border-brown-600
border-brown-700
border-brown-800
border-brown-900
More fonts utility classes on Bootstrap
Font Sizes and weights
Text Small
Text Medium
Text Large
Font Weight 500
<div class="text-sm ...">Text...</div>

<div class="text-md ...">Text...</div>

<div class="text-lg ...">Text...</div>

<div class="fw-500 ...">Text...</div>
More sizing utility classes on Bootstrap
Width
Apply width dimensions to elements
WidthMin WidthMax Width
w-0pxmin-w-0pxmax-w-0px
w-1pxmin-w-1pxmax-w-1px
w-2pxmin-w-2pxmax-w-2px
w-4pxmin-w-4pxmax-w-4px
w-6pxmin-w-6pxmax-w-6px
w-8pxmin-w-8pxmax-w-8px
w-10pxmin-w-10pxmax-w-10px
w-12pxmin-w-12pxmax-w-12px
w-14pxmin-w-14pxmax-w-14px
w-16pxmin-w-16pxmax-w-16px
w-20pxmin-w-20pxmax-w-20px
w-24pxmin-w-24pxmax-w-24px
w-28pxmin-w-28pxmax-w-28px
w-32pxmin-w-32pxmax-w-32px
w-36pxmin-w-36pxmax-w-36px
w-40pxmin-w-40pxmax-w-40px
w-44pxmin-w-44pxmax-w-44px
w-48pxmin-w-48pxmax-w-48px
w-56pxmin-w-56pxmax-w-56px
w-64pxmin-w-64pxmax-w-64px
w-80pxmin-w-80pxmax-w-80px
w-88pxmin-w-88pxmax-w-88px
w-96pxmin-w-96pxmax-w-96px
w-112pxmin-w-112pxmax-w-112px
w-128pxmin-w-128pxmax-w-128px
w-256pxmin-w-256pxmax-w-256px
Height
Apply height dimensions to elements
HeightMin HeightMax Height
h-0pxmin-h-0pxmax-h-0px
h-1pxmin-h-1pxmax-h-1px
h-2pxmin-h-2pxmax-h-2px
h-4pxmin-h-4pxmax-h-4px
h-6pxmin-h-6pxmax-h-6px
h-8pxmin-h-8pxmax-h-8px
h-10pxmin-h-10pxmax-h-10px
h-12pxmin-h-12pxmax-h-12px
h-14pxmin-h-14pxmax-h-14px
h-16pxmin-h-16pxmax-h-16px
h-20pxmin-h-20pxmax-h-20px
h-24pxmin-h-24pxmax-h-24px
h-28pxmin-h-28pxmax-h-28px
h-32pxmin-h-32pxmax-h-32px
h-36pxmin-h-36pxmax-h-36px
h-40pxmin-h-40pxmax-h-40px
h-44pxmin-h-44pxmax-h-44px
h-48pxmin-h-48pxmax-h-48px
h-56pxmin-h-56pxmax-h-56px
h-64pxmin-h-64pxmax-h-64px
h-80pxmin-h-80pxmax-h-80px
h-88pxmin-h-88pxmax-h-88px
h-96pxmin-h-96pxmax-h-96px
h-112pxmin-h-112pxmax-h-112px
h-128pxmin-h-128pxmax-h-128px
h-256pxmin-h-256pxmax-h-256px

{title}