tailwindcss v4 custom css 추가하기

Updated on

app.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 해당 링크에서 확인할 수 있다.

다른 글