create-swiftstart
Version:
Automate the setup of Vite-React & Next.js projects with a pre-designed boilerplate structure using create-swiftstart. This tool saves your time and provides a clean starting point for your React or Next.js applications.
131 lines (102 loc) • 2.87 kB
CSS
@import "./fonts.css";
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Exo&family=Inter:wght@400;500;600;700;800&family=Josefin+Sans:wght@400;500;600;700&family=Lora&family=Open+Sans&family=Patrick+Hand&family=Poppins&family=Quicksand&family=Roboto&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter;
}
@layer utilities {
.max-container {
@apply w-full mx-auto md:max-w-3xl xl:max-w-5xl;
}
.padding-container {
@apply px-6 md:px-0;
}
.heading1 {
@apply text-[64px] leading-[67.2px] font-bold;
}
.heading2 {
@apply font-bold text-[48px] leading-[50.4px];
}
.heading3 {
@apply font-bold sm:text-[32px] sm:leading-[33.6px] text-[28px] leading-[40px] tracking-[-0.25%];
}
.heading4 {
@apply font-semibold text-[20px] leading-[26px] tracking-[0.25%];
}
.base-regular {
@apply text-[24px] font-normal leading-[31.2px];
}
.base-bold {
@apply text-[24px] font-semibold leading-[31.2px];
}
.paragraph-regular {
@apply text-[20px] font-normal leading-[26px];
}
.paragraph-semibold {
@apply text-[20px] font-semibold leading-[26px];
}
.body-text {
@apply text-[16px] leading-[22px] font-normal text-gray-600;
}
.body-regular {
@apply text-[16px] font-normal leading-[20.8px];
}
.body-medium {
@apply text-[16px] font-medium leading-[22.4px];
}
.body-semibold {
@apply text-[16px] font-semibold leading-[20.8px];
}
.flex-between {
@apply flex justify-between items-center;
}
.flex-center {
@apply flex justify-center items-center;
}
.flex-start {
@apply flex justify-start items-start;
}
.flex-end {
@apply flex justify-end;
}
}
/* Background Gradients */
.bg-gradient_blue-purple {
background: linear-gradient(90deg, #4ca5ff 0%, #b573f8 100%);
}
.bg-gradient_purple {
background: linear-gradient(90deg, #854cff 0%, #b573f8 100%);
}
/* Text Gradient */
.text-gradient_blue_purple {
background: linear-gradient(90deg, #4ca5ff 2.34%, #b673f8 100.78%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
display: inline;
}
.text-gradient_blue {
background: linear-gradient(90deg, #4c73ff 2.34%, #389bff 100.78%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}