tailwindcss v4 custom css 추가하기
Tailwind CSS v4에서 커스텀 CSS를 추가하는 방법을 설명했습니다. 다양한 설정을 통해 나만의 테마를 만들 수 있으니, 자세한 내용은 링크를 확인해보세요.
GGAMI
목차
Tailwind CSS v4에서 커스텀 CSS를 추가하는 방법을 설명했습니다. 다양한 설정을 통해 나만의 테마를 만들 수 있으니, 자세한 내용은 링크를 확인해보세요.
목차
@import 'tailwindcss';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source "../**/*.blade.php";
@source "../**/*.js";
@source "../**/*.vue";
@theme {
--font-sans: Geist, Montserrat, 'Pretendard Variable', Noto Sans KR, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji';
--font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace,
'Noto Color Emoji';
--text-xxs: 0.65rem;
--text-xxs--line-height: 1.5;
}
@theme {
--color-main-50: #f4f8fb;
--color-main-100: #e7f0f7;
--color-main-200: #cadfed;
--color-main-300: #9cc4dd;
--color-main-400: #66a5ca;
--color-main-500: #438ab4;
--color-main-600: #316e98;
--color-main-700: #2b5d81;
--color-main-800: #254c67;
--color-main-900: #244156;
--color-main-950: #182a39;
--color-main-base: var(--color-zinc-900);
--color-main-dark: var(--color-zinc-950);
--color-main-light: var(--color-zinc-600);
--color-main-hover: var(--color-main-light);
}이렇게 설정해주면 된다.
추가 설정 가능한 @theme 값들은 https://tailwindcss.com/docs/theme#theme-variable-namespaces 해당 링크에서 확인할 수 있다.