tailwindcssにsmより小さいブレイクポイントを追加する方法

結論

// tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme') //デフォルトのテーマをtailwindcssからrequire

module.exports = {
  theme: {
    screens: {
      'xs': '375px', //スプレッドの前にぶち込む
      ...defaultTheme.screens, //インポートしたテーマをスプレッド
    },
  },
  variants: {},
  plugins: [],
}

tailwind.config.jsに以上を記述することで、tailwindcssにsmより小さいブレイクポイントを追加することができます！

tailwindcssとは

cssをめちゃ簡単に書けるようにしてくれるツールです。
あらかじめcssがついたクラスをたくさん用意してくれていて、そのクラスをタグに当てていくことで、クラス名をいちいち考えることなく、超効率的にcssが書けます。
普通のcssならまずhtmlを書いて

<div class="test">テスト</div>

そのクラス名を指定してスタイルを当てていきますが、

.test {
  color: red;
}

tailwindcssならたったこれだけでスタイルを適用できます。
なぜならtailwindcssがtext-red-100（数字の部分は色の濃さ）というクラスに予め文字が赤になるcssを用意してくれているからです。

<div class="text-red-100">テスト</div>

CSSにおけるブレイクポイントとは

ブレイクポイントとは、cssソース内で適用スタイルを区切る位置のこと。大抵は画面の横幅サイズを使ってブレイクポイントが作られる。レスポンシブなwebデザインを採用する際に必要不可欠なもの。

例えば、パソコンで作ったwebアプリケーションをタブレットやスマートフォンでも使えるようにするためには、この「ブレイクポイント」を設定する必要があります。ブラウザでtwitterを開いた時の見た目がパソコンとスマートフォンで全然違うのはこのブレイクポイントが設定されているおかげです。

tailwindcssのブレイクポイントとは

もちろんtailwindcssにもデフォルトでブレイクポイントが用意されています。

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

以上がデフォルトで用意されているブレイクポイントです。
以下のように記述すると、

<div class="sm:text-red-100 md:text-blue-100 lg:text-green-100">テスト</div>

画面幅が640px以上の時には文字色が赤に、768px以上の時は青に、1024px以上の時は緑に変化します。
超簡単にレスポンシブなデザインを実現することができます。
デフォルトで用意されているブレイクポイントだけじゃ足りないよ！って人は、もちろん追加することができます。
まずはtailwindの設定ファイル「tailwind.config.js」を作成。

npx tailwindcss-cli@latest init

中身はこんな感じになってます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

デフォルトで用意されているブレイクポイントよりも大きいブレイクポイントを追加したいときは、

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  variants: {},
  plugins: [],
}

こんなふうに書くことで追加できます。

<div class=3xl:text-purple-100>テスト</div>

これで画面幅が1600px以上の時は文字色が紫になります。

今日の本題

逆にデフォルトで用意されているブレイクポイントよりも小さいブレイクポイントを追加したい時ですが、この時は注意が必要です。

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  variants: {},
  plugins: [],
}

まずは、tailwindライブラリからデフォルトで用意されている情報をrequireしてとってきます。

const defaultTheme = require('tailwindcss/defaultTheme')

デフォルトで用意されているcss、defaultThemeから、.screensでブレイクポイントに関する情報をスプレッド（展開）します。

...defaultTheme.screens,

その前に追加したいブレイクポイントをぶち込みます。

  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },

これで完了です。
サーバーの再起動をお忘れなく。

今日は一日中サイト模写をやっていたためライト目な記事を書きました！
最後までご覧いただきありがとうございました！
いいtailwindライフを！！