<p>みなさんはTailwind CSSを使ったことがありますか？<br>例えば、<code>&lt;h1&gt;</code>に<code>color: red</code>を適用させたけば<code>&lt;h1 class="text-red-800"&gt;</code>のように特定のclassを指定することでStyleを当てていくCSSフレームワークです。<br>導入方法は下記公式サイトにわかりやすく記載がありますのでそちらをご覧ください。<br><a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">https://tailwindcss.com</a></p><h2 id="h86672c8acc">本題</h2><p><a href="https://tailwindcomponents.com/cheatsheet/" target="_blank" rel="noopener noreferrer">https://tailwindcomponents.com/cheatsheet/</a><br>基本はこのサイトに書いてあるクラスを指定すればいいのですが、この中に無いものを指定したい時はどうすればいいかと言うのが本題です。</p><h3 id="h5de200be56">固定値</h3><p>例えば<code>&lt;div&gt;</code>に<code> width: 165px</code>を指定したくてもどこにもありません。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/fa52ecc563594c63a5b0f7c7957a0521/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-03%2012.38.02.png" alt=""><br>ではこう言う時はどうすればいいのでしょうか？<br><br><code>[]</code>で固定値を指定する。<br>つまり、この場合で言うと下記のように指定します。</p><pre><code>&lt;div class="w-[165px]"&gt;&lt;/div&gt;</code></pre><h3 id="h378d3365f9">calc()計算</h3><p>Tailwind CSSでも<code>calc()</code>も使えます。</p><pre><code>&lt;div class="h-[calc(100vh_-_80px)]"&gt;&lt;/div&gt;</code></pre><p><br>ミソは空白に<code>_</code>を入れること。<br><em>「Tailwind CSSでは空白には</em><em><code>_</code></em><em>を入れなければなりません。」</em><br>自分はそれを知らなくていつまで経ってもできませんでしたw</p><h3 id="hcb2b18c4f8">Google Fonts</h3><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/b2a263d9c1fb4283bcab8b8859a93a1e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-03%2014.49.57.png" alt=""><br><code>font-family</code>もあります。<br>では、どのようにして上記以外のフォントを使えば良いのでしょうか？<br>その方法をこの章ではお伝えします。<br><br>今回は<code>Bad Script</code>というフォントを使用してみます。<br><a href="https://fonts.google.com/specimen/Bad+Script?query=bad" target="_blank" rel="noopener noreferrer">https://fonts.google.com/specimen/Bad+Script?query=bad</a><br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/e2298b266a7543e38a9463d3ac31cc01/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-04-03%2016.09.42.png" alt=""><br>上記のサイトにアクセスし、下記を記述したファイルに<code>@import</code>を追加します。</p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre><p><br>次のステップです。<br><em>tailwind.config.js</em>を下記のように編集します。</p><pre><code>module.exports = {
  theme: {
    extend: {
      // フォントを追加
      fontFamily: {
        badScript: ["Bad Script", "cursive"],
      },
  // ...</code></pre><p>これで準備完了です。<br>ではこのフォントを実際に使ってみます。</p><pre><code>&lt;h1 class="font-badScript"&gt;TITLE&lt;/h1&gt;</code></pre><h3 id="hf3a351c61b">カスタムプロパティ</h3><p>Tailwind CSS側が用意していないプロパティは自分で作成することができます。<br><br>例えば、文字列が2行を超えると<code>・・・</code>にするプロパティを作成します。<br>先ほどの</p><pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;</code></pre><p>にとある構文を追加すれば、自分でプロパティを作成できます。</p><pre><code>@layer utilities {
  .webkit-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}</code></pre><p><br></p><pre><code>&lt;p class="webkit-line-clamp"&gt;hogehogehoge・・・・・・・・・・・・・・・&lt;/p&gt;</code></pre><h3 id="h0201d4f644">レスポンシブ</h3><p>Tailwind CSSでは下記のブレークポイントは用意されています。(モバイルファースト)<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/6769f63aa5e24774a4acfa06986f77f1/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3633353230352f66323236613532392d333138342d626361352d303465342d3562336433623561616162372e706e67.png" alt=""><br>今回は自分でブレイクポイントを作ります。<br><br>作り方は<em>tailwind.config.js</em>を下記のように記載しブレークポイントを作成します。</p><pre><code>module.exports = {
  theme: {
    screens: {
      // --------------------------------------------------
      // custom settings
      // --------------------------------------------------
      maxsp: { max: "７６８px" }, 
      sptb: { min: "769px", max: "1279px" }, 
      maxpc: {max: "1280"},
      // --------------------------------------------------

      // -----------------------------------
      // tailwind default
      // --------------------------------------------------
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
  // ...</code></pre><p><br></p><pre><code>&lt;div class="w-80 maxsp:w-full"&gt;BOX&lt;/div&gt;

div {
  width: 320px;
}
@media screen and (max-width:768px) {
　　div {
    　　width: 100%;
　　}
}</code></pre><p><br>Tailwind CSSで用意されているレスポンシブはモバイルファーストです。<br>自分はモバイルファーストのレスポンシブに慣れていないので今回PCファーストに書き換えました。<br>この機会にモバイルファーストのレスポンシブに慣れていかないとなぁw<br><br>以上が個人的に「この場合Tailwind CSSでどのように書けばいい」でした。</p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://www.ibulog.com/posts/2021/08/tailwind-fixed-value" target="_blank" rel="noopener noreferrer">https://www.ibulog.com/posts/2021/08/tailwind-fixed-value</a></li><li><a href="https://qiita.com/dtakkiy/items/dd161e2646695b387277" target="_blank" rel="noopener noreferrer">https://qiita.com/dtakkiy/items/dd161e2646695b387277</a></li></ul><h2 id="h7ee4f2333d">追記(2023-04-30)</h2><h3 id="hd28e9553ca">ダークモード</h3><p>Tailwind CSSでダークモードを実装すればいいのでしょうか？</p><h4 id="h6b2b5d41ab">tailwind.config.jsの設定</h4><p>Tailwind CSS でダークモードを有効化するためには、<code>tailwind.config.js</code>&nbsp;ファイルを修正します。</p><pre><code>module.exports = {
 // 省略
  darkMode: // 'media' or 'class'
}</code></pre><ul><li>media</li></ul><p><code>media</code>&nbsp;を指定した場合には、OS の設定に基づいてダークモードを適用するかどうか決定します。ただし、手動でダークモードとライトモードを切り替えることができません。<br>これにより、OS のダークモードの設定値は<code>prefers-color-scheme</code>によって取得されます。</p><ul><li>class</li></ul><p><code>class</code>を指定した場合、ユーザーによって手動でダークモードを切り替えられるようにするために指定します。設定すると、自身のルート要素に対して&nbsp;<code>.darkクラス</code>が付与されてます。付与される場合のみダークモードが適用されるという事になります。</p><pre><code>&lt;html class="dark"&gt;
  &lt;body&gt;
     &lt;!-- ... --&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre><p>また、<code>.darkクラス</code>を付与するかしないかはJavaScriptのお力になります。</p><pre><code>&lt;label class="relative inline-flex items-center cursor-pointer"&gt;
  &lt;input  id="checkbox" type="checkbox" value="" class="sr-only peer"&gt;
  &lt;div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"&gt;&lt;/div&gt;
  &lt;span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"&gt;Toggle me&lt;/span&gt;
&lt;/label&gt;

&lt;script&gt;
const element = document.querySelector("#checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
    document.documentElement.classList.add('dark')
    localStorage.theme = 'dark'
&nbsp;} else {
&nbsp; &nbsp;document.documentElement.classList.remove('dark')
     localStorage.theme = 'light'
&nbsp;}
}
&lt;/script&gt;</code></pre><p>HTMLのスイッチの箇所は下記リンクのサンプルコードから拝借してきました。<br><a href="https://flowbite.com/docs/forms/toggle/" target="_blank" rel="noopener noreferrer">https://flowbite.com/docs/forms/toggle/</a><br>では、最後に現在の状態がダークモードなのかを判別させるコードです。<br>公式サイトにいい感じのコードがありましたのでこちらも拝借です。</p><pre><code>// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) &amp;&amp; window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')</code></pre><p><a href="https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually" target="_blank" rel="noopener noreferrer">https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually</a><br>ローカルストレージの&nbsp;<code>theme</code>&nbsp;の値を確認し、値が&nbsp;<code>dark</code>&nbsp;であった場合には、<code>&lt;html&gt;</code>&nbsp;タグに&nbsp;<code>.darkクラス</code>を付与します。<br>ローカルストレージに値が存在しない場合、<code>window.matchMedia('(prefers-color-scheme: dark)').matches</code>&nbsp;によって OS のダークモードの設定を確認します。</p><h4 id="hbfc727c1ce">ダークモード時のスタイル</h4><pre><code>&lt;section class="h-screen flex justufy-center items-center bg-gray-100 dark:bg-gray-800"&gt;
  &lt;h1 class="text-3xl text-gray-800 dark:text-gray-100"&gt;こんにちは&lt;/h1&gt;
&lt;/section&gt;</code></pre><p>このように<code>dark:</code>を指定してダークモード時のスタイルを指定します。</p><h2 id="h8b60accf33">追記(2022-05-20)</h2><h3 id="hc04e156993">!important</h3><p>以下のものTailwind CSSで実装したいときどうすればいいのか？</p><pre><code>position: relative !important;</code></pre><p>この<code>!important</code>ってどうすんねん？下記のようにすればいい。</p><pre><code>!relative</code></pre><p><code>!</code>を頭につけるだけでした。</p>

T.W

Tailwind CSSでこう言うときどすればいいのかを解決してみた。