TailwindCSSでの開発体験をあげてくれるツールを紹介します

2022年9月の社内LTで使用した資料

Transcript

1. TailwindCSS での開発体験をあげてくれるツールを紹介 します 日付：2022/9/20 担当者：林 smartstart勉強会 1
2. 目次 1. 前置き：TailwindCSS とは？ TailwindCSSとは? TailwindCSSのメリット・デメリット 2. 便利なツールたち 開発環境編 ドキュメント編 smartstart勉強会 2
3. 前置き TailwindCSS とは？ smartstart勉強会 3
4. TailwindCSSとは？ 『Tailwind CSS』とは、Utility First（ユーティリティファースト）をコンセプトに設計され たCSSフレームワーク。 『Tailwind CSS』はCSSのプロパティごとにユーティリティクラスが準備されており、その ユーティリティクラスをHTMLのクラス属性に追加していくことで使用する。 smartstart勉強会 4
5. CSSの場合 スタイルシート p.bg { background-color:white; text-align:center; } HTML <p class="bg"> 文字</p> TailwindCSSの場合 HTML <p class="bg-white text-center"> 文字</p> smartstart勉強会 5
6. TailwindCSS のメリット・デメリット smartstart勉強会 6
7. メリット 記述量が少なくなる クラスの命名を考えなくてよい ドキュメントが充実している デメリット CSS初心者にはお勧めしづらい クラスがたくさんあると可読性が低くなる 個性的なUIを表現しづらい smartstart勉強会 7
8. 便利なツールたち smartstart勉強会 8
9. 開発環境編 prettier-plugin-tailwindcss (Prettier プラグイン) eslint-plugin-tailwindcss (ESLint プラグイン) Tailwind CSS IntelliSense (VSCode 拡張機能) smartstart勉強会 9
10. prettier-plugin-tailwindcss Github: https://github.com/tailwindlabs/prettier-plugin-tailwindcss 2022 年の 1 月に Tailwind 公式がリリースした Prettier のプラグイン。 class に渡された文字列から TailwindCSS クラスを含む属性を探して、推奨されるクラスの順 序に従ってそれらを自動的に並べ替えてくれる。 Before: <button className="bg-blue-600 text-xs font-medium inline-block px-6 py-2.5 leading-tight rounded"> After: <button className="inline-block rounded bg-blue-600 px-6 py-2.5 text-xs font-medium leading-tight"> smartstart勉強会 10
11. eslint-plugin-tailwindcss Github: https://github.com/francoismassart/eslint-plugin-tailwindcss ESLintのTailwind用のプラグイン。 デフォルトの設定では以下のようにclassのコンフリクト、tailwindにサポートされていない クラスの使用、冗長な記述などを指摘してくれる。 Githubの公式リポジトリに各ルールが記載されているのでそちらを参照しよう。 <button className="block inline-block unknownclass px-8 py-8 "> Warning: Classnames 'px-8, py-8' could be replaced by the 'p-8' shorthand! tailwindcss/enforces-shorthand Warning: Classname 'unknownclass' is not a Tailwind CSS class! tailwindcss/no-custom-classname Error: Classnames block, inline-block are conflicting! tailwindcss/no-contradicting-classname smartstart勉強会 11
12. Tailwind CSS IntelliSense Github: https://github.com/tailwindlabs/tailwindcss-intellisense VSCodeの拡張機能。 自動保管をしてくれる。 smartstart勉強会 12
13. ドキュメント編 tailwind cheat sheet tailwind elements tailwind UI awesome tailwindcss smartstart勉強会 13
14. tailwind cheat sheet URL: https://nerdcave.com/tailwind-cheat-sheet tailwindcssのクラスが乗ったサイト。 tailwindがサポートしているクラスがリスト形式で一覧でまとめられている。 smartstart勉強会 14
15. tailwind elements URL: https://tailwind-elements.com/quick-start/ コンポーネント集。 webサイトに使用する基本的なコンポーネントが一通り載っている。 smartstart勉強会 15
16. tailwind UI URL: https://tailwindui.com/components コンポーネント集。 ページのテンプレートが載っている。 一部有料である点に注意。 smartstart勉強会 16
17. awesome tailwindcss URL: https://github.com/aniftyco/awesome-tailwindcss Githubリポジトリ。 tailwindの学習リソースやプラグインがたくさん載っている。 smartstart勉強会 17
18. 参考記事 https://coliss.com/articles/build-websites/operation/css/a-look-at-tailwind- css.html https://udemy.benesse.co.jp/development/system/tailwind-css.html https://dev.to/tracycss/tailwind-css-resources-you-wish-you-had-3i18 https://omkz.net/tailwind-tools/ smartstart勉強会 18
19. 質疑応答 smartstart勉強会 19