TechNote

single.php

TailwindCSS

目次

TailwindCSSはローカル環境のNode.jsでHTMLに付与したユーティリティクラスがstyle.cssファイルにbulid(変換)されて構築される。仕組みは違うのかもしれないが、Sassのようなもの。

CDNを使用する場合は、ローカル側でNode.jsが機能しないためbuildが実行されず、TailwindのCSSコードが全て読み込まれたりしてしまう。余計なデータも読み込んでサイトのパフォーマンスが下がってしまう。

  • ユーティリティファースト
  • BEMが不要

Node.js、PostCSS

  • tailwind.config.js
npm init -y
pakage.jsonの作成

npm install -D tailwindcss
npx tailwind init -p
CLIでフルパス指定
npx tailwind -di@latest init -p

tailwind.config.jsとpostcss.config.jsの生成
mkdir -p assets css
npm run build
npm run watch
--minify