44th-homepage/tailwind.config.ts at develop · NUTFes/44th-homepage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import type { Config } from 'tailwindcss';
import { PluginAPI } from 'tailwindcss/types/config';

const config: Config = {
  content: [
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  safelist: [
    // 動的に生成される番号系列用のカラークラス
    'text-area-a',
    'text-area-b',
    'text-area-c',
    'text-area-d',
    'text-area-e',
    'text-area-f',
    'text-area-g',
    'text-area-kitchen',
    'border-area-a',
    'border-area-b',
    'border-area-c',
    'border-area-d',
    'border-area-e',
    'border-area-f',
    'border-area-g',
    'border-area-kitchen',
  ],
  theme: {
    extend: {
      fontFamily: {
        tegomin: ['var(--font-new-tegomin)', 'sans-serif'],
        noto: ['var(--font-noto-sans-jp)', 'sans-serif'],
      },
      fontSize: {
        h1: '2.25rem', //36px
        h2: '1.5rem', //24px
        body1: '1.125rem', //18px
        body2: '1rem', //16px
        body3: '0.875rem', //14px
      },
      colors: {
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        white: '#ffffff',
        black: '#000000',
        base: '#fff9e5',
        main: '#a08703',
        second: '#d6ba26',
        accent: '#b03030',
        gray: '#8c8982',
        font_main: '#211c1a',
        header_footer: '#211c1a',
        font_khaki: '#6c5c07',
        logo_color: '#ab1b1b',
        //ヘッダーのグラデーション
        header_grad: 'rgba(24, 25, 38, 0.5)',

        font_link: '#5995a2',
        white_back: 'rgba(255,255,255,0.7)',
        base_back: 'rgba(255,249,229,0.5)',
        dark_back: 'rgba(76,42,0,0.8)',

        // 新しいカラーパレット（番号系列用）
        'area-a': '#C44C2B', // A系列（事務棟エリア）
        'area-b': '#346482', // B系列（図書館エリア）
        'area-c': '#4C7343', // C系列（電気棟エリア）
        'area-d': '#A37C1C', // D系列（屋外ステージエリア）
        'area-e': '#602976', // E系列（機械建設棟エリア）
        'area-f': '#386A77', // F系列
        'area-g': '#D33726', // G系列
        'area-kitchen': '#2A3E76', // キッチンカー系列
      },
      animation: {
        'move-clouds': 'move-clouds 50s linear infinite', // アニメーション名と設定
        'move-clouds-2nd': 'move-clouds-2nd 50s linear infinite',
      },
      keyframes: {
        'move-clouds': {
          '0%': { transform: 'translateX(0%)' }, // 画面右端から開始
          '100%': { transform: 'translateX(-100%)' }, // 画面左端まで移動
        },
        'move-clouds-2nd': {
          '0%': { transform: 'translateX(100%)' }, // 画面右端から開始
          '100%': { transform: 'translateX(0%)' }, // 画面左端まで移動
        },
      },
    },
  },

  plugins: [
    function ({ addUtilities }: PluginAPI) {
      const newUtilities = {
        //テキストシャドウ
        '.shadow_right': {
          textShadow: '0 0 0.5rem rgba(225,225,225,1)',
        },
        '.shadow_font': {
          textShadow: '0 0.20rem 0.1rem rgba(0,0,0,0.25)',
        },
        //ボックスシャドウ
        '.shadow_logo': {
          boxShadow: '0.125rem 0.125rem 0.125rem rgba(88,60,35,0.5)',
        },
        '.shadow_dark': {
          boxShadow: '0 0 0.5rem rgba(0,0,0,0.5)',
        },
        '.shadow_button': {
          boxShadow: '0 0.25rem 0.25rem rgba(0,0,0,0.25)',
        },
      };
      addUtilities(newUtilities);
    },
  ],
};
export default config;