Tailwind CSSを使ってみた

ウェブの海

長らく留守にしてました。
そしてまだ外観がそのままという。
いい加減なんとかしたいところです……。

Tailwind CSSとは

Tailwind CSSとは、CSSフレームワークのひとつです。
クラスのあてかたはこんなかんじ。

<div class="container md:w-1/2">
  <h1 class="text-gray-700">Hello,world!</h1>
</div>

md:はデバイス幅の指定です。

今回はGatsbyJSとSass(SCSS)を使う前提で進めます。
GatsbyJSの導入に関しては、こちらをご覧ください。

導入方法

まずnpmから。

$ npm install tailwindcss
$ npx tailwind init
$ npm install --save node-sass gatsby-plugin-sass

そしてgatsby-config.jsを編集します。

plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {
      postCssPlugins: [
        require("tailwindcss"),
        require("./tailwind.config.js"),
      ],
    },
  },
],

tailwind.config.jsは、$ npx tailwind initをした際に作成されています。
リポジトリの直下におきましょう。

次に、scssファイルをひとつ作成します。
場所はsrcの中が良いと思います。

@tailwind base;
@tailwind components;
@tailwind utilities;

すべてのページでこれを呼び出したいので、gatsby-browser.jsを編集します。

import "./src/style.scss"

そして、CSSフレームワークはそのままにしておくと重いので、圧縮します。

$ npm i -S purgecss gatsby-plugin-purgecss
plugins: [
  // 注意:scssのプラグインより後に書いてください!
  {
    resolve: "gatsby-plugin-purgecss",
    options: {
      content: [
        require("path").join(
          process.cwd(),
          "src/**/!(*.d).{js,jsx,ts,tsx,md,mdx}"
        ),
      ],
      printRejected: true, // 圧縮した内容を表示するかどうか
      develop: false, // develop実行時に圧縮するか
      tailwind: true, // Tailwindを使うのでtrueで
      whitelist: ["emoji"], // ホワイトリスト、ここに書いたのは圧縮で消されない
    },
  },
]

これでbuildを実行すると(developをtrueにした場合はdevelopの時も)、圧縮されます。

参考記事

タイトルとURLをコピーしました