【Vue】tailwindcssをカスタマイズする方法

2021年5月16日Vue.js

tailwindcssをカスタマイズする方法を紹介します。

【Vue】tailwindcssをカスタマイズする方法

カスタマイズしたい場合は、たとえば次のようにします。

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontSize: {
        mammoth: '8rem'
      },
      colors: {
        primary: 'green',
        secondary: {
          100: '#E2E2D5',
          200: '#888883',
        }
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

extendの中に記述していきます。
変更を反映させるにはbuildしなおす必要があるので、一度ターミナルの接続を切って、さいどnpm run serveなど決めたコマンドで立ち上げます。
上の場合テキストなので使うときは、

class="text-mammoth"
class="text-primary"
class="bg-secondary-100 text-secondary-200"

といった形で使います。

fotn-familyの拡張

tailwindcssでは、デフォルトで3つの選択肢があります。

クラス	プロパティ
font-sans	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI", Roboto, “Helvetica Neue", Arial, “Noto Sans", sans-serif, “Apple Color Emoji", “Segoe UI Emoji", “Segoe UI Symbol", “Noto Color Emoji";
font-serif	font-family: ui-serif, Georgia, Cambria, “Times New Roman", Times, serif;
font-mono	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono", “Courier New", monospace;

google fontのフォントを指定したい場合は、まずは、google fontで希望のものを選択します。
選択するとlinkと@importという項目があるので、@importを選択します。
それを作成したassets/css/style.cssの中に貼り付けます。

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');

そして、tailwind.config.jsに追記します。

  theme: {
    extend: {
      fontSize: {
        mammoth: '8rem'
      },
      colors: {
        primary: '#FF6363',
        secondary: {
          100: '#E2E2D5',
          200: '#888883',
        }
      },
      fontFamily: {
        body: ['Sawarabi Gothic']
      }
    },
  },

便利なエクステンション

vsCodeを使っている場合、Tailwind CSS IntelliSenseというエクステンションが使えます。
入力中にtailwindの候補を出してくれます。
カスタマイズで登録したものも表示してくれるので大変便利です。