はじめに
Typescript + React + Next.jsの勉強中です。
少しずつコードを書き始めました。
その過程で、TailWindCssをインストールしたため
Next.jsでのTailWindCssのインストール方法をまとめていきます。
TailWind CSSとは
Tailwind CSSはutility classを活用したCSSフレームワークです。
CSSフレームワークには他にもBootstrapなどがあり、これらのフレームワークでは事前に準備されているコンポーネントを活用します。
TailwindCSSではコンポーネントなどはなく、utility classを使って独自にデザインを行ってコンポーネントを構築します。
やりたいこと
Next.jsでTailWindCssを使いたい
前提条件
・Next.jsのインストールは完了している
インストール方法
# npmの場合
npm install tailwindcss
# yarnの場合
yarn add tailwindcss
これで完了です。
公式ドキュメントには glabal.cssやtailwind.config.tsに追記が必要とありましたが、インストールしたら自動で変更が入っていました。
もしtailwind.config.tsがない場合は下記を実行して作成してください。
npx tailwindcss init -ts
設定の詳細は公式をご確認ください。
使い方
bg-blue-500: 背景に青を指定
text-white: 文字色に白を指定
px-4: 左右に4のパディング
py-2: 上下に2のパディング
<button className="bg-blue-500 text-white py-2 px-4 ">
Sample Button
</button>
おわりに
TailWindCss のインストール方法と簡単な使い方をまとめました。
少しでも誰かのお役に立てれば幸いです。