Gridsome with Tailwind CSS

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

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

Tailwind CSS とは

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

参考

Tailwind CSS
Tailwind CSS Typography
- @tailwindcss/typography - Tailwind CSS
- tailwindlabs/tailwindcss-typography
Dark モード対応
- Add Dark Mode support to @tailwindcss/typography・stefanzweifel.io

Tailwind CSS インストール

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

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

main.jsでimportする

// 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);
}

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を参考にする

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 が記事に必要なタイポグラフィのユーティリティ群を提供してくれます

パッケージインストール
```
yarn add @tailwindcss/typography
```

tailwind.config.js編集

module.exports = {
  // ...
  plugins: [require("@tailwindcss/typography")],
};

マークダウンテンプレートに適用
- ここでは@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.jsのthemeを編集していきます

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

上の例では文字の色を#333に、リンク文字の色をtext-orange-600、hover 時にはtext-orange-400にする設定です
値による直接的な指定と Tailwind CSS のクラスによる指定ができます
tailwindcss-typography/styles.js at master · tailwindlabs/tailwindcss-typographyを眺めるとカスタマイズしやすいと思います

Dark モードに対応する

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

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が適応されます

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"),
          },
        },
      },
    }),
    // ...
  }
  // ...
};

theme.typography.darkに定義したスタイルはprose-darkというクラス名で利用できるようになる
あくまで上のコードは例なので、tailwindcss-typography/styles.js at master · tailwindlabs/tailwindcss-typographyを眺めつつカスタマイズしながら作成していきましょう

マークダウンテンプレートに適用
```
<template>
  <Layout>
    <article class="prose dark-mode:prose-dark">
      <VueRemarkContent />
    </article>
  </Layout>
</template>

<page-query>
// ...
```
- ブラウザが Dark モードのとき、作成したprose-darkクラスのスタイルがproseクラスのスタイルを上書きしてくれます

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