🎖️Utility Classes
Utility Classes
SkyLineCSS provides a wide range of utility classes to streamline styling and layout tasks in your projects. These utility classes cover areas such as margins, padding, font sizes, sizes (width/height), background colors, flexbox, text colors, and hover/focus states. They allow for quick and easy application of styles without the need to write custom CSS.
Margins and Padding
.m-0: Margin of 0.m-1: Margin of 0.25rem.m-2: Margin of 0.5rem.m-4: Margin of 1rem.m-8: Margin of 2rem.p-0: Padding of 0.p-1: Padding of 0.25rem.p-2: Padding of 0.5rem.p-4: Padding of 1rem.p-8: Padding of 2rem
Font Size
.text-xs: Extra Small font size (0.75rem).text-sm: Small font size (0.875rem).text-base: Base font size (1rem).text-lg: Large font size (1.125rem).text-xl: Extra Large font size (1.25rem)
Size (Width/Height)
.w-full: Full width (100%).w-1/2: Half width (50%).w-1/3: One-third width (33.3333%).w-2/3: Two-thirds width (66.6666%).h-full: Full height (100%).h-64: Height of 64px
Background Color
Background color classes from
.bg-transparentto.bg-green-900for various color options.
Flexbox
.flex: Display as flex.items-center: Align items center.items-start: Align items start.items-end: Align items end.items-baseline: Align items baseline.justify-center: Justify content center.justify-between: Justify content between items.justify-around: Justify content around items.flex-wrap: Wrap flex items.flex-grow: Flex grow.flex-shrink: Flex shrink
Text Color
Text color classes from
.text-whiteto.text-green-500for various text color options.
Hover and Focus States
Hover and Focus classes for background and text color changes, such as
.hover:bg-gray-100,.hover:text-gray-500,.focus:bg-gray-100,.focus:text-gray-500.
These utility classes provide a powerful and efficient way to style your elements, allowing for rapid prototyping and consistent design throughout your project. Simply apply these classes to your HTML elements to achieve the desired styling effects.
Last updated