imagesearch_roller
rollercss
search
brightness_4
Installation
Get started with Rollercss
Use our cdn links to use Rollercss in your document. As reference, this is our cdn links
Description
URL
CSS
https://cdn.statically.io/gh/abtp2/gw/main/roller.css
JS
https://cdn.statically.io/gh/abtp2/gw/main/roller.js
Wants to know more about installation ?
view our get started page.
Get started
Layout
Container
A component for fixing an element's width to the current breakpoint.
Class
Properties
container
width = 100% (according to device)
Basic usage
Using the container
The 'container' class sets the 'max-width' of an element to match the 'min-width' of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.
Note : that unlike containers you might have used in other libraries, Rollercss’s container does not center itself automatically and does not have any
built-in horizontal padding.
Applying conditionally
Responsive variants
The 'container' class also includes responsive variants like 'md:container' by default that allow you to make something behave like a container at only a certain breakpoint and up:
<-- Full-width fluid until the `md` breakpoint, then lock to container-->
<div class="md:container md:mx-auto">
</div>
Hover state
Rollercss lets you conditionally apply utility classes in hover state using variant modifiers. For example, use hover:container.
<-- Full-width fluid until the user hover, then lock to container-->
<div class="hover:container hover:mx-auto">
</div>
Layout
Display
Utilities for controlling the display box type of an element.
Class
Properties
d-none
display = none
d-flex
display = flex
d-block
display = block
d-grid
display = grid
d-inline
display = inline
d-in-flex
display = inline-flex
d-in-block
display = inline-block
d-in-grid
display = inline-grid
d-in-table
display = inline-table
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:d-block , lg:d-grid , hover:d-flex etc.
Layout
Float
Utilities for controlling the wrapping of content around an element.
Class
Properties
float-none
float = none
float-left
float = left
float-right
float = right
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:float-left , lg:float-right , hover:float-left etc.
Layout
Overflow
Utilities for controlling how an element handles content that is too large for the container.
Class
Properties
overflow-auto
overflow = auto
overflow-hidden
overflow = hidden
overflow-visible
overflow = visible
overflow-scroll
overflow = scroll
overflow-x-auto
overflow-x = auto
overflow-x-hidden
overflow-x = hidden
overflow-x-visible
overflow-x = visible
overflow-x-scroll
overflow-x = scroll
overflow-y-auto
overflow-y = auto
overflow-y-hidden
overflow-y = hidden
overflow-y-visible
overflow-y = visible
overflow-y-scroll
overflow-y = scroll
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:overflow-hidden , lg:overflow-scroll , hover:overflow-hidden etc.
Layout
Position
Utilities for controlling how an element should be positioned.
Class
Properties
absolute
position = absolute
relative
position = relative
static
position = static
sticky
position = sticky
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:relative , lg:absolute , hover:static etc.
Layout
Visibility
Utilities for controlling the visibility of an element.
Class
Properties
visible
visibility = visible
invisible
visibility = hidden
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:invisible , lg:visible , hover:invisible etc.
Layout
Z-index
Utilities for controlling the 'z' axis of an element.
Class
Properties
z-auto
z-index = auto
z-0
z-index = 0
z-1
z-index = 10
z-2
z-index = 20
z-3
z-index = 30
z-4
z-index = 40
z-5
z-index = 50
z-6
z-index = 60
z-7
z-index = 70
z-8
z-index = 80
z-9
z-index = 90
z-10
z-index = 100
z-full
z-index = infinite
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:z-9 , lg:z-2 , hover:z-5 etc.
Layout
Colors
Utilities for all the colors.
Color name
Color
transparent
black
white
gray
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
brown
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900
brown-1000
orange
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
red
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
yellow
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
green
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
light-green
light-green-100
light-green-200
light-green-300
light-green-400
light-green-500
light-green-600
light-green-700
light-green-800
light-green-900
light-green-1000
pink
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
purple
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000
blue
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
light-blue
light-blue-100
light-blue-200
light-blue-300
light-blue-400
light-blue-500
light-blue-600
light-blue-700
light-blue-800
light-blue-900
light-blue-1000
cyan
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900
cyan-1000
Uses of these colors.
You can use these colors on every property which supportes colors. Example : c-red-500 , bg-yellow-300 , shadow-red-200 etc.
Typography
Font-family
Utilities for controlling the font family of an element.
Class
Properties
font-serif
font-family = serif
font-sans
font-family = sans
font-mono
font-family = mono
font-cursive
font-family = cursive
font-fantasy
font-family = fantasy
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:font-cursive , lg:font-fantasy , hover:font-sans etc.
Typography
Font-size
Utilities for controlling the font size of an element.
Class
Properties
text-1
font-size = 0.75rem
text-2
font-size = 0.875rem
text-3
font-size = 1rem
text-4
font-size = 1.125rem
text-5
font-size = 1.25rem
text-6
font-size = 1.5rem
text-7
font-size = 1.875
text-8
font-size = 2.25rem
text-9
font-size = 3rem
text-10
font-size = 3.5rem
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:text-5 , lg:text-8 , hover:text-10 etc.
Typography
Font-weight
Utilities for controlling the font weight of an element.
Class
Properties
text-bold-1
font-weight = 100
text-bold-2
font-weight = 200
text-bold-3
font-weight = 300
text-bold-4
font-weight = 400
text-bold-5
font-weight = 450
text-bold-6
font-weight = 500
text-bold-7
font-weight = 600
text-bold-8
font-weight = 700
text-bold-9
font-weight = 800
text-bold-10
font-weight = 900
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:text-bold-4 , lg:text-bold-6 , hover:text-bold-5 etc.
Typography
Font-style
Utilities for controlling the font style of an element.
Class
Properties
text-none
font-style = none
text-italic
font-style = italic
text-normal
font-style = normal
text-lower
font-style = lowercase
text-upper
font-style = uppercase
text-capital
font-style = capital
text-underline
font-style = underline
text-line-through
font-style = linethrough
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:text-none , lg:text-italic , hover:text-underline etc.
Typography
Font-color
Utilities for controlling the font color of an element.
Color name
Color
c-transparent
css
c-black
css
c-white
css
c-gray
css
c-gray-100
css
c-gray-200
css
c-gray-300
css
c-gray-400
css
c-gray-500
css
c-gray-600
css
c-gray-700
css
c-gray-800
css
c-gray-900
css
c-gray-1000
css
c-brown
css
c-brown-100
css
c-brown-200
css
c-brown-300
css
c-brown-400
css
c-brown-500
css
c-brown-600
css
c-brown-700
css
c-brown-800
css
c-brown-900
css
c-brown-1000
css
c-orange
css
c-orange-100
css
c-orange-200
css
c-orange-300
css
c-orange-400
css
c-orange-500
css
c-orange-600
css
c-orange-700
css
c-orange-800
css
c-orange-900
css
c-orange-1000
css
c-red
css
c-red-100
css
c-red-200
css
c-red-300
css
c-red-400
css
c-red-500
css
c-red-600
css
c-red-700
css
c-red-800
css
c-red-900
css
c-red-1000
css
c-yellow
css
c-yellow-100
css
c-yellow-200
css
c-yellow-300
css
c-yellow-400
css
c-yellow-500
css
c-yellow-600
css
c-yellow-700
css
c-yellow-800
css
c-yellow-900
css
c-yellow-1000
css
c-green
css
c-green-100
css
c-green-200
css
c-green-300
css
c-green-400
css
c-green-500
css
c-green-600
css
c-green-700
css
c-green-800
css
c-green-900
css
c-green-1000
css
c-light-green
css
c-light-green-100
css
c-light-green-200
css
c-light-green-300
css
c-light-green-400
css
c-light-green-500
css
c-light-green-600
css
c-light-green-700
css
c-light-green-800
css
c-light-green-900
css
c-light-green-1000
css
c-pink
css
c-pink-100
css
c-pink-200
css
c-pink-300
css
c-pink-400
css
c-pink-500
css
c-pink-600
css
c-pink-700
css
c-pink-800
css
c-pink-900
css
c-pink-1000
css
c-purple
css
c-purple-100
css
c-purple-200
css
c-purple-300
css
c-purple-400
css
c-purple-500
css
c-purple-600
css
c-purple-700
css
c-purple-800
css
c-purple-900
css
c-purple-1000
css
c-blue
css
c-blue-100
css
c-blue-200
css
c-blue-300
css
c-blue-400
css
c-blue-500
css
c-blue-600
css
c-blue-700
css
c-blue-800
css
c-blue-900
css
c-blue-1000
css
c-light-blue
css
c-light-blue-100
css
c-light-blue-200
css
c-light-blue-300
css
c-light-blue-400
css
c-light-blue-500
css
c-light-blue-600
css
c-light-blue-700
css
c-light-blue-800
css
c-light-blue-900
css
c-light-blue-1000
css
c-cyan
css
c-cyan-100
css
c-cyan-200
css
c-cyan-300
css
c-cyan-400
css
c-cyan-500
css
c-cyan-600
css
c-cyan-700
css
c-cyan-800
css
c-cyan-900
css
c-cyan-1000
css
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:c-blue , lg:c-red-500 , hover:c-yellow-900 etc.
Typography
Letter-spacing
Utilities for controlling the letter space of an element.
Class
Properties
text-space-1
letter-space = -0.05em
text-space-2
letter-space = -0.025em
text-space-3
letter-space = 0em
text-space-4
letter-space = 0.025em
text-space-5
letter-space = 0.05em
text-space-6
letter-space = 0.075em
text-space-7
letter-space = 0.1em
text-space-8
letter-space = 0.125em
text-space-9
letter-space = 0.15em
text-space-10
letter-space = 0.175em
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:text-space-4 , lg:text-space-9 , hover:text-space-3 etc.
Typography
Line-height
Utilities for controlling the line height of an element.
Class
Properties
line-space-1
line-space = 1
line-space-2
line-space = 1.2
line-space-3
line-space = 1.4
line-space-4
line-space = 1.6
line-space-5
line-space = 1.8
line-space-6
line-space = 2
line-space-7
line-space = 2.2
line-space-8
line-space = 2.4
line-space-9
line-space = 2.6
line-space-10
line-space = 2.8
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:line-space-4 , lg:line-space-9 , hover:line-space-3 etc.
Typography
Text-alignment
Utilities for controlling the text alignment of an element.
Class
Properties
text-left
text-align = left
text-right
text-align = right
text-center
text-align = center
text-justify
text-align = justify
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:text-left , lg:text-right , hover:text-center etc.
Typography
Vertical-alignment
Utilities for controlling the vertical alignment of an element.
Class
Properties
valign-base
vertical-align = base
valign-bottom
vertical-align = bottom
valign-middle
vertical-align = middle
valign-top
vertical-align = top
valign-text-top
vertical-align = text-top
valign-text-bottom
vertical-align = bottom
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:valign-base , lg:valign-bottom , hover:valign-top etc.
Typography
Whitespace and Wrapping
Utilities for controlling the whitespace and wrapping of an element.
Class
Properties
whitespace-normal
white-space = normal
whitespace-no-wrap
white-space = nowrap
whitespace-pre
white-space = pre
whitespace-pre-line
white-space = pre-line
whitespace-pre-wrap
white-space = pre-wrap
break-normal
word-break = normal
break-word
word-break = word
break-all
word-break = all
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:whitespace-no-wrap , lg:whitespace-normal , hover:break-word etc.
Background
Background-color
Utilities for controlling the background color of an element.
Color name
Color
bg-transparent
bg-black
bg-white
bg-gray
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
bg-gray-900
bg-gray-1000
bg-brown
bg-brown-100
bg-brown-200
bg-brown-300
bg-brown-400
bg-brown-500
bg-brown-600
bg-brown-700
bg-brown-800
bg-brown-900
bg-brown-1000
bg-orange
bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
bg-orange-1000
bg-red
bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
bg-red-800
bg-red-900
bg-red-1000
bg-yellow
bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500
bg-yellow-600
bg-yellow-700
bg-yellow-800
bg-yellow-900
bg-yellow-1000
bg-green
bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500
bg-green-600
bg-green-700
bg-green-800
bg-green-900
bg-green-1000
bg-light-green
bg-light-green-100
bg-light-green-200
bg-light-green-300
bg-light-green-400
bg-light-green-500
bg-light-green-600
bg-light-green-700
bg-light-green-800
bg-light-green-900
bg-light-green-1000
bg-pink
bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500
bg-pink-600
bg-pink-700
bg-pink-800
bg-pink-900
bg-pink-1000
bg-purple
bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500
bg-purple-600
bg-purple-700
bg-purple-800
bg-purple-900
bg-purple-1000
bg-blue
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900
bg-blue-1000
bg-light-blue
bg-light-blue-100
bg-light-blue-200
bg-light-blue-300
bg-light-blue-400
bg-light-blue-500
bg-light-blue-600
bg-light-blue-700
bg-light-blue-800
bg-light-blue-900
bg-light-blue-1000
bg-cyan
bg-cyan-100
bg-cyan-200
bg-cyan-300
bg-cyan-400
bg-cyan-500
bg-cyan-600
bg-cyan-700
bg-cyan-800
bg-cyan-900
bg-cyan-1000
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:bg-red-600 , lg:bg-yellow-300 , hover:bg-cyan etc.
Background
Background-size
Utilities for controlling the background size of an element.
Class
Properties
bg-auto
background-size = auto
bg-cover
background-size = cover
bg-contain
background-size = contain
bg-full
background-size = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:bg-full , lg:bg-auto , hover:bg-contain etc.
Background
Background-position
Utilities for controlling the background position of an element.
Class
Properties
bg-center
background-position = center
bg-top
background-position = top
bg-right
background-position = right
bg-bottom
background-position = bottom
bg-left
background-position = left
bg-left-top
background-position = left-top
bg-left-bottom
background-position = left-bottom
bg-right-top
background-position = right-top
bg-right-bottom
background-position = right-bottom
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:bg-left , lg:bg-right , hover:bg-top-left etc.
Background
Background-repeat
Utilities for controlling the background repeat of an element.
Class
Properties
bg-repeat
background-repeat = repeat
bg-no-repeat
background-repeat = no-repeat
bg-repeat-x
background-size = repeat-x
bg-repeat-y
background-size = repeat-y
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:bg-repeat , lg:bg-no-repeat hover:bg-repeat-y etc.
Background
Background-attachment
Utilities for controlling the background attachment of an element.
Class
Properties
bg-fixed
background-attachment = fixed
bg-local
background-attachment = local
bg-scroll
background-attachment = scroll
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:bg-fixed , lg:bg-scroll hover:bg-fixed etc.
Border
Border-color
Utilities for controlling the border color of an element.
Color name
Color
b-transparent
border-color = transparent
b-black
border-color = b-black
b-white
border-color = b-white
b-gray
border-color = b-gray
b-gray-100
border-color = b-gray-100
b-gray-200
border-color = b-gray-200
b-gray-300
border-color = b-gray-300
b-gray-400
border-color = b-gray-400
b-gray-500
border-color = b-gray-500
b-gray-600
border-color = b-gray-600
b-gray-700
border-color = b-gray-700
b-gray-800
border-color = b-gray-800
b-gray-900
border-color = b-gray-900
b-gray-1000
border-color = b-gray-1000
b-brown
border-color = b-brown
b-brown-100
border-color = b-brown-100
b-brown-200
border-color = b-brown-200
b-brown-300
border-color = b-brown-300
b-brown-400
border-color = b-brown-400
b-brown-500
border-color = b-brown-500
b-brown-600
border-color = b-brown-600
b-brown-700
border-color = b-brown-700
b-brown-800
border-color = b-brown-800
b-brown-900
border-color = b-brown-900
b-brown-1000
border-color = b-brown-1000
b-orange
border-color = b-orange
b-orange-100
border-color = b-orange-100
b-orange-200
border-color = b-orange-200
b-orange-300
border-color = b-orange-300
b-orange-400
border-color = b-orange-400
b-orange-500
border-color = b-orange-500
b-orange-600
border-color = b-orange-600
b-orange-700
border-color = b-orange-700
b-orange-800
border-color = b-orange-800
b-orange-900
border-color = b-orange-900
b-orange-1000
border-color = b-orange-1000
b-red
border-color = b-red
b-red-100
border-color = b-red-100
b-red-200
border-color = b-red-200
b-red-300
border-color = b-red-300
b-red-400
border-color = b-red-400
b-red-500
border-color = b-red-500
b-red-600
border-color = b-red-600
b-red-700
border-color = b-red-700
b-red-800
border-color = b-red-800
b-red-900
border-color = b-red-900
b-red-1000
border-color = b-red-1000
b-yellow
border-color = b-yellow
b-yellow-100
border-color = b-yellow-100
b-yellow-200
border-color = b-yellow-200
b-yellow-300
border-color = b-yellow-300
b-yellow-400
border-color = b-yellow-400
b-yellow-500
border-color = b-yellow-500
b-yellow-600
border-color = b-yellow-600
b-yellow-700
border-color = b-yellow-700
b-yellow-800
border-color = b-yellow-800
b-yellow-900
border-color = b-yellow-900
b-yellow-1000
border-color = b-yellow-1000
b-green
border-color = b-green
b-green-100
border-color = b-green-100
b-green-200
border-color = b-green-200
b-green-300
border-color = b-green-300
b-green-400
border-color = b-green-400
b-green-500
border-color = b-green-500
b-green-600
border-color = b-green-600
b-green-700
border-color = b-green-700
b-green-800
border-color = b-green-800
b-green-900
border-color = b-green-900
b-green-1000
border-color = b-green-1000
b-light-green
border-color = b-light-green
b-light-green-100
border-color = b-light-green-100
b-light-green-200
border-color = b-light-green-200
b-light-green-300
border-color = b-light-green-300
b-light-green-400
border-color = b-light-green-400
b-light-green-500
border-color = b-light-green-500
b-light-green-600
border-color = b-light-green-600
b-light-green-700
border-color = b-light-green-700
b-light-green-800
border-color = b-light-green-800
b-light-green-900
border-color = b-light-green-900
b-light-green-1000
border-color = b-light-green-1000
b-pink
border-color = b-pink
b-pink-100
border-color = b-pink-100
b-pink-200
border-color = b-pink-200
b-pink-300
border-color = b-pink-300
b-pink-400
border-color = b-pink-400
b-pink-500
border-color = b-pink-500
b-pink-600
border-color = b-pink-600
b-pink-700
border-color = b-pink-700
b-pink-800
border-color = b-pink-800
b-pink-900
border-color = b-pink-900
b-pink-1000
border-color = b-pink-1000
b-purple
border-color = b-purple
b-purple-100
border-color = b-purple-100
b-purple-200
border-color = b-purple-200
b-purple-300
border-color = b-purple-300
b-purple-400
border-color = b-purple-400
b-purple-500
border-color = b-purple-500
b-purple-600
border-color = b-purple-600
b-purple-700
border-color = b-purple-700
b-purple-800
border-color = b-purple-800
b-purple-900
border-color = b-purple-900
b-purple-1000
border-color = b-purple-1000
b-blue
border-color = b-blue
b-blue-100
border-color = b-blue-100
b-blue-200
border-color = b-blue-200
b-blue-300
border-color = b-blue-300
b-blue-400
border-color = b-blue-400
b-blue-500
border-color = b-blue-500
b-blue-600
border-color = b-blue-600
b-blue-700
border-color = b-blue-700
b-blue-800
border-color = b-blue-800
b-blue-900
border-color = b-blue-900
b-blue-1000
border-color = b-blue-1000
b-light-blue
border-color = b-light-blue
b-light-blue-100
border-color = b-light-blue-100
b-light-blue-200
border-color = b-light-blue-200
b-light-blue-300
border-color = b-light-blue-300
b-light-blue-400
border-color = b-light-blue-400
b-light-blue-500
border-color = b-light-blue-500
b-light-blue-600
border-color = b-light-blue-600
b-light-blue-700
border-color = b-light-blue-700
b-light-blue-800
border-color = b-light-blue-800
b-light-blue-900
border-color = b-light-blue-900
b-light-blue-1000
border-color = b-light-blue-1000
b-cyan
border-color = b-cyan
b-cyan-100
border-color = b-cyan-100
b-cyan-200
border-color = b-cyan-200
b-cyan-300
border-color = b-cyan-300
b-cyan-400
border-color = b-cyan-400
b-cyan-500
border-color = b-cyan-500
b-cyan-600
border-color = b-cyan-600
b-cyan-700
border-color = b-cyan-700
b-cyan-800
border-color = b-cyan-800
b-cyan-900
border-color = b-cyan-900
b-cyan-1000
border-color = cyan-1000
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:b-red-600 , lg:b-yellow-300 , hover:b-cyan etc.
Border
Border-width
Utilities for controlling the border width of an element.
Class
Properties
b-1
border-width = 1px
b-2
border-width = 2px
b-3
border-width = 3px
b-4
border-width = 4px
b-5
border-width = 5px
b-6
border-width = 6px
b-7
border-width = 7px
b-8
border-width = 8px
b-9
border-width = 9px
b-10
border-width = 10px
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:b-3 , lg:b-6 , hover:b-9 etc.
Border
border-style
Utilities for controlling the border style of an element.
Class
Properties
b-none
border-style = none
b-solid
border-style = solid
b-double
border-style = double
b-dashed
border-style = dashed
b-dotted
border-style = dotted
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:b-dotted , lg:b-solid , hover:b-dashed etc.
Border
border-radius
Utilities for controlling the border radius of an element.
Class
Properties
round-0
border-radius = 0rem
round-1
border-radius = 0.3rem
round-2
border-radius = 0.6rem
round-3
border-radius = 0.9rem
round-4
border-radius = 1.2rem
round-5
border-radius = 1.5rem
round-6
border-radius = 1.8rem
round-7
border-radius = 2.1rem
round-8
border-radius = 2.4rem
round-9
border-radius = 2.7rem
round-10
border-radius = 3rem
round-full
border-radius = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:round-5 , lg:round-6 , hover:round-0 etc.
Outline
outline-color
Utilities for controlling the outline color of an element.
Color name
Color
o-transparent
outline-color = transparent
o-black
outline-color = o-black
o-white
outline-color = o-white
o-gray
outline-color = o-gray
o-gray-100
outline-color = o-gray-100
o-gray-200
outline-color = o-gray-200
o-gray-300
outline-color = o-gray-300
o-gray-400
outline-color = o-gray-400
o-gray-500
outline-color = o-gray-500
o-gray-600
outline-color = o-gray-600
o-gray-700
outline-color = o-gray-700
o-gray-800
outline-color = o-gray-800
o-gray-900
outline-color = o-gray-900
o-gray-1000
outline-color = o-gray-1000
o-brown
outline-color = o-brown
o-brown-100
outline-color = o-brown-100
o-brown-200
outline-color = o-brown-200
o-brown-300
outline-color = o-brown-300
o-brown-400
outline-color = o-brown-400
o-brown-500
outline-color = o-brown-500
o-brown-600
outline-color = o-brown-600
o-brown-700
outline-color = o-brown-700
o-brown-800
outline-color = o-brown-800
o-brown-900
outline-color = o-brown-900
o-brown-1000
outline-color = o-brown-1000
o-orange
outline-color = o-orange
o-orange-100
outline-color = o-orange-100
o-orange-200
outline-color = o-orange-200
o-orange-300
outline-color = o-orange-300
o-orange-400
outline-color = o-orange-400
o-orange-500
outline-color = o-orange-500
o-orange-600
outline-color = o-orange-600
o-orange-700
outline-color = o-orange-700
o-orange-800
outline-color = o-orange-800
o-orange-900
outline-color = o-orange-900
o-orange-1000
outline-color = o-orange-1000
o-red
outline-color = o-red
o-red-100
outline-color = o-red-100
o-red-200
outline-color = o-red-200
o-red-300
outline-color = o-red-300
o-red-400
outline-color = o-red-400
o-red-500
outline-color = o-red-500
o-red-600
outline-color = o-red-600
o-red-700
outline-color = o-red-700
o-red-800
outline-color = o-red-800
o-red-900
outline-color = o-red-900
o-red-1000
outline-color = o-red-1000
o-yellow
outline-color = o-yellow
o-yellow-100
outline-color = o-yellow-100
o-yellow-200
outline-color = o-yellow-200
o-yellow-300
outline-color = o-yellow-300
o-yellow-400
outline-color = o-yellow-400
o-yellow-500
outline-color = o-yellow-500
o-yellow-600
outline-color = o-yellow-600
o-yellow-700
outline-color = o-yellow-700
o-yellow-800
outline-color = o-yellow-800
o-yellow-900
outline-color = o-yellow-900
o-yellow-1000
outline-color = o-yellow-1000
o-green
outline-color = o-green
o-green-100
outline-color = o-green-100
o-green-200
outline-color = o-green-200
o-green-300
outline-color = o-green-300
o-green-400
outline-color = o-green-400
o-green-500
outline-color = o-green-500
o-green-600
outline-color = o-green-600
o-green-700
outline-color = o-green-700
o-green-800
outline-color = o-green-800
o-green-900
outline-color = o-green-900
o-green-1000
outline-color = o-green-1000
o-light-green
outline-color = o-light-green
o-light-green-100
outline-color = o-light-green-100
o-light-green-200
outline-color = o-light-green-200
o-light-green-300
outline-color = o-light-green-300
o-light-green-400
outline-color = o-light-green-400
o-light-green-500
outline-color = o-light-green-500
o-light-green-600
outline-color = o-light-green-600
o-light-green-700
outline-color = o-light-green-700
o-light-green-800
outline-color = o-light-green-800
o-light-green-900
outline-color = o-light-green-900
o-light-green-1000
outline-color = o-light-green-1000
o-pink
outline-color = o-pink
o-pink-100
outline-color = o-pink-100
o-pink-200
outline-color = o-pink-200
o-pink-300
outline-color = o-pink-300
o-pink-400
outline-color = o-pink-400
o-pink-500
outline-color = o-pink-500
o-pink-600
outline-color = o-pink-600
o-pink-700
outline-color = o-pink-700
o-pink-800
outline-color = o-pink-800
o-pink-900
outline-color = o-pink-900
o-pink-1000
outline-color = o-pink-1000
o-purple
outline-color = o-purple
o-purple-100
outline-color = o-purple-100
o-purple-200
outline-color = o-purple-200
o-purple-300
outline-color = o-purple-300
o-purple-400
outline-color = o-purple-400
o-purple-500
outline-color = o-purple-500
o-purple-600
outline-color = o-purple-600
o-purple-700
outline-color = o-purple-700
o-purple-800
outline-color = o-purple-800
o-purple-900
outline-color = o-purple-900
o-purple-1000
outline-color = o-purple-1000
o-blue
outline-color = o-blue
o-blue-100
outline-color = o-blue-100
o-blue-200
outline-color = o-blue-200
o-blue-300
outline-color = o-blue-300
o-blue-400
outline-color = o-blue-400
o-blue-500
outline-color = o-blue-500
o-blue-600
outline-color = o-blue-600
o-blue-700
outline-color = o-blue-700
o-blue-800
outline-color = o-blue-800
o-blue-900
outline-color = o-blue-900
o-blue-1000
outline-color = o-blue-1000
o-light-blue
outline-color = o-light-blue
o-light-blue-100
outline-color = o-light-blue-100
o-light-blue-200
outline-color = o-light-blue-200
o-light-blue-300
outline-color = o-light-blue-300
o-light-blue-400
outline-color = o-light-blue-400
o-light-blue-500
outline-color = o-light-blue-500
o-light-blue-600
outline-color = o-light-blue-600
o-light-blue-700
outline-color = o-light-blue-700
o-light-blue-800
outline-color = o-light-blue-800
o-light-blue-900
outline-color = o-light-blue-900
o-light-blue-1000
outline-color = o-light-blue-1000
o-cyan
outline-color = o-cyan
o-cyan-100
outline-color = o-cyan-100
o-cyan-200
outline-color = o-cyan-200
o-cyan-300
outline-color = o-cyan-300
o-cyan-400
outline-color = o-cyan-400
o-cyan-500
outline-color = o-cyan-500
o-cyan-600
outline-color = o-cyan-600
o-cyan-700
outline-color = o-cyan-700
o-cyan-800
outline-color = o-cyan-800
o-cyan-900
outline-color = o-cyan-900
o-cyan-1000
outline-color = cyan-1000
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:o-red-600 , lg:o-yellow-300 , hover:o-cyan etc.
Outline
outline-width
Utilities for controlling the outline width of an element.
Class
Properties
o-1
outline-width = 1px
o-2
outline-width = 2px
o-3
outline-width = 3px
o-4
outline-width = 4px
o-5
outline-width = 5px
o-6
outline-width = 6px
o-7
outline-width = 7px
o-8
outline-width = 8px
o-9
outline-width = 9px
o-10
outline-width = 10px
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:o-3 , lg:o-6 , hover:o-9 etc.
Outline
outline-style
Utilities for controlling the outline style of an element.
Class
Properties
o-none
outline-style = none
o-solid
outline-style = solid
o-double
outline-style = double
o-dashed
outline-style = dashed
o-dotted
outline-style = dotted
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:o-dotted , lg:o-solid , hover:o-dashed etc.
Flexbox
Flex-direction
Utilities for controlling the flex direction property of an element.
Class
Properties
flex-col
flex-direction = column
flex-row
flex-direction = row
flex-col-reverse
flex-direction = col-reverse
flex-row-reverse
flex-direction = row-reverse
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:flex-row , lg:flex-col , hover:flex-row etc.
Flexbox
Flex-wrapping
Utilities for controlling the flex wrapping property of an element.
Class
Properties
flex-wrap
flex-wrap = wrap
flex-wrap-reverse
flex-wrap = wrap-reverse
flex-no-wrap
flex-wrap = no-wrap
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:flex-wrap , lg:flex-wrap-reverse , hover:flex-no-wrap etc.
Flexbox
Align-items
Utilities for controlling the aalignment of items inside an element.
Class
Properties
items-center
align-items = center
items-start
align-items = flex-start
items-end
align-items = flex-end
items-stretch
align-items = stretch
items-base
align-items = baseline
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:items-center , lg:items-start , hover:items-stretch etc.
Flexbox
Align-content
Utilities for controlling the aalignment of content inside an element.
Class
Properties
content-center
align-content = center
content-start
align-content = flex-start
content-end
align-content = flex-end
content-stretch
align-content = stretch
content-between
align-content = space-between
content-around
align-content = space-around
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:content-center , lg:content-start , hover:content-around etc.
Flexbox
Align-self
Utilities for controlling the self aalignment inside an element.
Class
Properties
self-auto
align-self = auto
self-center
align-self = center
self-start
align-self = flex-start
self-end
align-self = flex-end
self-stretch
align-self = stretch
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:self-center , lg:self-start , hover:self-auto etc.
Flexbox
Justify-content
Utilities for controlling the justification of content inside an element.
Class
Properties
justify-center
justify-content = center
justify-start
justify-content = flex-start
justify-end
justify-content = flex-end
justify-between
justify-content = space-between
justify-around
justify-content = space-around
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:justify-start , lg:justify-end , hover:justify-centet etc.
Spacing
Margin
Utilities for controlling the margin for an element.
Class
Properties
m-0
margin = 0
m-auto
margin = auto
m-1
margin = 0.8rem
m-2
margin = 1.6rem
m-3
margin = 2.4rem
m-4
margin = 3.2rem
m-5
margin = 4rem
m-6
margin = 4.8rem
m-7
margin = 5.6rem
m-8
margin = 6.4rem
m-9
margin = 7.2rem
m-10
margin = 8rem
mt-0
margin-top = 0
mt-auto
margin-top = auto
mt-1
margin-top = 0.8rem
mt-2
margin-top = 1.6rem
mt-3
margin-top = 2.4rem
mt-4
margin-top = 3.2rem
mt-5
margin-top = 4rem
mt-6
margin-top = 4.8rem
mt-7
margin-top = 5.6rem
mt-8
margin-top = 6.4rem
mt-9
margin-top = 7.2rem
mt-10
margin-top = 8rem
mr-0
margin-right = 0
mr-auto
margin-right = auto
mr-1
margin-right = 0.8rem
mr-2
margin-right = 1.6rem
mr-3
margin-right = 2.4rem
mr-4
margin-right = 3.2rem
mr-5
margin-right = 4rem
mr-6
margin-right = 4.8rem
mr-7
margin-right = 5.6rem
mr-8
margin-right = 6.4rem
mr-9
margin-right = 7.2rem
mr-10
margin-right = 8rem
mb-0
margin-bottom = 0
mb-auto
margin-bottom = auto
mb-1
margin-bottom = 0.8rem
mb-2
margin-bottom = 1.6rem
mb-3
margin-bottom = 2.4rem
mb-4
margin-bottom = 3.2rem
mb-5
margin-bottom = 4rem
mb-6
margin-bottom = 4.8rem
mb-7
margin-bottom = 5.6rem
mb-8
margin-bottom = 6.4rem
mb-9
margin-bottom = 7.2rem
mb-10
margin-bottom = 8rem
ml-0
margin-left = 0
ml-auto
margin-left = auto
ml-1
margin-left = 0.8rem
ml-2
margin-left = 1.6rem
ml-3
margin-left = 2.4rem
ml-4
margin-left = 3.2rem
ml-5
margin-left = 4rem
ml-6
margin-left = 4.8rem
ml-7
margin-left = 5.6rem
ml-8
margin-left = 6.4rem
ml-9
margin-left = 7.2rem
ml-10
margin-left = 8rem
mx-0
margin-left,
margin-right = 0
mx-auto
margin-left,
margin-right = auto
mx-1
margin-left,
margin-right = 0.8rem
mx-2
margin-left,
margin-right = 1.6rem
mx-3
margin-left,
margin-right = 2.4rem
mx-4
margin-left,
margin-right = 3.2rem
mx-5
margin-left,
margin-right = 4rem
mx-6
margin-left,
margin-right = 4.8rem
mx-7
margin-left,
margin-right = 5.6rem
mx-8
margin-left,
margin-right = 6.4rem
mx-9
margin-left,
margin-right = 7.2rem
mx-10
margin-left,
margin-right = 8rem
my-0
margin-top,
margin-bottom = 0
my-auto
margin-top,
margin-bottom = auto
my-1
margin-top,
margin-bottom = 0.8rem
my-2
margin-top,
margin-bottom = 1.6rem
my-3
margin-top,
margin-bottom = 2.4rem
my-4
margin-top,
margin-bottom = 3.2rem
my-5
margin-top,
margin-bottom = 4rem
my-6
margin-top,
margin-bottom = 4.8rem
my-7
margin-top,
margin-bottom = 5.6rem
my-8
margin-top,
margin-bottom = 6.4rem
my-9
margin-top,
margin-bottom = 7.2rem
my-10
margin-top,
margin-bottom = 8rem
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:mt-5 , lg:ml-8 , hover:mx-auto etc.
Spacing
Padding
Utilities for controlling the padding for an element.
Class
Properties
p-0
padding = 0
p-auto
padding = auto
p-1
padding = 0.8rem
p-2
padding = 1.6rem
p-3
padding = 2.4rem
p-4
padding = 3.2rem
p-5
padding = 4rem
p-6
padding = 4.8rem
p-7
padding = 5.6rem
p-8
padding = 6.4rem
p-9
padding = 7.2rem
p-10
padding = 8rem
pt-0
padding-top = 0
pt-auto
padding-top = auto
pt-1
padding-top = 0.8rem
pt-2
padding-top = 1.6rem
pt-3
padding-top = 2.4rem
pt-4
padding-top = 3.2rem
pt-5
padding-top = 4rem
pt-6
padding-top = 4.8rem
pt-7
padding-top = 5.6rem
pt-8
padding-top = 6.4rem
pt-9
padding-top = 7.2rem
pt-10
padding-top = 8rem
pr-0
padding-right = 0
pr-auto
padding-right = auto
pr-1
padding-right = 0.8rem
pr-2
padding-right = 1.6rem
pr-3
padding-right = 2.4rem
pr-4
padding-right = 3.2rem
pr-5
padding-right = 4rem
pr-6
padding-right = 4.8rem
pr-7
padding-right = 5.6rem
pr-8
padding-right = 6.4rem
pr-9
padding-right = 7.2rem
pr-10
padding-right = 8rem
pb-0
padding-bottom = 0
pb-auto
padding-bottom = auto
pb-1
padding-bottom = 0.8rem
pb-2
padding-bottom = 1.6rem
pb-3
padding-bottom = 2.4rem
pb-4
padding-bottom = 3.2rem
pb-5
padding-bottom = 4rem
pb-6
padding-bottom = 4.8rem
pb-7
padding-bottom = 5.6rem
pb-8
padding-bottom = 6.4rem
pb-9
padding-bottom = 7.2rem
pb-10
padding-bottom = 8rem
pl-0
padding-left = 0
pl-auto
padding-left = auto
pl-1
padding-left = 0.8rem
pl-2
padding-left = 1.6rem
pl-3
padding-left = 2.4rem
pl-4
padding-left = 3.2rem
pl-5
padding-left = 4rem
pl-6
padding-left = 4.8rem
pl-7
padding-left = 5.6rem
pl-8
padding-left = 6.4rem
pl-9
padding-left = 7.2rem
pl-10
padding-left = 8rem
px-0
padding-left,
padding-right = 0
px-auto
padding-left,
padding-right = auto
px-1
padding-left,
padding-right = 0.8rem
px-2
padding-left,
padding-right = 1.6rem
px-3
padding-left,
padding-right = 2.4rem
px-4
padding-left,
padding-right = 3.2rem
px-5
padding-left,
padding-right = 4rem
px-6
padding-left,
padding-right = 4.8rem
px-7
padding-left,
padding-right = 5.6rem
px-8
padding-left,
padding-right = 6.4rem
px-9
padding-left,
padding-right = 7.2rem
px-10
padding-left,
padding-right = 8rem
py-0
padding-top,
padding-bottom = 0
py-auto
padding-top,
padding-bottom = auto
py-1
padding-top,
padding-bottom = 0.8rem
py-2
padding-top,
padding-bottom = 1.6rem
py-3
padding-top,
padding-bottom = 2.4rem
py-4
padding-top,
padding-bottom = 3.2rem
py-5
padding-top,
padding-bottom = 4rem
py-6
padding-top,
padding-bottom = 4.8rem
py-7
padding-top,
padding-bottom = 5.6rem
py-8
padding-top,
padding-bottom = 6.4rem
py-9
padding-top,
padding-bottom = 7.2rem
py-10
padding-top,
padding-bottom = 8rem
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:pt-5 , lg:pl-8 , hover:px-auto etc.
Sizing
Width
Utilities for controlling the width of an element.
Class
Properties
w-0
width = 0
w-auto
width = auto
w-full
width = 100%
w-screen
width = device-width
w-1
width = 0.8rem
w-2
width = 1.6rem
w-3
width = 2.4rem
w-4
width = 3.2rem
w-5
width = 4rem
w-6
width = 4.8rem
w-7
width = 5.6rem
w-8
width = 6.4rem
w-9
width = 7.2rem
w-10
width = 8rem
w-0%
width = 0%
w-10%
width = 10%
w-20%
width = 20%
w-30%
width = 30%
w-40%
width = 40%
w-50%
width = 50%
w-60%
width = 60%
w-70%
width = 70%
w-80%
width = 80%
w-90%
width = 90%
w-100%
width = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:w-7 , lg:w-60% , hover:w-full etc.
Sizing
Max-width
Utilities for controlling the max-width of an element.
Class
Properties
max-w-0
max-width = 0
max-w-auto
max-width = auto
max-w-full
max-width = 100%
max-w-screen
max-width = device-width
max-w-1
max-width = 0.8rem
max-w-2
max-width = 1.6rem
max-w-3
max-width = 2.4rem
max-w-4
max-width = 3.2rem
max-w-5
max-width = 4rem
max-w-6
max-width = 4.8rem
max-w-7
max-width = 5.6rem
max-w-8
max-width = 6.4rem
max-w-9
max-width = 7.2rem
max-w-10
max-width = 8rem
max-w-0%
max-width = 0%
max-w-10%
max-width = 10%
max-w-20%
max-width = 20%
max-w-30%
max-width = 30%
max-w-40%
max-width = 40%
max-w-50%
max-width = 50%
max-w-60%
max-width = 60%
max-w-70%
max-width = 70%
max-w-80%
max-width = 80%
max-w-90%
max-width = 90%
max-w-100%
max-width = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:max-w-7 , lg:max-w-60% , hover:max-w-full etc.
Sizing
Min-width
Utilities for controlling the min-width of an element.
Class
Properties
min-w-0
min-width = 0
min-w-auto
min-width = auto
min-w-full
min-width = 100%
min-w-screen
min-width = device-width
min-w-1
min-width = 0.8rem
min-w-2
min-width = 1.6rem
min-w-3
min-width = 2.4rem
min-w-4
min-width = 3.2rem
min-w-5
min-width = 4rem
min-w-6
min-width = 4.8rem
min-w-7
min-width = 5.6rem
min-w-8
min-width = 6.4rem
min-w-9
min-width = 7.2rem
min-w-10
min-width = 8rem
min-w-0%
min-width = 0%
min-w-10%
min-width = 10%
min-w-20%
min-width = 20%
min-w-30%
min-width = 30%
min-w-40%
min-width = 40%
min-w-50%
min-width = 50%
min-w-60%
min-width = 60%
min-w-70%
min-width = 70%
min-w-80%
min-width = 80%
min-w-90%
min-width = 90%
min-w-100%
min-width = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:min-w-7 , lg:min-w-60% , hover:min-w-full etc.
Sizing
height
Utilities for controlling the height of an element.
Class
Properties
h-0
height = 0
h-auto
height = auto
h-full
height = 100%
h-screen
height = device-height
h-1
height = 0.8rem
h-2
height = 1.6rem
h-3
height = 2.4rem
h-4
height = 3.2rem
h-5
height = 4rem
h-6
height = 4.8rem
h-7
height = 5.6rem
h-8
height = 6.4rem
h-9
height = 7.2rem
h-10
height = 8rem
h-0%
height = 0%
h-10%
height = 10%
h-20%
height = 20%
h-30%
height = 30%
h-40%
height = 40%
h-50%
height = 50%
h-60%
height = 60%
h-70%
height = 70%
h-80%
height = 80%
h-90%
height = 90%
h-100%
height = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:h-7 , lg:h-60% , hover:h-full etc.
Sizing
Max-height
Utilities for controlling the max-height of an element.
Class
Properties
max-h-0
max-height = 0
max-h-auto
max-height = auto
max-h-full
max-height = 100%
max-h-screen
max-height = device-height
max-h-1
max-height = 0.8rem
max-h-2
max-height = 1.6rem
max-h-3
max-height = 2.4rem
max-h-4
max-height = 3.2rem
max-h-5
max-height = 4rem
max-h-6
max-height = 4.8rem
max-h-7
max-height = 5.6rem
max-h-8
max-height = 6.4rem
max-h-9
max-height = 7.2rem
max-h-10
max-height = 8rem
max-h-0%
max-height = 0%
max-h-10%
max-height = 10%
max-h-20%
max-height = 20%
max-h-30%
max-height = 30%
max-h-40%
max-height = 40%
max-h-50%
max-height = 50%
max-h-60%
max-height = 60%
max-h-70%
max-height = 70%
max-h-80%
max-height = 80%
max-h-90%
max-height = 90%
max-h-100%
max-height = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:max-h-7 , lg:max-h-60% , hover:max-h-full etc.
Sizing
Min-height
Utilities for controlling the min-height of an element.
Class
Properties
min-h-0
min-height = 0
min-h-auto
min-height = auto
min-h-full
min-height = 100%
min-h-screen
min-height = device-height
min-h-1
min-height = 0.8rem
min-h-2
min-height = 1.6rem
min-h-3
min-height = 2.4rem
min-h-4
min-height = 3.2rem
min-h-5
min-height = 4rem
min-h-6
min-height = 4.8rem
min-h-7
min-height = 5.6rem
min-h-8
min-height = 6.4rem
min-h-9
min-height = 7.2rem
min-h-10
min-height = 8rem
min-h-0%
min-height = 0%
min-h-10%
min-height = 10%
min-h-20%
min-height = 20%
min-h-30%
min-height = 30%
min-h-40%
min-height = 40%
min-h-50%
min-height = 50%
min-h-60%
min-height = 60%
min-h-70%
min-height = 70%
min-h-80%
min-height = 80%
min-h-90%
min-height = 90%
min-h-100%
min-height = 100%
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:min-h-7 , lg:min-h-60% , hover:min-h-full etc.
Transform
Rotate
Utilities for controlling the rotation of an element.
Class
Properties
rotate-0
rotate = 0deg
rotate-1
rotate = 1deg
rotate-2
rotate = 2deg
rotate-3
rotate = 3deg
rotate-4
rotate = 4deg
rotate-5
rotate = 5deg
rotate-6
rotate = 6deg
rotate-7
rotate = 7deg
rotate-8
rotate = 8deg
rotate-9
rotate = 9deg
rotate-10
rotate = 10deg
rotate-15
rotate = 15deg
rotate-30
rotate = 30deg
rotate-45
rotate = 45deg
rotate-60
rotate = 60deg
rotate-75
rotate = 75deg
rotate-90
rotate = 90deg
rotate-105
rotate = 105deg
rotate-120
rotate = 120deg
rotate-135
rotate = 135deg
rotate-150
rotate = 150deg
rotate-165
rotate = 165deg
rotate-180
rotate = 180deg
rotate-x-0
rotateX = 0deg
rotate-x-1
rotateX = 1deg
rotate-x-2
rotateX = 2deg
rotate-x-3
rotateX = 3deg
rotate-x-4
rotateX = 4deg
rotate-x-5
rotateX = 5deg
rotate-x-6
rotateX = 6deg
rotate-x-7
rotateX = 7deg
rotate-x-8
rotateX = 8deg
rotate-x-9
rotateX = 9deg
rotate-x-10
rotateX = 10deg
rotate-x-15
rotateX = 15deg
rotate-x-30
rotateX = 30deg
rotate-x-45
rotateX = 45deg
rotate-x-60
rotateX = 60deg
rotate-x-75
rotateX = 75deg
rotate-x-90
rotateX = 90deg
rotate-x-105
rotateX = 105deg
rotate-x-120
rotateX = 120deg
rotate-x-135
rotateX = 135deg
rotate-x-150
rotateX = 150deg
rotate-x-165
rotateX = 165deg
rotate-x-180
rotateX = 180deg
rotate-y-0
rotateY = 0deg
rotate-y-1
rotateY = 1deg
rotate-y-2
rotateY = 2deg
rotate-y-3
rotateY = 3deg
rotate-y-4
rotateY = 4deg
rotate-y-5
rotateY = 5deg
rotate-y-6
rotateY = 6deg
rotate-y-7
rotateY = 7deg
rotate-y-8
rotateY = 8deg
rotate-y-9
rotateY = 9deg
rotate-y-10
rotateY = 10deg
rotate-y-15
rotateY = 15deg
rotate-y-30
rotateY = 30deg
rotate-y-45
rotateY = 45deg
rotate-y-60
rotateY = 60deg
rotate-y-75
rotateY = 75deg
rotate-y-90
rotateY = 90deg
rotate-y-105
rotateY = 105deg
rotate-y-120
rotateY = 120deg
rotate-y-135
rotateY = 135deg
rotate-y-150
rotateY = 150deg
rotate-y-165
rotateY = 165deg
rotate-y-180
rotateY = 180deg
rotate-z-0
rotateZ = 0deg
rotate-z-1
rotateZ = 1deg
rotate-z-2
rotateZ = 2deg
rotate-z-3
rotateZ = 3deg
rotate-z-4
rotateZ = 4deg
rotate-z-5
rotateZ = 5deg
rotate-z-6
rotateZ = 6deg
rotate-z-7
rotateZ = 7deg
rotate-z-8
rotateZ = 8deg
rotate-z-9
rotateZ = 9deg
rotate-z-10
rotateZ = 10deg
rotate-z-15
rotateZ = 15deg
rotate-z-30
rotateZ = 30deg
rotate-z-45
rotateZ = 45deg
rotate-z-60
rotateZ = 60deg
rotate-z-75
rotateZ = 75deg
rotate-z-90
rotateZ = 90deg
rotate-z-105
rotateZ = 105deg
rotate-z-120
rotateZ = 120deg
rotate-z-135
rotateZ = 135deg
rotate-z-150
rotateZ = 150deg
rotate-z-165
rotateZ = 165deg
rotate-z-180
rotateZ = 180deg
rotate-3d-0
rotate3d = 0deg
rotate-3d-1
rotate3d = 1deg
rotate-3d-2
rotate3d = 2deg
rotate-3d-3
rotate3d = 3deg
rotate-3d-4
rotate3d = 4deg
rotate-3d-5
rotate3d = 5deg
rotate-3d-6
rotate3d = 6deg
rotate-3d-7
rotate3d = 7deg
rotate-3d-8
rotate3d = 8deg
rotate-3d-9
rotate3d = 9deg
rotate-3d-10
rotate3d = 10deg
rotate-3d-15
rotate3d = 15deg
rotate-3d-30
rotate3d = 30deg
rotate-3d-45
rotate3d = 45deg
rotate-3d-60
rotate3d = 60deg
rotate-3d-75
rotate3d = 75deg
rotate-3d-90
rotate3d = 90deg
rotate-3d-105
rotate3d = 105deg
rotate-3d-120
rotate3d = 120deg
rotate-3d-135
rotate3d = 135deg
rotate-3d-150
rotate3d = 150deg
rotate-3d-165
rotate3d = 165deg
rotate-3d-180
rotate3d = 180deg
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:rotate-5 , lg:rotate-0 , hover:rotate-x-15 etc.
Transform
Scale
Utilities for controlling the scalling of an element.
Class
Properties
scale-0
scale = 0
scale-1
scale = 0.2
scale-2
scale = 0.4
scale-3
scale = 0.6
scale-4
scale = 0.8
scale-5
scale = 1
scale-6
scale = 1.2
scale-7
scale = 1.4
scale-8
scale = 1.6
scale-9
scale = 1.8
scale-10
scale = 2
scale-x-0
scaleX = 0
scale-x-1
scaleX = 0.2
scale-x-2
scaleX = 0.4
scale-x-3
scaleX = 0.6
scale-x-4
scaleX = 0.8
scale-x-5
scaleX = 1
scale-x-6
scaleX = 1.2
scale-x-7
scaleX = 1.4
scale-x-8
scaleX = 1.6
scale-x-9
scaleX = 1.8
scale-x-10
scaleX = 2
scale-y-0
scaleY = 0
scale-y-1
scaleY = 0.2
scale-y-2
scaleY = 0.4
scale-y-3
scaleY = 0.6
scale-y-4
scaleY = 0.8
scale-y-5
scaleY = 1
scale-y-6
scaleY = 1.2
scale-y-7
scaleY = 1.4
scale-y-8
scaleY = 1.6
scale-y-9
scaleY = 1.8
scale-y-10
scaleY = 2
scale-z-0
scaleZ = 0
scale-z-1
scaleZ = 0.2
scale-z-2
scaleZ = 0.4
scale-z-3
scaleZ = 0.6
scale-z-4
scaleZ = 0.8
scale-z-5
scaleZ = 1
scale-z-6
scaleZ = 1.2
scale-z-7
scaleZ = 1.4
scale-z-8
scaleZ = 1.6
scale-z-9
scaleZ = 1.8
scale-z-10
scaleZ = 2
scale-3d-0
scale3d = 0
scale-3d-1
scale3d = 0.2
scale-3d-2
scale3d = 0.4
scale-3d-3
scale3d = 0.6
scale-3d-4
scale3d = 0.8
scale-3d-5
scale3d = 1
scale-3d-6
scale3d = 1.2
scale-3d-7
scale3d = 1.4
scale-3d-8
scale3d = 1.6
scale-3d-9
scale3d = 1.8
scale-3d-10
scale3d = 2
Responsive breakpoints and hovering
Like all the Rollercss's property this property also supports reponsive and hovering state. Example : md:scale-5 , lg:scale-z-8 , hover:scale-x-1 etc.