くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Tailwind > tailwind/daisyUIのカスタマイズ

tailwind/daisyUIのカスタマイズ

Tailwind daisyUI

tailwindとdaisyUIを使いはじめて、
色やサイズをカスタマイズしたいなと思ったら、いろいろできた(*´ω｀*)

Tailwind

Themeのカスタマイズ

// tailwind.config.js
module.exports = {
  theme: {
    // テーマの設定
    // デフォルトは利用されず、置き換わる
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      // ...
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    // テーマの拡張
    // デフォルトが利用され、指定項目が追加/変更される
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

デフォルトのテーマは以下に配置されている

色(Colors)

tw-text-<color>とかを変えたり、増やしたりできる

module.exports = {
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        black: '#000',
        white: '#fff',
        gray: {
          100: '#f7fafc',
          // ...
          900: '#1a202c',
        },

        // ...
      }
    }
  }
}

Spacing

m-1とかのサイズを変更できる。

module.exports = {
  theme: {
    extend: {
      spacing: {
        px: '1px',
        0: '0',
        0.5: '0.125rem',
        1: '0.25rem',
        1.5: '0.375rem',
        // ...
      },
    }
  }
}

スクリーンサイズ(ブレイクポイント)

md:などのブレイクポイントを変更できる

module.exports = {
  theme: {
    extend: {
      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) { ... }
      }
    }
  }
}

.container

containerで設定できる。

module.exports = {
  theme: {
    container: {
      center: true, // 中央寄せにする
      padding: '2rem', // パディングを追加する
      // ブレイクポイントごとの幅を指定
      screens: {
        DEFAULT: '100%',
        sm: '600px',
        md: '728px',
        lg: '984px',
        xl: '1240px',
        '2xl': '1496px',
      },
    },
  },
}

ただ、ブレイクポイントのサイズ=max-widthのサイズになるので、
細かい調整をしたい場合は、addComponentsで追加するのがよさそう。

module.exports = {
  corePlugins: {
    container: false
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          '@screen sm': {
            maxWidth: '640px',
          },
          '@screen md': {
            maxWidth: '768px',
          },
          '@screen lg': {
            maxWidth: '1280px',
          },
          '@screen xl': {
            maxWidth: '1400px',
          },
        }
      })
    }
  ]
}

デフォルトのテーマを参照する

2パターンあるっぽい(*´ω｀*)

module.exports = {
  theme: {
    spacing: {
      // ...
    },
    backgroundSize: ({ theme }) => ({
      auto: 'auto',
      cover: 'cover',
      contain: 'contain',
      ...theme('spacing')
    })
  }
}

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Lato',
          ...defaultTheme.fontFamily.sans,
        ]
      }
    }
  }
}

daisyUI

Theme

module.exports = {
  //...
  daisyui: {
    themes: [
      // 独自のテーマ
      {
        mytheme: {
          // 用意されている各種の色も設定できる
          primary: "#a991f7",
          secondary: "#f6d860",
          accent: "#37cdbe",
          neutral: "#3d4451",
          "base-100": "#ffffff",
          
          // CSS変数も指定できる
          "--rounded-box": "1rem", // border radius rounded-box utility class, used in card and other large boxes
          "--rounded-btn": "0.5rem", // border radius rounded-btn utility class, used in buttons and similar element
        },
      },
      // 用意されているテーマも使える
      "dark",
      // 用意されているテーマのカスタマイズもできる
      light: {
        ...require("daisyui/src/colors/themes")["[data-theme=light]"],
        primary: "blue",
        "primary-focus": "mediumblue",
      },
    ],
  },
}

用意されている各テーマの設定は、以下の場所にある

primaryなど指定できる項目とCSS変数との対応は、以下の場所にある - https://github.com/saadeghi/daisyui/blob/master/src/colors/colorNames.js

module.exports = {
  //...
  daisyui: {
    themes: [
      {
        mytheme: {
          // 用意されている各種の色も設定できる
          primary: "#a991f7", // btn-primaryなどの背景の色
          "primary-content": "#ffffff", // btn-primaryなどの文字の色
          "base-100": "#ffffff", // 全体の背景色
          "base-content": "#372f38", // 全体の文字の色
        },
      }
    ],
  },
}

daisyuiのテーマで指定した色は、tailwindのカスタマイズとして引き渡されているよう

コンポーネントのカスタマイズ

コンポーネント自体のカスタマイズは、
CSSを使って拡張する形。

/* 全テーマでのカスタマイズ */
.btn {
  @apply rounded-full;
}

/* 特定のテーマのみカスタマイズ */
[data-theme="mytheme"] .btn {
  border-width: 2px;
  border-color: black;
}

以上! これでBuefyとの違いを減らせる。。(*´ω｀*)

参考にしたサイト様