【Next.js+TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズするNext.jstailwindcsstailwind.config.jsfwywd はじめに TailwindCSSでコーディング時に同じ記述を何度も記述してしまい、汚くなってしまったので、繰り返し使用するクラスの作り方や使用したい色を設定する方法の一部をまとめました。 分かること バックグラウンドにしたい画像の定義 使いまわしたい色の定義 <h1>タグや<p>タグ等、タグの基本スタイルを登録する クラス名を設定して装飾する 環境 Next.js:11.0.2 Tailwind CSS:2.2.15 React:17.0.2 Tailwind CSS について Next.jsでtailwind.cssのプロジェクトを作成されていない方はNext.js
![【Next.js+TailwindCSS】Next.jsにTailwindCSSを導入しtailwind.config.jsでカスタマイズする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c9f493e34b5516e1f81b97166becf163438a06ed/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgwJTkwTmV4dC5qcyVFRiVCQyU4QlRhaWx3aW5kQ1NTJUUzJTgwJTkxTmV4dC5qcyVFMyU4MSVBQlRhaWx3aW5kQ1NTJUUzJTgyJTkyJUU1JUIwJThFJUU1JTg1JUE1JUUzJTgxJTk3dGFpbHdpbmQuY29uZmlnLmpzJUUzJTgxJUE3JUUzJTgyJUFCJUUzJTgyJUI5JUUzJTgyJUJGJUUzJTgzJTlFJUUzJTgyJUE0JUUzJTgyJUJBJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01YzI5MGMzMmYyYTgzNjlkMTFlZWJjYTgyM2ViNjNkMg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGFrYXJhMDMmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWI0NzM1ZTI2ZGFjNWM2ZmZlMTBiNzEyYzY5ZDZiMjhj%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D770bec002ab589e153ed3684621ba975)