Tailwind CSSを導入してみる

目次

1. はじめに
2. Tailwind CSSとは
3. 導入
4. おわりに

はじめに

前職ではスタイル直書きやオレオレCSSでの実装が散見され、全体の統一を目的としたCSSフレームワークの導入を検討しました。
当時のリードエンジニアが比較検討しBootStrapとTailwind CSSのいずれかにしようとなり、基本的なことはどちらでも対応可能でしたがコンポーネントライブラリが豊富であるTailwind CSSを採用した結果となりました。

Tailwind CSSとは

Tailwind CSSはユーティリティファーストのCSSフレームワークです。個別にCSSを記述する必要がなく、決められたユーティリティクラスをクラス名に追加するだけでスタイリングが可能です。

導入

前提

新規ReactアプリケーションにTailwind CSSを導入するケースを想定します

やり方

• Tailwind CSSをインストール

npm# install -D tailwindcss

• tailwindcss.config.jsを作成

npx tailwindcss init -p

上記のコマンドを入力すると tailwind.config.js というファイルが生成されます。

• Tailwind CSS を適応するファイルパスの指定

生成後は以下のようになっています

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

↓

対象のパスを指定

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
- content: [],
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• index.cssにtailwndcssのルールを適用させる

src/index.css に@Tailwind を追加

src/index.css

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

• index.tsxにindex.cssをimportする

index.tsx

import "../src/index.css";

• 使い方

App.tsx

<button className="bg-red-500 text-white font-bold py-2 px-4 ">
   Hello Tailwind
</button>

チートシート

おわりに

今回は導入編として導入方法のみを纏めましたが、応用編として様々な使い方も今後POSTしていきます！！