2022/06/27追記 本記事はTailwind CSSのv2を使用しています。 2022/06/27現在の最新バージョンはv3となっており設定等が異なる箇所がありますので、v3を利用の場合は以下のドキュメントを参照してください。 https://tailwindcss.com/docs/installation TailwindCSSは「使いやすさを優先しよう」という考え方で設計されたユーティリティファーストのCSSフレームワークです。公式ドキュメントがかなり充実していますので、こちらを参照しつつ導入部分を簡単にまとめてみたいと思います。 今回は行うことは以下のような内容です。 npmでtailwindcssをインストールする 設定ファイルを作成して簡単なカスタマイズをする Purge機能を使用してファイルの軽量化を行う TailwindCSSを利用する方法 TailwindCSSを利
![TailwindCSSの導入](https://cdn-ak-scissors.b.st-hatena.com/image/square/bda9847e5e8dc9229b2e6be3e8d5ee2f8fa71401/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--L2xYaZNJ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_68%3ATailwindCSS%2525E3%252581%2525AE%2525E5%2525B0%25258E%2525E5%252585%2525A5%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Akoyama%252520shigehito%252Cx_203%252Cy_98%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzBiODNkNzllMTEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fog-base.png)