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

読者の想定

• Tailwind cssを取り組み始めた、取り組みたいと思っている方
• 基礎的な所を知りたい方

前提

• プロジェクトを作成してTailwindを使える状態になっている

記述を追加する

今回は、ブレイクポイントの値を変更する想定で進めていきます。
tailwind.config.js　に記述を追加していきます。

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {
      screens: {
        xl: { max: "1279px" },
        lg: { max: "1023px" },
        md: { max: "767px" },
        sm: { max: "639px" },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

追加が完了したらプロジェクトを再度立ち上げます。
(Vue.jsの環境下で動作させています)

npm run serve

プロジェクトが立ち上がったら実際に記述をして動作を確認しましょう。

<template>
  <button class="md:block">
　　　　ボタン
  </button>
</template>

期待通りの動作になったら完了となります。