TailwindCSS をNext.js (React)に組み込む

Programming

はじめに

最近プライベートでTailwindCSSを使うことが多く、Next.jsに組み込んでみたので覚書として書いておきます。

TailwindCSSとは 一言でいうとCSS Frameworkを作れる Framework (な… 何を言っているのか わからねーと思うが)

Next.jsとは 一言でいうとSSR(Server Side Renderring)のできるReactベースのJS Framework

実はこのブログもTailwindCSSを当てて作成していたりします。よかったら使ってみてくださいmm

何もとにかくyarn add tailwindcss

npm install tailwindcss
yarn add tailwindcss

Nextの場合は、他にもPostCSSのバグを埋めるライブラリが必要のようです。

npm install postcss-flexbugs-fixes@4.2.1
yarn add postcss-flexbugs-fixes@4.2.1

npm install postcss-preset-env@6.7.0
yarn add postcss-preset-env@6.7.0

touch postcss.config.js

プロジェクト直下にPostCSSの設定ファイルを作成します。

PostCSSとは CSSツールを作るためのフレームワーク

module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ],
}

touch src/styles/index.css

いわゆる共通となるCSSファイルを作成します。ここで独自クラスを作成したり、既存のクラスに対して上書きしてTailwindCSSのルール下でCSSを設定できます。

@tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

touch src/pages/_app.tsx

暗黙的に読み込んでもらうコンポーネントを作成します。(作成するとこのすべてのComponentをラップされるイメージでいます。:違ったら教えて下さいmm)

import '../styles/index.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

touch tailwind.config.js

ここがTailwindCSSの肝となる部分です。このファイルをよしなに変更していくと共通的なCSSクラスが作成されます。

例えば、accent-1を設定すると <p className="text-accent-1">ほげほげ</p>とするとほげほげ がグレーのカラーに変わります。何が言いたいかと言うとtext-primaryだったりtext-secondaryのようなカラーテーマを自分で作れるということですね。

すごいTailwindCSS。

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  purge: ['./components/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        'accent-1': '#828282',
      },
    },
  },
  variants: {},
  plugins: [],
};

まとめ

いかがでしたでしょうか。ちょっと手順多くて反映されるまで分かりづらいので案外つまづきやすいかもしれません。

最近話題のTailwindCSSですが、企業内でのブランドイメージを向上させるために共通CSSライブラリを作成したりするときにかなり使えるかもしれませんね。tailwind.config.jsを入れ替えるだけでカラーテーマも変えれるので。

結局これを前提に作ってしまえばVueもReactもAngularも関係なく共通のCSSが適用されるので有用な気がします。

参考URL

https://github.com/vercel/next.js/tree/a2d83952c1c35fc83542bf0e5542b899aab0d6ef/examples/with-tailwindcss

#CSS#React#TailwindCSS

Related Links


DarkModeのCSSを適用させる
Yoshiki Ohashi
2x歳の個人事業主エンジニア。SI企業1年, Webベンチャー企業2年で上流から下流の経験を経て独立。 エンジニアらしく性格は温和。プロジェクトチームに心理的安全性を求める。go gin | Spring | Java | Kotlin | Vue | Python | 筋トレ | キャンプ | 個人開発 | 新潟出身

よく読まれている記事


Gatsbyでブログを始めるまで
GatsbyにShare機能、OGPタグをつける
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
DL実装するときに理解すること
多機能なGatsbyJSのThemeをつくってnpmに公開した話
© 2020 Yoshiki Ohashi All rights reserved.