ex.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
 * {
  @apply box-border list-none p-0 m-0 scroll-smooth;
 }

 body {
  @apply bg-dark-1 text-white min-h-screen font-inter;
 }
}

@layer utilities {

 /* TYPOGRAPHY */
 .h1-bold {
  @apply text-[36px] font-bold leading-[140%] tracking-tighter;
 }

 .h1-semibold {
  @apply text-[36px] font-semibold leading-[140%] tracking-tighter;
 }

 .h2-bold {
  @apply text-[30px] font-bold leading-[140%] tracking-tighter;
 }

 .h3-bold {
  @apply text-[24px] font-bold leading-[140%] tracking-tighter;
 }

 .base-semibold {
  @apply text-[16px] font-semibold leading-[140%] tracking-tighter;
 }

 .base-medium {
  @apply text-[16px] font-medium leading-[140%];
 }

 .base-regular {
  @apply text-[16px] font-normal leading-[140%];
 }

 .body-bold {
  @apply text-[18px] font-bold leading-[140%];
 }

 .body-medium {
  @apply text-[18px] font-medium leading-[140%];
 }

 .small-semibold {
  @apply text-[14px] font-semibold leading-[140%] tracking-tighter;
 }

 .small-medium {
  @apply text-[14px] font-medium leading-[140%];
 }

 .small-regular {
  @apply text-[14px] font-normal leading-[140%];
 }

 .subtle-semibold {
  @apply text-[12px] font-semibold leading-[140%];
 }

 .tiny-medium {
  @apply text-[10px] font-medium leading-[140%];
 }

 /* UTILITIES */
 .invert-white {
  @apply invert brightness-0 transition;
 }

 .flex-center {
  @apply flex justify-center items-center;
 }

 .flex-between {
  @apply flex justify-between items-center;
 }

 .flex-start {
  @apply flex justify-start items-center;
 }

 .custom-scrollbar::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-radius: 2px;
 }

 .custom-scrollbar::-webkit-scrollbar-track {
  background: #09090a;
 }

 .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #5c5c7b;
  border-radius: 50px;
 }

 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #7878a3;
 }

 .common-container {
  @apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar;
 }

 /* All Users */
 .user-container {
  @apply max-w-5xl flex flex-col items-start w-full gap-6 md:gap-9;
 }

 .user-grid {
  @apply w-full grid grid-cols-1 xs:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-7 max-w-5xl;
 }

 /* Explore */
 .explore-container {
  @apply flex flex-col flex-1 items-center overflow-scroll py-10 px-5 md:p-14 custom-scrollbar;
 }

 .explore-inner_container {
  @apply max-w-5xl flex flex-col items-center w-full gap-6 md:gap-9;
 }

 .explore-search {
  @apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-0 focus-visible:ring-offset-0 ring-offset-0 !important;
 }

 /* Home */
 .home-container {
  @apply flex flex-col flex-1 items-center gap-5 overflow-scroll py-10 px-5 md:px-8 lg:p-14 custom-scrollbar;
  height: 80vh;
 }

 .home-container2 {
  @apply flex flex-col flex-1 items-center gap-4 overflow-scroll py-4 px-3 md:px-8 lg:p-14 custom-scrollbar;
  height: 80vh;
 }

 .home-posts {
  @apply max-w-screen-sm flex flex-col items-center w-full gap-4 md:gap-9;
 }

 .home-creators {
  @apply hidden xl:flex flex-col w-72 2xl:w-465 px-6 py-10 gap-10 overflow-scroll custom-scrollbar;
 }

 /* Post Details */
 .post_details-container {
  @apply flex flex-col flex-1 gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar items-center;
 }

 .post_details-card {
  @apply bg-dark-2 w-full max-w-5xl rounded-[30px] flex-col flex xl:flex-row border border-dark-4 xl:rounded-l-[24px];
 }

 .post_details-img {
  @apply h-80 lg:h-[480px] xl:w-[48%] rounded-t-[30px] xl:rounded-l-[24px] xl:rounded-tr-none object-cover p-5 bg-dark-1;
 }

 .post_details-info {
  @apply bg-dark-2 flex flex-col gap-5 lg:gap-7 flex-1 items-start p-8 rounded-[30px];
 }

 .post_details-delete_btn {
  @apply p-0 flex gap-3 hover:bg-transparent hover:text-light-1 text-light-1 small-medium lg:base-medium;
 }

 /* Profile */
 .profile-container {
  @apply flex flex-col items-center flex-1 gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar;
 }

 .profile-inner_container {
  @apply flex items-center md:mb-8 xl:items-start gap-8 flex-col xl:flex-row relative max-w-5xl w-full;
 }

 .profile-tab {
  @apply flex-center gap-3 py-4 w-48 bg-dark-2 transition flex-1 xl:flex-initial;
 }

 /* Saved */
 .saved-container {
  @apply flex flex-col flex-1 items-center gap-10 overflow-scroll py-10 px-5 md:p-14 custom-scrollbar;
 }

 /* Bottom bar */
 .bottom-bar {
  @apply z-50 flex-between w-full sticky bottom-0 rounded-t-[20px] bg-dark-2 px-5 py-4 md:hidden;
 }

 /* File uploader */
 .file_uploader-img {
  @apply h-80 lg:h-[300px] w-full rounded-[24px] object-cover object-top;
 }

 .file_uploader-label {
  @apply text-light-4 text-center small-regular w-full p-4 border-t border-t-dark-4;
 }

 .file_uploader-box {
  @apply flex-center flex-col p-7 h-40 lg:h-[500px];
 }

 /* Grid Post List */
 .grid-container {
  @apply w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-7 max-w-5xl;
 }

 .grid-post_link {
  @apply flex rounded-[24px] border border-dark-4 overflow-hidden cursor-pointer w-full h-full;
 }

 .grid-post_user {
  @apply absolute bottom-0 p-5 flex-between w-full bg-gradient-to-t from-dark-3 to-transparent rounded-b-[24px] gap-2;
 }

 /* Left sidebar */
 .leftsidebar {
  @apply hidden md:flex px-6 py-10 flex-col justify-between min-w-[270px] bg-dark-2;
 }

 .leftsidebar-link {
  @apply rounded-lg base-medium hover:bg-primary-500 transition;
 }

 /* Post Card */
 .post-card {
  @apply bg-dark-2 rounded-3xl border border-dark-4 p-5 lg:p-7 w-full max-w-screen-sm;
 }

 .post-card_img {
  @apply h-64 xs:h-[400px] lg:h-[450px] w-full rounded-[24px] object-cover mb-5;
 }

 /* Topbar */
 .topbar {
  @apply sticky top-0 z-50 md:hidden bg-dark-2 w-full;
 }

 /* User card */
 .user-card {
  @apply flex-center flex-col gap-4 border border-dark-4 rounded-[20px] px-5 py-8;
 }
}

@layer components {

 /* SHADCN COMPONENTS */
 /* Form */
 .shad-form_label {
  @apply text-white !important;
 }

 .shad-form_message {
  @apply text-red !important;
 }

 .shad-input {
  @apply h-12 bg-dark-4 border-none placeholder:text-light-4 focus-visible:ring-1 focus-visible:ring-offset-1 ring-offset-light-3 !important;
 }

 .shad-textarea {
  @apply h-36 bg-dark-3 rounded-xl border-none focus-visible:ring-1 focus-visible:ring-offset-1 ring-offset-light-3 !important;
 }

 /* Button */
 .shad-button_primary {
  @apply bg-yellow-600 hover:bg-yellow-500 text-light-1 flex gap-2 !important;
 }

 .shad-button_dark_4 {
  @apply h-12 bg-dark-4 px-5 text-light-1 flex gap-2 !important;
 }

 .shad-button_ghost {
  @apply flex gap-4 items-center justify-start hover:bg-transparent hover:text-white !important;
 }
}