create-swiftstart/react-templates/react_template/src/styles/global-style.css

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.

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