tailwindcssで、@apply で短縮表記と purgeする

2 min read読了の目安(約2000字

概要:

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起動できました

https://github.com/tailwindlabs/tailwindcss-from-zero-to-production/tree/main/01-setting-up-tailwindcss

....