目次
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