Created
December 4, 2025 05:54
-
-
Save risuvoo/32876cbee3b70e698924090fce85d1a7 to your computer and use it in GitHub Desktop.
tailwind-4.1 style guild
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "tailwindcss"; | |
| @theme { | |
| /* fonts */ | |
| --font-graphik: "Graphik", sans-serif; | |
| --font-acaslon-pro: "ACaslonPro", serif; | |
| /* font sizes */ | |
| --text-36: clamp(28px, 8px + 2vw, 36px); | |
| --text-36--line-height: clamp(36px, 12px + 2.5vw, 44px); | |
| --text-36-lg: clamp(28px, 8px + 2vw, 36px); | |
| --text-36-lg--line-height: clamp(40px, 16px + 3vw, 52px); | |
| --text-32: clamp(24px, 8px + 1.75vw, 32px); | |
| --text-32--line-height: clamp(32px, 12px + 2.25vw, 44px); | |
| --text-28: clamp(22px, 6px + 1.5vw, 28px); | |
| --text-28--line-height: clamp(28px, 8px + 1.75vw, 34px); | |
| --text-24: clamp(20px, 4px + 1.25vw, 24px); | |
| --text-24--line-height: clamp(24px, 6px + 1.5vw, 29px); | |
| --text-20: clamp(18px, 2px + 1vw, 20px); | |
| --text-20--line-height: clamp(24px, 4px + 1.5vw, 28px); | |
| --text-20-sm: clamp(18px, 2px + 1vw, 20px); | |
| --text-20-sm--line-height: clamp(22px, 2px + 1.25vw, 24px); | |
| --text-18: clamp(16px, 2px + 0.875vw, 18px); | |
| --text-18--line-height: clamp(24px, 4px + 1.375vw, 27px); | |
| --text-16: clamp(14px, 2px + 0.75vw, 16px); | |
| --text-16--line-height: clamp(20px, 2px + 1.125vw, 22px); | |
| --text-14: clamp(13px, 1px + 0.625vw, 14px); | |
| --text-14--line-height: clamp(19px, 2px + 1vw, 21px); | |
| --text-12: clamp(11px, 1px + 0.5vw, 12px); | |
| --text-12--line-height: clamp(16px, 2px + 0.875vw, 18px); | |
| /* colors */ | |
| --color-headline: #101010; | |
| --color-paragraph: #434343; | |
| --color-primary-dark: #c00000; | |
| --color-primary-deep: #e90c0c; | |
| --color-primary-base: #fe3939; | |
| --color-primary-deep-light: #ffbbbb; | |
| --color-primary-light: #ffe7e7; | |
| --color-stroke-s1: #f7f7f7; | |
| --color-stroke-s2: #e2e2e2; | |
| --color-greyscale-900: #111827; | |
| --color-greyscale-800: #1f2937; | |
| --color-greyscale-700: #323b49; | |
| --color-greyscale-600: #718096; | |
| --color-greyscale-500: #a0aec0; | |
| --color-greyscale-400: #cbd5e0; | |
| --color-greyscale-300: #eeeff2; | |
| --color-greyscale-200: #f1f2f4; | |
| --color-greyscale-100: #f9fafb; | |
| --color-greyscale-50: #fafafa; | |
| --color-success-dark: #16a34a; | |
| --color-success-base: #22c55e; | |
| --color-success-light: #4ade80; | |
| --color-success-new: #b7ffd1; | |
| --color-warning-dark: #eab308; | |
| --color-warning-base: #facc15; | |
| --color-warning-dark: #fde047; | |
| --color-error-dark: #dd3333; | |
| --color-error-base: #ff4747; | |
| --color-error-light: #ff7171; | |
| } | |
| @layer base { | |
| body { | |
| @apply text-16 text-paragraph; | |
| font-family: var(--font-graphik); | |
| } | |
| .container-x { | |
| @apply max-w-[1360px] mx-auto px-4; | |
| } | |
| } | |
| @utility common-transition { | |
| @apply transition-all duration-300 ease-in-out; | |
| } | |
| @utility no-scrollbar { | |
| /* Chrome, Safari and Opera */ | |
| &::-webkit-scrollbar { | |
| display: none; | |
| } | |
| -ms-overflow-style: none; /* IE and Edge */ | |
| scrollbar-width: none; /* Firefox */ | |
| } | |
| @utility custom-scrollbar { | |
| &::-webkit-scrollbar { | |
| @apply size-1.5; | |
| } | |
| &::-webkit-scrollbar-track { | |
| @apply rounded-full; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| @apply bg-gray-200 rounded-full dark:bg-gray-700; | |
| } | |
| } | |
| @layer utilities { | |
| /* For Remove Date Icon */ | |
| input[type="date"]::-webkit-inner-spin-button, | |
| input[type="time"]::-webkit-inner-spin-button, | |
| input[type="date"]::-webkit-calendar-picker-indicator, | |
| input[type="time"]::-webkit-calendar-picker-indicator { | |
| display: none; | |
| -webkit-appearance: none; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment