2022.7.29最近よく見かけるCSSのフレームワークであるTaliwindCSSはスタイルのプロパティや値をclass名で指定するという、一見変わった手法をとるのですが、Reactでコンポーネントベースで開発をする際にはとても便利だったりします。そこで今回はwebpack+Reactの環境でTailwindCSSを導入する流れをまとめてみたいと思います。TailwindCSSの使い方などについてはまた別記事にてまとめてみたいと思います。TypeScript/Babel(JavaScript)の環境でReactを導入する」で詳しくまとめておりますのでご参考に。TaliwindCSSのパッケージ本体をインストールしていきます。npmでインストールする以外にもCDNで利用できるようです、ただしCDNの場合には使用されていないスタイルも全て読み込むことになるので、あまりお勧めされないようですね。ビルドのプロセスを経ることでHTML側で使用しているclassに対応しているスタイルのみインクルードできます。tailwindcssこのようにパッケージがインストールできました、これで準備が完了ですが、カスタマイズ用の設定ファイルも用意しておきます。.....}下記のコマンドを実行することで、TaliwindCSSの設定ファイルを作成できます。init設定ファイルには拡張機能としていろんな設定が追加できますが、とりあえずは用途に応じてで良いでしょう。「content」のオプションだけは設定しておきたいですね。このオプションに指定したファイルを対象とした使用されているclassのみにビルド内容を限定することができます。することでファイルサイズを最適化しておきましょう。[],}続いてwebpackの設定になります。TailwindCSSを使うにあたっては「PostCSS」のローダーが必要となりますので、あらかじめ用意しておきます。(参考記事:webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う)TailwindCSSのライブラリ本体を読み込み、PostCSSのローダーのオプションにプラグインとして指定します。......}TailwindCSSを使う際には基本的にSassなどのプリプロフェッサーは使わないことを推奨されているようですが、もし使う場合にはSassのローダー側でも同じようにプラグインのオプションを指定しておきましょう。webpackの設定が終われば実際にCSS側でTailwindCSSをインポートしていきます。「@tailwind」の記述に続けて各種読み込むコードを指定します。utilitiesただし、SCSS記法のファイルではこのルールがエラーとなるようです。"@tailwind"ですので、下記のように「@use」を使ってパスを指定して読み込む形になります。utilities;あとは実際にHTMLやJSX内のテンプレートで要素に対してスタイルに対応したclass名を付けていきます。TailwindCSSのclass名はたくさんあるので公式のリファレンスhttps://tailwindcss.com/docs/reusing-stylesなどを参考にしましょう。);}これでビルドをすると実際にTailwindCSSのスタイルが適用されCSSが出力されていることが確認できますね。先述の通り設定ファイル内のcontentオプションに指定したファイル内で使用しているclassに限定されているのが確認できますね。28/var(--tw-text-opacity))}過去にはBootstrapなどのCSSフレームワークを使用したこともありますが、TailwindCSSはまた違った設計で開発されたフレームワークのような印象を受けます。慣れるまでは少し違和感があるものの、ユーティリティクラスの延長でclassで直感的にスタイルを記述していくのはとても便利ですね。TailwindCSSにはいろんな機能も用意されているようですので、また改めて記事にまとめてみたいと思います。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。