デフォルトの設定をカスタマイズ

概要

デフォルトの設定をカスタマイズしていきます。
(学習記録です。)

構成

• content HTMLテンプレート、JSコンポーネントファイルへのパスを指定する
• theme サイトのデザインに関連する設定を指定する
• plugins プラグインを指定する

https://tailwindcss.com/docs/configuration

vi tailwind.config.js
↓

export default {
  content: ['./src/**/*.{html,js}'],
  theme: {
    // デフォルトのテーマをオーバーライドする
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    },
    colors: {
      'blue': '#1fb6ff',
      'green': '#13ce66',
    },
    fontFamily: {
      Jost: ["Jost", "sans-serif"],
      Graphik: ['Graphik', 'sans-serif'],
      Merriweather: ['Merriweather', 'serif'],
    },
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    },
    
    // デフォルトのテーマを拡張する
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [],
}