code-log

ソフトウェアに関すること

Next.jsにTailwind CSSを導入する + styled-componentsと一緒に使う

こんにちはかみむらです。一応フロントエンドエンジニアをやっていますが、CSSマークアップは苦手です。なので、できるだけ構造化されたものを使いたいです。そこで、検討されるのがCSSフレームワークです。現在CSSフレームワークはたくさんありますが、特に熱いのがTailwind CSSです。

Tailwind CSSはユーティリティファーストのCSSフレームワークで、事前に用意されているスタイルのクラスを追加して、レイアウトやコンポーネントを作成していきます。

Bootstrapと比べるとシンプルに扱えることが、人気の要因です。

例えば、Tailwind CSSのカードコンポーネントをみてみましょう。

f:id:kamimura-dev:20200220174310p:plain

美しいカードコンポーネントが、比較的短い記述量で作れます。

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">The Coldest Sunset</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
    </p>
  </div>
  <div class="px-6 py-4">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
  </div>
</div>

Tailwind CSSのCardsから引用
tailwindcss.com

そのほかにも、たくさんのデモコードがあります。今回はNext.jsにTailwind CSSを導入していきます。ついでに、styled-componentsでも使ってみましょう。

公式ドキュメント
tailwindcss.com

前提

create-next-appで作成したプロジェクトをベースにしていきます。

インストール

まずは必要なパッケージをインストールします。

$ yarn add -D @fullhuman/postcss-purgecss tailwindcss postcss-import

セットアップ

Tailwind CSSを使えるようにするための設定をします。postcss.config.jsファイルを作成してください。
postcss.config.js

const purgecss = [
  '@fullhuman/postcss-purgecss',
  {
    content: ['./components/**/*.js', './pages/**/*.js'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  },
];
module.exports = {
  plugins: [
    'postcss-import',
    'tailwindcss',
    'autoprefixer',
    ...(process.env.NODE_ENV === 'production' ? [purgecss] : []),
  ],
};

コードはこちらのテンプレートを参考にしました。
github.com

そして、Tailwind CSSbasecomponentsutilitiesをインポートします。pagesフォルダの中に、styles.cssを作成します。
pages/styles.css

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

作成したCSSファイルを、_app.jsに読み込みます。_app.jsについては、下記のドキュメントを一読してください。
Advanced Features: Custom `App` | Next.js

pages/_app.js

//追加
import "./style.css";

これで、Tailwind CSSを使うことができます。

styled-componentsで使う方法

多くのSPAライブラリでは、CSS in JSの使用が検討されると思います。私はstyled-componentsを使っているので、Tailwind CSSと協業する方法を調べてみました。

Next.jsにstyled-componentsを導入する記事はこちらでも書いています。
code-log.hatenablog.com

tailwind.macroというbabelのプラグインを使えば、styled-componentsと協業できそうです。なので、インストールします。
github.com

yarn add -D babel-plugin-macros tailwind.macro

補足
Tailwind v1系を使ってる場合は、alpha版を使わないといけないみたいです。なので、最新バージョンをインストールしてください。

yarn add -D tailwind.macro@next

github.com


インストールした、babelプラグインを.babelrcに追記します。
.babelrc

 {
  "presets": ["next/babel"],
  "plugins": [
  'macros',
  [
      "styled-components",
      {
        "ssr": true,
        "displayName": false,
        "preprocess": false 
      }
    ]
  ]
 }

そして、Tailwindの設定ファイルを作成します。

$ npx tailwind init

tailwind.config.jsが作成されます。

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

これで、tailwind.macroをインポートして、tw``の中に、Tailwind CSSのスタイルを入れれば作ることができます。下記は一例です。

import React from 'react';
import styled from 'styled-components';
import tw from 'tailwind.macro';

const Box = styled.div`
  ${tw`bg-teal-500`};
`;

const Hoge = () => (
  <Box></Box>
);

最後に

今回は、Next.jsにTailwind CSSを導入してみました。個人的なプロジェクトに導入することも考えていて、今後はTailwind CSSの記事も増えていきそうです。

参考

github.com