Tailwindcssの基本的な使い方と導入方法を説明する

tailwindcssとは

CSSフレームワークです。

ただし、bootstrapやmaterial-uiのような従来のフレームワークとは異なり、

「ユーティリティファースト」の色彩が強いフレームワークです。

ユーティリティファーストは、ざっくりいうと、

予め用意された class を組み合わせて css を書かずにスタイリングを実現する考え方のことです。

※YOUTUBEでも解説しています

この記事を記載する意図

今までtailwindcssを見たことがない、使ったことがないという方向けですが、

特に、未経験エンジニアの方のポートフォリオ作成時に活用いただけると

とてもメリットがあるのではないかと考えています。

理由は大きく以下２点です。

①css作業にかかる時間を大幅に短縮できる

一般的に高品質なポートフォリオというのは、アプリ自体のオリジナリティが一定程度あること、機能数が充実していること、機能の実装難易度が高いということが重要な要素として挙げられるかと思います。そういった前提がある以上、例えば「この部分のマージンは6pxより8pxの方がいいかな・・・」といった試行錯誤や、「良質なポートフォリオを作成しつつ、cssのスキルを向上させたいので、独自のcssを一から記述してみよう」などの細かいcssの調整や車輪の再発明のような作業に時間をかけるということは、効率的に良質なポートフォリオを作成するという観点では、全く有効ではないと言えると思います。

とりわけ、未経験エンジニアの段階では、cssではなく、より技術的なロジックの部分（フロントのJSやバックエンドの開発）に少しでも多くの時間を充てて、機能性を高めていくことが直接的に採用担当者の方から評価を得やすい

②一からUI設計するのは難易度が高い。どうしてもチープな見た目になりがち

あくまでも私の（私含め）観測範囲内ですが、未経験エンジニアの段階で独自のcssスタイリングだけでカバーできるスタイルには限界があると痛感しています。その意味でもtailwindcssは効果を発揮してくれます

特徴

①基本的にはcssファイルの管理が不要

②cssの記述量が減る(特にメディアクエリ等の恩恵が高い)

③チーム開発などで共通のクラスを使用することにより、可読性や保守性が向上する

④もちろんcssファイルと併用も可能

優先順位も簡単に設定できる(!important)

⑤規定(あらかじめ用意されている)classをcssファイルに切り出す事も可能(@apply)

⑥レスポンシブ設定がかなり容易(スマホファースト設計)

適宜、　sm:p-6 md:p-8　といった形で容易に記述することができる

⑦コンポーネント用のclassはなくスタイリング用のクラスのみ

あらかじめ用意されたコンポーネント用のクラスがないので、独自に設定する必要がある

例)bootstarpのボタン

<button type="button" class="btn btn-default">Default</button>

⑧規定の(用意されている)classのカスタマイズも容易

用意されているclassの規定値を上書きする(theme)か、拡張する(extend)か選択できる

導入手順

基本的には公式ドキュメントの手順通りに設定すれば導入可能です。

ドキュメントもとても親切で、React、Next.js、Vue、Laravelt等のフレームワークやライブラリごとに分けて手順書を用意してくれている分、導入が用意です。

公式

今回はReact(Create React App)を使って導入していきたいと思います。

craでプロジェクトを作成し、プロジェクト内に移動

npx create-react-app my-project cd my-project

npmでtailwindcssをインストール

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

npmでcracoをインストールし、ejectを除くすべてのスクリプトでreact-scriptsの代わりにcracoを使用するようにpackage.jsonファイルを更新します(-を削除して+を追加)

npm install @craco/craco

// package.json
 {
    // ...
    "scripts": {
-     "start": "react-scripts start",
-     "build": "react-scripts build",
-     "test": "react-scripts test",
+     "start": "craco start",
+     "build": "craco build",
+     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

craco.config.jsを作成し、tailwindcssとautoprefixerをPostCSSプラグインとして追加

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

tailwindcssの初期化

npx tailwindcss init

プロジェクトのルートに最小限のtailwind.config.jsファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

tailwindcssを適用するファイルの種類（どのファイルパスにあるどういった拡張子のファイル）を適用対象とするかを設定

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],

./src/index.cssに@tailwindディレクティブを使用して読み込ませる

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

CSSファイルが./src/index.jsファイルにインポートされていることを確認します

  // src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
+ import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

最後にnpm run startでtailwindcssの反映が確認できます

動作確認

１．公式ドキュメント内のチャットコンポーネントを作成し、色々と設定をいじってみる

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
　　<div class="flex-shrink-0"
　　　<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
　　</div>
　　<div>
　　<div class="text-xl font-medium text-black">ChitChat</div>
　　　　<p class="text-gray-500">You have a new message!</p>
　　</div>
</div> 

・基本的にはcssファイルの管理が不要

・cssの記述量が減る(特にメディアクエリ等の恩恵が高い)

・チーム開発などで共通のクラスを使用することにより、可読性や保守性が向上する

・レスポンシブ設定がかなり容易(スマホファースト設計)

適宜、　sm:p-6 md:p-8　といった形で容易に記述することができる

（標準のブレークポイントで問題なければ、メディアクエリを記載する必要がない）

・コンポーネント用のclassはなくスタイリング用のクラスのみ

あらかじめ用意されたコンポーネントがないので、独自に設定する必要がある(cssで"uc" or 下記@applyを使用)

例)bootstarpのボタン

<button type="button" class="btn btn-default">Default</button>

２．cssとの併用・カスタマイズ関連

・cssファイルと併用可能

・規定(あらかじめ用意されている)classをcssファイルに切り出す事が可能(@apply)

レスポンシブや疑似クラスは、apply不可

・規定の(用意されている)classのカスタマイズも容易

用意されているclassの規定値を上書きする(theme)か、拡張する(extend)か選択できる

おまけ

オープンソースのコンポーネントが用意されているサイト

・tailwindcomponents

まとめ

いかがでしたでしょうか。本記事ではTailwindcssの基本的な使い方と導入方法を説明しています。ぜひ参考にしてみてください