tailwindcss v4 にカスタムCSSを追加する
app.css このように設定すればよい。 追加設定できる の値は、<https://tailwindcss.com/docs/theme theme variable namespaces のリンク先で確認できる。
GGAMI
目次
app.css このように設定すればよい。 追加設定できる の値は、<https://tailwindcss.com/docs/theme theme variable namespaces のリンク先で確認できる。
目次
@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 のリンク先で確認できる。