tailwindcssで、@apply で短縮表記と purgeする
概要:
tailwindcssで、@applyを使用しクラス記述を短くする例となります。
- 動作環境は、vite起動し。 localhost:3000/ファイル名.html のようなURLです
環境
- tailwindcss: 2.1.1
- vite
- node 14
関連
https://tailwindcss.com/docs/installation
https://tailwindcss.com/docs/optimizing-for-production
https://tailwindcss.jp/docs/extracting-components
apply 設定方法
- applyの追加
css/tailwind.css に、下記追加
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
.btn {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
HTML書く , BUTTON の場合
- 通常 / applyなし
01_test_apply2.html
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Normal-button</button>
- apply適用
下記のように、短いコードでCSS適用できました。
01_test_apply2.html
<button class="btn">Apply button</button>
- @applyは、一部レスポンシブ等classは。使えないようですので。例外はありそうです
Purge
CSSコンパイル作業で、vite環境以外CSS読込む場合
- tailwind.config.js / purge部分を修正
htmlを対象にした場合です。
module.exports = {
purge: {
content: [
"./src/**/*.html", "./index.html"
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
- build, 上記関連のinstallationの、Using a custom CSS file あたりの下記コマンド
dist/tailwind.cssが出力されるので。読み込むと @applyが適用されました
NODE_ENV=production npx tailwindcss-cli@latest build ./css/tailwind.css -o ./dist/tailwind.css
- 下記の tailwindcssコマンドでも。可能でした
NODE_ENV=production npx tailwindcss build css/tailwind.css -o dist/tailwind.css
補足
- viteのインストール/起動 は、下記を参考にしました。
npm install 後、 yarn dev で。vite起動できました
....