Tailwind CSSの導入方法

CSS 2022.03.24

ブログメインビジュアル

こんにちは、エンジニアの鞠谷です。

最近、流行っているTailwind CSSについて紹介したいと思います。
また、Next.js + TypeScript環境での導入方法についても書いていきます。

Tailwind CSSとは

Tailwind CSSとはユーティリティファーストをコンセプトに設計されたCSSフレームワークです。

ユーティリティファーストとは、CSSを記述せずにデザインを構築することです。Tailwind CSSでは用意されたクラスを直接HTMLに適用することで要素のスタイルを設定できます。

従来のやり方では、ウェブ上で何かをデザインする必要があるときはCSSを書きます。ですが、ユーティリティクラスを使用することでCSSを記述せずにカスタムデザインを構築できます。

さらにこちらの動画を見るとより内容がわかるかと思います。

Tailwind CSSのメリットとデメリット

Tailwindを使うメリットとしては以下が挙げられます。

メリット

クラス名を考える手間がなくなる
CSSファイルを書くための記述量が圧倒的に減る
スタイルの変更をHTML上で行える

逆にデメリットとして考えられるのは以下です。

デメリット

クラス名を覚えるもしくは確認作業が発生する
クラス名の量が多くなってしまう
クラスの並び順などの書き方が人によって異なる場合の管理が難しそう

しかし、それを補ってくれるものがあるのでご紹介します。

vscodeの拡張機能でクラス名を補完してくれる
- Tailwind CSS IntelliSense
eslint-plugin-tailwindcssで自動的に並べ順を修正してくれたり、タイポや重複を検知してくれる
- eslint-plugin-tailwindcssを触ってみる

それでは、Next.js + TypeScript環境へ導入してみましょう。

Next.js + TypeScript環境へのTailwind CSSの導入方法

最新バージョンであるTailwind CSSのv3.0.23を入れる方法を解説します。

Tailwind CSS + TypeScriptが入ったNext.jsの公式サンプルがないため、Next.jsのプロジェクトを作成し、Tailwind CSSを導入します。

Next.js(TypeScript)の新規プロジェクトを作成する

$ yarn create next-app (プロジェクト名) --typescript

上記のコマンドでNext.jsの新規プロジェクトを作成します。

Tailwind CSSを導入する

Tailwind CSSを導入するため、Next.jsのプロジェクトに、以下の3つのパッケージをインストールします。

tailwindcss
postcss
autoprefixer

$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

設定ファイルを作成する

インストールが完了したので、次に設定ファイルを作成します。
次のコマンドで以下のファイルが作成されます。

tailwind.config.js
postcss.config.js

$ yarn tailwindcss init

postcss.config.jsを設定する

以下のように設定します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.jsを設定する

プロジェクトのコンテンツソースを構成します。
Tailwind CSSは、すべてのHTML、JavaScriptコンポーネント、およびその他のテンプレートファイルでクラス名をスキャンし、それらのスタイルに対応するすべてのCSSを生成することで機能します。

Tailwindが必要なすべてのCSSを生成するには、Tailwindクラス名を含むプロジェクト内のすべてのファイルについて知る必要があります。
contentセクションで、すべてのコンテンツファイルへのパスを構成します。

以下のように設定します。

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

少しだけ解説します。

Next.jsではpagesディレクトリにあるファイルがルーティングされます。そのため、pagesディレクトリ以下のファイルをTailwind CSSの監視対象にしています。

また今回はcomponentsディレクトリ以下にそれぞれのコンポーネントを記述していきます。そのため、componentsディレクトリ以下のファイルもcontentに書きました。

styles/global.cssを設定する

Tailwind CSSを使用するようにstyles/global.cssで元からあったスタイルを削除して以下を設定します

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

設定完了

以上で設定完了です。
yarn run dev をしてスタイルをいじってみてください。

おわりに

Tailwind CSSのメリット・デメリット及び導入方法をご紹介しました。
Tailwind CSSで再現不可能なデザインはないと言われています。
新しくプロジェクトを始める際に導入を考えてみてはいかがでしょうか？

この記事を書いた人 kikutani 2018年12月に中途入社したエンジニアです。最近はiOSを開発しています。

TOP