実際に扱う際は最新の情報にアクセスしてください。v3.xTailwindCSSはutility-firstを掲げており、必要最低限のスタイルを持ったクラスを組み合わせることで、デザインを構築することを目的としたCSSフレームワークですtailwindcss。従来だと以下のような書き方をしていた部分が、TailwindCSSではいくつかのクラスを組み合わせて構築します。同じですが、TailwindCSSで書くとレスポンシブデザインや擬似クラスにも対応できます。必要最低限のクラスがたくさんあるものがTailwindCSSだとすると、パッケージサイズが大きくなる心配があるかもしれませんが、v3.x以前ではpurgeCSSを使って未使用のCSSをビルド時に削除する仕組みがありました。v3.xからは使用しているCSSのみをビルドするJITコンパイルが追加され、purgeCSSが削除されました。JITコンパイルこれはテンプレートファイルを作成したときに、CSSをオンデマンドでコンパイルする仕組みです。これを利用することで、必要に応じてスタイルを生成するようになりました。(以前はビルド時に未使用のCSSを削除する関係上、開発環境は余分なCSSを持った状態でした)。詳細な内容はこちらのブログtailwind_jitやGitHubのリポジトリtailwind_jid2から確認できます。Configuration追加JITコンパイルを採用したことで、contentセクションでTailwindCSSを適用させたいファイルを指定するようになりました。この部分が古いTailwindCSSの記事とズレる部分なので注意が必要です。3.xまでは決められたフォントサイズや色しか使うことができませんでした。これは余分にクラスを追加すると、開発環境での動作が重くなるためです。3.x以降はJITコンパイルを利用するため、好きなフォントサイズや色、幅などを指定できるようになりました。[]を使って以下のように指定することで、任意の値を使うことができます。</div>CDN経由での実行3.xからTailwindCSSをCDN経由で実行できるようになりました。headに下記のスクリプトタグを追加することで試すことができます。これは開発や新機能のテスト向けで、本番での利用は推奨されてませんtailwind_cdn。src="https://cdn.tailwindcss.com"></script>フォームの装飾デフォルトのファイル入力フォームを装飾できるようになりました。使いますtailwind_input_button。マルチカラムレイアウトmulti_column_layoutなどがあります。開発時のCSSのサイズを気にしなくて良くなったので、今後も面白いクラスが追加されていきそうで今後も期待です。Pilefortです。東京でエソジニアをしてます。Frameworkです。GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。何かの役に立てば幸いです。2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。https://booth.pm/ja/items/4157010XMind8ファイルをMarkdownファイルに変換するツールを作りました。(最新版だと一部メソッドが削除されてるため)。2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。https://pilefort.booth.pm/items/3633323サイトマップNotes業務や趣味での気づき・メモScraps雑記。ネットで見つけた面白い記事やニュースSnippets記事にするまでもないけど、便利なコマンドや豆知識Works。