WEB

Tailwindcss で build するとレイアウトが崩れる

症状

理想

現実

ビルドで吐き出された .css を確認してみると、縦横の幅を決める .w-2 .h-5 などといったユーティリティクラスが全て存在しませんでした。

解決策

tailwind.config.js で以下のように幅を追加して使おうと設定したのですが、、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
  theme: {
    extend: {
      colors: {
        'transparent-gray': 'rgba(50, 50, 50, 0.9)',
        'gray': 'rgb(50, 50, 50)',
        'light-gray': 'rgb(180, 180, 180, 0.8)',
        'blue': '#00b0ff'
      }
    },
    spacing: { // 問題はここ
      80: '20rem',
      112: '28rem'
    }
  },
  variants: {},
  plugins: [],
};

ここで何かを設定すると既定の幅でのユーティリティクラスは入らず設定したものだけが入るみたいです。

なので、次のように使用するものはすべて定義してやる必要があるようです。

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
module.exports = {
  theme: {
    extend: {
      colors: {
        'transparent-gray': 'rgba(50, 50, 50, 0.9)',
        'gray': 'rgb(50, 50, 50)',
        'light-gray': 'rgb(180, 180, 180, 0.8)',
        'blue': '#00b0ff'
      }
    },
    spacing: { // 修正
      0: '0',
      px: '1px',
      1: '0.25rem',
      2: '0.5rem',
      3: '0.75rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      8: '2rem',
      10: '2.5rem',
      12: '3rem',
      16: '4rem',
      20: '5rem',
      24: '6rem',
      32: '8rem',
      40: '10rem',
      48: '12rem',
      56: '14rem',
      64: '16rem',
      80: '20rem',
      112: '28rem'
    }
  },
  variants: {},
  plugins: [],
};

値はこちらのページを参考にしました。

tailwindcss | default spacing scale