This project provides a curated set of CSS classes designed to streamline the styling of your website. These classes are generated through custom-built Sass mixins specifically tailored for this project, offering a solid foundation that can be easily expanded to include additional styles as needed. The included classes cover fundamental styling needs, serving as a practical starting point for building an application. Additionally, a CSS purging process is applied to ensure the final CSS file remains lightweight, containing only the classes actively used within the project.
text-primary-100
Text Primary 100
text-primary-200
Text Primary 200
text-primary-300
Text Primary 300
text-primary-400
Text Primary 400
text-primary-500
Text Primary 500
text-primary-600
Text Primary 600
text-secondary-100
Text Secondary 100
text-secondary-200
Text Secondary 200
text-secondary-300
Text Secondary 300
text-secondary-400
Text Secondary 400
text-secondary-500
Text Secondary 500
text-secondary-600
Text Secondary 600
text-tertiary-100
Text Tertiary 100
text-tertiary-200
Text Tertiary 200
text-tertiary-300
Text Tertiary 300
text-tertiary-400
Text Tertiary 400
text-tertiary-500
Text Tertiary 500
text-tertiary-600
Text Tertiary 600
text-accent-100
Text Accent 100
text-accent-200
Text Accent 200
text-accent-300
Text Accent 300
text-accent-400
Text Accent 400
text-accent-500
Text Accent 500
text-accent-600
Text Accent 600
text-success-100
Text Success 100
text-success-200
Text Success 200
text-success-300
Text Success 300
text-success-400
Text Success 400
text-success-500
Text Success 500
text-success-600
Text Success 600
text-warning-100
Text Warning 100
text-warning-200
Text Warning 200
text-warning-300
Text Warning 300
text-warning-400
Text Warning 400
text-warning-500
Text Warning 500
text-warning-600
Text Warning 600
text-error-100
Text Error 100
text-error-200
Text Error 200
text-error-300
Text Error 300
text-error-400
Text Error 400
text-error-500
Text Error 500
text-error-600
Text Error 600
text-neutral-100
Text Neutral 100
text-neutral-200
Text Neutral 200
text-neutral-300
Text Neutral 300
text-neutral-400
Text Neutral 400
text-neutral-500
Text Neutral 500
text-neutral-600
Text Neutral 600
text-neutral-700
Text Neutral 700
text-neutral-800
Text Neutral 800
text-neutral-900
Text Neutral 900
bg-primary-100
Background Primary 100
bg-primary-200
Background Primary 200
bg-primary-300
Background Primary 300
bg-primary-400
Background Primary 400
bg-primary-500
Background Primary 500
bg-primary-600
Background Primary 600
bg-secondary-100
Background Secondary 100
bg-secondary-200
Background Secondary 200
bg-secondary-300
Background Secondary 300
bg-secondary-400
Background Secondary 400
bg-secondary-500
Background Secondary 500
bg-secondary-600
Background Secondary 600
bg-tertiary-100
Background Tertiary 100
bg-tertiary-200
Background Tertiary 200
bg-tertiary-300
Background Tertiary 300
bg-tertiary-400
Background Tertiary 400
bg-tertiary-500
Background Tertiary 500
bg-tertiary-600
Background Tertiary 600
bg-accent-100
Background Accent 100
bg-accent-200
Background Accent 200
bg-accent-300
Background Accent 300
bg-accent-400
Background Accent 400
bg-accent-500
Background Accent 500
bg-accent-600
Background Accent 600
bg-success-100
Background Success 100
bg-success-200
Background Success 200
bg-success-300
Background Success 300
bg-success-400
Background Success 400
bg-success-500
Background Success 500
bg-success-600
Background Success 600
bg-warning-100
Background Warning 100
bg-warning-200
Background Warning 200
bg-warning-300
Background Warning 300
bg-warning-400
Background Warning 400
bg-warning-500
Background Warning 500
bg-warning-600
Background Warning 600
bg-error-100
Background Error 100
bg-error-200
Background Error 200
bg-error-300
Background Error 300
bg-error-400
Background Error 400
bg-error-500
Background Error 500
bg-error-600
Background Error 600
bg-neutral-100
Background Neutral 100
bg-neutral-200
Background Neutral 200
bg-neutral-300
Background Neutral 300
bg-neutral-400
Background Neutral 400
bg-neutral-500
Background Neutral 500
bg-neutral-600
Background Neutral 600
bg-neutral-700
Background Neutral 700
bg-neutral-800
Background Neutral 800
bg-neutral-900
Background Neutral 900
p-0
p-half-1
p-1
p-half-2
p-2
p-half-3
p-3
p-half-4
p-4
p-5
p-6
p-7
p-8
p-9
p-10
p-11
p-12
p-14
p-16
p-20
p-24
p-28
p-32
p-36
p-40
p-44
p-48
p-52
p-56
p-60
p-64
p-72
p-80
p-96
p-1-2
p-1-3
p-1-4
p-1-5
p-1-6
p-2-3
p-3-4
p-3-5
p-4-5
p-4-6
p-5-6
p-full
pt-0
pt-half-1
pt-1
pt-half-2
pt-2
pt-half-3
pt-3
pt-half-4
pt-4
pt-5
pt-6
pt-7
pt-8
pt-9
pt-10
pt-11
pt-12
pt-14
pt-16
pt-20
pt-24
pt-28
pt-32
pt-36
pt-40
pt-44
pt-48
pt-52
pt-56
pt-60
pt-64
pt-72
pt-80
pt-96
pt-1-2
pt-1-3
pt-1-4
pt-1-5
pt-1-6
pt-2-3
pt-3-4
pt-3-5
pt-4-5
pt-4-6
pt-5-6
pt-full
pr-0
pr-half-1
pr-1
pr-half-2
pr-2
pr-half-3
pr-3
pr-half-4
pr-4
pr-5
pr-6
pr-7
pr-8
pr-9
pr-10
pr-11
pr-12
pr-14
pr-16
pr-20
pr-24
pr-28
pr-32
pr-36
pr-40
pr-44
pr-48
pr-52
pr-56
pr-60
pr-64
pr-72
pr-80
pr-96
pr-1-2
pr-1-3
pr-1-4
pr-1-5
pr-1-6
pr-2-3
pr-3-4
pr-3-5
pr-4-5
pr-4-6
pr-5-6
pr-full
pb-0
pb-half-1
pb-1
pb-half-2
pb-2
pb-half-3
pb-3
pb-half-4
pb-4
pb-5
pb-6
pb-7
pb-8
pb-9
pb-10
pb-11
pb-12
pb-14
pb-16
pb-20
pb-24
pb-28
pb-32
pb-36
pb-40
pb-44
pb-48
pb-52
pb-56
pb-60
pb-64
pb-72
pb-80
pb-96
pb-1-2
pb-1-3
pb-1-4
pb-1-5
pb-1-6
pb-2-3
pb-3-4
pb-3-5
pb-4-5
pb-4-6
pb-5-6
pb-full
pl-0
pl-half-1
pl-1
pl-half-2
pl-2
pl-half-3
pl-3
pl-half-4
pl-4
pl-5
pl-6
pl-7
pl-8
pl-9
pl-10
pl-11
pl-12
pl-14
pl-16
pl-20
pl-24
pl-28
pl-32
pl-36
pl-40
pl-44
pl-48
pl-52
pl-56
pl-60
pl-64
pl-72
pl-80
pl-96
pl-1-2
pl-1-3
pl-1-4
pl-1-5
pl-1-6
pl-2-3
pl-3-4
pl-3-5
pl-4-5
pl-4-6
pl-5-6
pl-full
px-0
px-half-1
px-1
px-half-2
px-2
px-half-3
px-3
px-half-4
px-4
px-5
px-6
px-7
px-8
px-9
px-10
px-11
px-12
px-14
px-16
px-20
px-24
px-28
px-32
px-36
px-40
px-44
px-48
px-52
px-56
px-60
px-64
px-72
px-80
px-96
px-1-2
px-1-3
px-1-4
px-1-5
px-1-6
px-2-3
px-3-4
px-3-5
px-4-5
px-4-6
px-5-6
px-full
py-0
py-half-1
py-1
py-half-2
py-2
py-half-3
py-3
py-half-4
py-4
py-5
py-6
py-7
py-8
py-9
py-10
py-11
py-12
py-14
py-16
py-20
py-24
py-28
py-32
py-36
py-40
py-44
py-48
py-52
py-56
py-60
py-64
py-72
py-80
py-96
py-1-2
py-1-3
py-1-4
py-1-5
py-1-6
py-2-3
py-3-4
py-3-5
py-4-5
py-4-6
py-5-6
py-full
m-0
m-half-1
m-1
m-half-2
m-2
m-half-3
m-3
m-half-4
m-4
m-5
m-6
m-7
m-8
m-9
m-10
m-11
m-12
m-14
m-16
m-20
m-24
m-28
m-32
m-36
m-40
m-44
m-48
m-52
m-56
m-60
m-64
m-72
m-80
m-96
m-1-2
m-1-3
m-1-4
m-1-5
m-1-6
m-2-3
m-3-4
m-3-5
m-4-5
m-4-6
m-5-6
m-full
mt-0
mt-half-1
mt-1
mt-half-2
mt-2
mt-half-3
mt-3
mt-half-4
mt-4
mt-5
mt-6
mt-7
mt-8
mt-9
mt-10
mt-11
mt-12
mt-14
mt-16
mt-20
mt-24
mt-28
mt-32
mt-36
mt-40
mt-44
mt-48
mt-52
mt-56
mt-60
mt-64
mt-72
mt-80
mt-96
mt-1-2
mt-1-3
mt-1-4
mt-1-5
mt-1-6
mt-2-3
mt-3-4
mt-3-5
mt-4-5
mt-4-6
mt-5-6
mt-full
mr-0
mr-half-1
mr-1
mr-half-2
mr-2
mr-half-3
mr-3
mr-half-4
mr-4
mr-5
mr-6
mr-7
mr-8
mr-9
mr-10
mr-11
mr-12
mr-14
mr-16
mr-20
mr-24
mr-28
mr-32
mr-36
mr-40
mr-44
mr-48
mr-52
mr-56
mr-60
mr-64
mr-72
mr-80
mr-96
mr-1-2
mr-1-3
mr-1-4
mr-1-5
mr-1-6
mr-2-3
mr-3-4
mr-3-5
mr-4-5
mr-4-6
mr-5-6
mr-full
mb-0
mb-half-1
mb-1
mb-half-2
mb-2
mb-half-3
mb-3
mb-half-4
mb-4
mb-5
mb-6
mb-7
mb-8
mb-9
mb-10
mb-11
mb-12
mb-14
mb-16
mb-20
mb-24
mb-28
mb-32
mb-36
mb-40
mb-44
mb-48
mb-52
mb-56
mb-60
mb-64
mb-72
mb-80
mb-96
mb-1-2
mb-1-3
mb-1-4
mb-1-5
mb-1-6
mb-2-3
mb-3-4
mb-3-5
mb-4-5
mb-4-6
mb-5-6
mb-full
ml-0
ml-half-1
ml-1
ml-half-2
ml-2
ml-half-3
ml-3
ml-half-4
ml-4
ml-5
ml-6
ml-7
ml-8
ml-9
ml-10
ml-11
ml-12
ml-14
ml-16
ml-20
ml-24
ml-28
ml-32
ml-36
ml-40
ml-44
ml-48
ml-52
ml-56
ml-60
ml-64
ml-72
ml-80
ml-96
ml-1-2
ml-1-3
ml-1-4
ml-1-5
ml-1-6
ml-2-3
ml-3-4
ml-3-5
ml-4-5
ml-4-6
ml-5-6
ml-full
mx-0
mx-half-1
mx-1
mx-half-2
mx-2
mx-half-3
mx-3
mx-half-4
mx-4
mx-5
mx-6
mx-7
mx-8
mx-9
mx-10
mx-11
mx-12
mx-14
mx-16
mx-20
mx-24
mx-28
mx-32
mx-36
mx-40
mx-44
mx-48
mx-52
mx-56
mx-60
mx-64
mx-72
mx-80
mx-96
mx-1-2
mx-1-3
mx-1-4
mx-1-5
mx-1-6
mx-2-3
mx-3-4
mx-3-5
mx-4-5
mx-4-6
mx-5-6
mx-full
my-0
my-half-1
my-1
my-half-2
my-2
my-half-3
my-3
my-half-4
my-4
my-5
my-6
my-7
my-8
my-9
my-10
my-11
my-12
my-14
my-16
my-20
my-24
my-28
my-32
my-36
my-40
my-44
my-48
my-52
my-56
my-60
my-64
my-72
my-80
my-96
my-1-2
my-1-3
my-1-4
my-1-5
my-1-6
my-2-3
my-3-4
my-3-5
my-4-5
my-4-6
my-5-6
my-full
opacity-0
opacity-5
opacity-10
opacity-15
opacity-20
opacity-25
opacity-30
opacity-35
opacity-40
opacity-45
opacity-50
opacity-55
opacity-60
opacity-65
opacity-70
opacity-75
opacity-80
opacity-85
opacity-90
opacity-95
opacity-100
shadow-none
shadow-sm
shadow-default
shadow-md
shadow-lg
shadow-xl
shadow-2xl
z-0
z-10
z-20
z-30
z-40
z-50
z-auto
border-none
border-1
border-2
border-4
border-8
rounded-none
rounded-sm
rounded-default
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-3xl
rounded-full
rounded-tl-none
rounded-tl-sm
rounded-tl-default
rounded-tl-md
rounded-tl-lg
rounded-tl-xl
rounded-tl-2xl
rounded-tl-3xl
rounded-tl-full
rounded-tr-none
rounded-tr-sm
rounded-tr-default
rounded-tr-md
rounded-tr-lg
rounded-tr-xl
rounded-tr-2xl
rounded-tr-3xl
rounded-tr-full
rounded-br-none
rounded-br-sm
rounded-br-default
rounded-br-md
rounded-br-lg
rounded-br-xl
rounded-br-2xl
rounded-br-3xl
rounded-br-full
rounded-bl-none
rounded-bl-sm
rounded-bl-default
rounded-bl-md
rounded-bl-lg
rounded-bl-xl
rounded-bl-2xl
rounded-bl-3xl
rounded-bl-full
border-solid
border-dashed
border-dotted
border-double
border-none
border-t-0
border-t-1
border-t-2
border-t-4
border-t-8
border-r-0
border-r-1
border-r-2
border-r-4
border-r-8
border-b-0
border-b-1
border-b-2
border-b-4
border-b-8
border-l-0
border-l-1
border-l-2
border-l-4
border-l-8
border-primary-100
border-primary-200
border-primary-300
border-primary-400
border-primary-500
border-primary-600
border-secondary-100
border-secondary-200
border-secondary-300
border-secondary-400
border-secondary-500
border-secondary-600
border-tertiary-100
border-tertiary-200
border-tertiary-300
border-tertiary-400
border-tertiary-500
border-tertiary-600
border-accent-100
border-accent-200
border-accent-300
border-accent-400
border-accent-500
border-accent-600
border-success-100
border-success-200
border-success-300
border-success-400
border-success-500
border-success-600
border-warning-100
border-warning-200
border-warning-300
border-warning-400
border-warning-500
border-warning-600
border-error-100
border-error-200
border-error-300
border-error-400
border-error-500
border-error-600
border-neutral-100
border-neutral-200
border-neutral-300
border-neutral-400
border-neutral-500
border-neutral-600
border-neutral-700
border-neutral-800
border-neutral-900
grid-cols-1
grid-cols-2
grid-cols-3
grid-cols-4
grid-cols-5
grid-cols-6
grid-cols-7
grid-cols-8
grid-cols-9
grid-cols-10
grid-cols-11
grid-cols-12
grid-rows-1
grid-rows-2
grid-rows-3
grid-rows-4
grid-rows-5
grid-rows-6
grid-rows-7
grid-rows-8
grid-rows-9
grid-rows-10
grid-rows-11
grid-rows-12
grid-rows-span-1
grid-rows-span-2
grid-rows-span-3
grid-rows-span-4
grid-rows-span-5
grid-rows-span-6
grid-rows-span-7
grid-rows-span-8
grid-rows-span-9
grid-rows-span-10
grid-rows-span-11
grid-rows-span-12
row-span-1
row-span-2
row-span-3
row-span-4
row-span-5
row-span-6
row-span-7
row-span-8
row-span-9
row-span-10
row-span-11
row-span-12
flex-grow
flex-grow-0
flex-shrink
flex-shrink-0
flex-row
flex-row-reverse
flex-column
flex-column-reverse
flex-wrap
flex-wrap-reverse
flex-nowrap
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
items-start
items-end
items-center
items-baseline
items-stretch
content-start
content-end
content-center
content-between
content-around
content-stretch
gap-0
gap-1
gap-2
gap-3
gap-4
gap-5
gap-6
gap-8
gap-10
gap-12
gap-16
gap-20
gap-24
gap-32
gap-40
w-xs / h-xs
w-sm / h-sm
w-md / h-md
w-lg / h-lg
w-xl / h-xl
w-2xl / h-2xl
w-3xl / h-3xl
w-full / h-full
ws-normal
ws-nowrap
ws-pre
ws-pre-line
ws-pre-wrap
object-fill
object-contain
object-cover
object-none
object-scale-down