UNPKG

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
@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 */ }