この記事は kintone アドベントカレンダー 2022 の 11 日目の記事です。 はじめに TailwindCSS、いいですよね。 学習コストは大した事ないくせにけっこう劇的な効果があって、これまで CSS の命名ルールとか運用ルールとかで汲々としていた現場にそこそこドラスティックな変化をもたらしてくれていると感じています。 TailwindCSS 自体をあまり詳しく知らないと言う方は、ちょっと調べれば参考になるサイトはたくさん見つかるでしょう。 特に以下の記事はメリット・デメリット双方に言及しておりかなり有用です。 tailwindcss を導入して感じたメリット・デメリットについて この激オススメの CSS フレームワーク・TailwindCSS を kintone で利用するための勘所をお話ししようと言うのが今回の趣旨です。 早速作りましょう 仕上がりイメージはこんな感じ。 例
![kintoneでTailwindCSSを利用するための勘所 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/acddacd2b09c08fb26ef915f0cd1ccd6ab605efa/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9a2ludG9uZSVFMyU4MSVBN1RhaWx3aW5kQ1NTJUUzJTgyJTkyJUU1JTg4JUE5JUU3JTk0JUE4JUUzJTgxJTk5JUUzJTgyJThCJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFJUU1JThCJTk4JUU2JTg5JTgwJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkNtaWRkbGUmcz0yNjk0YjBhYWUyZTBjOTAxMzBmZTdlOThmNGU0NmYxMA%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwaVNoaW5rYWkmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPThlNDU4MjFhOWJmMzE0N2JmM2I5MmM2ZjMyNTEzNWVl%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D1b38e6fe9fef6c5afd5fc936fecae807)