Aton-Kish / Gridsome with Tailwind CSS
Created 2020-10-17 18:08:08 Modified 2020-10-17

2304 Words

Gridsome with Tailwind CSS

パッケージ管理にはnpmではなくyarnを使うので、 npm派の場合は適宜読み替えてください

Gridsome のプロジェクトに Tailwind CSS を導入していきます

Tailwind CSS とは

  • Tailwind CSSはユーティリティファーストの CSS フレームワーク
  • 多くの CSS フレームワークがコンポーネントを提供するのに対して、コンポーネントの部品であるユーティリティ群を豊富に提供してくれるので、カスタマイズ性が高い

参考


Tailwind CSS インストール

Gridsome のプラグインとしてgridsome-plugin-tailwindcssもあるが、今回はマニュアルインストールでやってみる

  1. パッケージインストール

    yarn add tailwindcss
    
    • よく Tailwind CSS と一緒に使っていないスタイルを削除してサイズを削減するのためツールである PurgeCSS(@fullhuman/postcss-purgecssなど)が導入されていますが、Tailwind CSS v1.40 以降は PurgeCSS が組み込まれているので改めて導入しなくてもいいと思います
    • Tailwind CSS 以外にも CSS 群をたくさん追加する場合にはまとめて Purge するために導入するのはありかもしれません
  2. CSS ファイル作成
    src/assets/css/tailwind.css などに作ります(importできればどこでも大丈夫です)

    @import "tailwindcss/base";
    @import "tailwindcss/components";
    @import "tailwindcss/utilities";
    
  3. main.jsimportする

    // import: Tailwind CSS
    import "~/assets/css/tailwind.css";
    
    import DefaultLayout from "~/layouts/Default.vue";
    
    export default function (Vue, { router, head, isClient }) {
      // Set default layout as a global component
      Vue.component("Layout", DefaultLayout);
    }
    
  4. Tailwind CSS カスタマイズ(必要あれば)

    1. コンフィグ生成

      npx tailwindcss init
      
      • 以下のようなtailwind.config.jsが生成される

        module.exports = {
          future: {
            // removeDeprecatedGapUtilities: true,
            // purgeLayersByDefault: true,
          },
          purge: [],
          theme: {
            extend: {},
          },
          variants: {},
          plugins: [],
        }
        
    2. tailwind.config.jsカスタマイズ

      module.exports = {
        future: {
          removeDeprecatedGapUtilities: true,
          purgeLayersByDefault: true,
        },
        purge: {
          content: ["./src/**/*.vue"],
        },
        theme: {
          extend: {},
        },
        variants: {},
        plugins: [],
      };
      
      • Purge する場合は Tailwind CSS 以外で使用されているクラス名などをホワイトリストに入れたりしている記事も多いが、今回は Tailwind CSS に組み込まれた PurgeCSS を使用しているのでおそらく勝手に消したりしないはず(詳しくはわかっていないので注意です)
      • しっかりカスタマイズする場合はControlling File Size - Tailwind CSSを参考にする
  5. gridsome.config.js編集

    module.exports = {
      siteName: "Gridsome",
      plugins: [],
      css: {
        loaderOptions: {
          postcss: {
            plugins: [require("tailwindcss")],
          },
        },
      },
    };
    
  • これで Tailwind CSS が Gridsome のプロジェクトに組み込まれたはずです
    • 適当にsrc/pages/Index.vue<h1>Hello, world!</h1>class=text-red-500などをつけて反映されるか確認しましょう

Tailwind CSS Typography インストール

Tailwind CSS を導入してみると、h1-h6をはじめとしていろいろなデフォルトスタイルがリセットされていることに気づくと思います

せっかくマークダウンでお手軽に記事を書いていこうと思ったのにスタイルが…と思うかもしれませんが、ここで Tailwind CSS Typography (@tailwindcss/typography - Tailwind CSS) の出番です

Tailwind CSS Typography が記事に必要なタイポグラフィのユーティリティ群を提供してくれます

  1. パッケージインストール

    yarn add @tailwindcss/typography
    
  2. tailwind.config.js編集

    module.exports = {
      // ...
      plugins: [require("@tailwindcss/typography")],
    };
    
  3. マークダウンテンプレートに適用

    • ここでは@gridsome/vue-remarkを導入している前提で書きます

      <template>
        <Layout>
          <article class="prose">
            <VueRemarkContent />
          </article>
        </Layout>
      </template>
      
      <page-query>
      // ...
      
      • proseクラスが Tailwind CSS Typography から提供されており、<article></article>下に展開されるマークダウンの記事にタイポグラフィが適用されます

Tailwind CSS Typography カスタマイズ

タイポグラフィの細かなカスタマイズはtailwindlabs/tailwindcss-typographyを参照しましょう

特定のスタイルを調整する例をあげてみます
tailwind.config.jsthemeを編集していきます

module.exports = {
  // ...
  theme: {
    typography: (theme) => ({
      default: {
        css: {
          color: "#333",
          a: {
            color: theme("colors.orange.600"),
            "&:hover": {
              color: theme("colors.orange.400"),
            },
          },
          // ...
        },
      },
    }),
    extend: {},
  },
  // ...
};

Dark モードに対応する

最近人気の Dark モードですが、カスタマイズすることで対応することができます

  1. Tailwind CSS にdark-modeプレフィックスを追加する
    tailwind.config.js編集

    module.exports = {
      // ...
      theme: {
        // ...
        extend: {
          screens: {
            "dark-mode": { raw: "(prefers-color-scheme: dark)" },
          },
        },
      },
      // ...
    };
    
    • これで Tailwind CSS にdark-modeプレフィックスが追加できました
    • class="dark-mode:bg-gray-800"などとすればダークモードブラウザのみbg-gray-800が適応されます
  2. Tailwind CSS Typography に Dark モード用クラスを作成する
    tailwind.config.js編集

    module.exports = {
      // ...
      theme: {
        typography: (theme) => ({
          default: {
            // ...
          },
          dark: {
            css: {
              color: theme("colors.gray.300"),
              a: {
                color: theme("colors.green.500"),
                "&:hover": {
                  color: theme("colors.green.500"),
                },
              },
    
              h1: {
                color: theme("colors.gray.300"),
              },
              h2: {
                color: theme("colors.gray.300"),
              },
              h3: {
                color: theme("colors.gray.300"),
              },
              h4: {
                color: theme("colors.gray.300"),
              },
              h5: {
                color: theme("colors.gray.300"),
              },
              h6: {
                color: theme("colors.gray.300"),
              },
    
              strong: {
                color: theme("colors.gray.300"),
              },
    
              code: {
                color: theme("colors.gray.300"),
              },
    
              figcaption: {
                color: theme("colors.gray.500"),
              },
            },
          },
        }),
        // ...
      }
      // ...
    };
    
  3. マークダウンテンプレートに適用

    <template>
      <Layout>
        <article class="prose dark-mode:prose-dark">
          <VueRemarkContent />
        </article>
      </Layout>
    </template>
    
    <page-query>
    // ...
    
    • ブラウザが Dark モードのとき、作成したprose-darkクラスのスタイルがproseクラスのスタイルを上書きしてくれます