【Tailwind CSS】cssnanoを利用してファイルサイズを縮小化する方法を解説

npm install -D postcss-cli cssnano

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: 'default',
    },
  },
};

"build": "postcss src/style.css -o dist/style.css && cp src/index.html dist/index.html"

npm run build

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      // presetを使わずに独自に設定
      cssDeclarationSorter: true,
      discardComments: { removeAll: true },
      discardDuplicates: true,
      discardEmpty: true,
      discardOverridden: true,
      mergeLonghand: true,
      mergeRules: true,
      normalizeWhitespace: true,
      orderedValues: true,
      reduceTransforms: true,
    },
  },
};

/*! cssDeclarationSorter */
/*! プロパティ名に基づいて並べ替え */

/* before */
.cssDeclarationSorter {
  font-size: 20px;
  color: #444;
  font-weight: bold;
  background-color: #ccc;
  font-family: sans-serif;
}

/* after */
.cssDeclarationSorter {
  background-color: #ccc;
  color: #444;
  font-family: sans-serif;
  font-size: 20px;
  font-weight: 700;
}

/*! discardComments */
/*! コメント削除 */

/* before */
.discardComments {
  font-size: 16px; /* 文字サイズ */
  font-weight: 500; /* 文字の太さ */
}

/* after */
.discardComments {
  font-size: 16px;
  font-weight: 500;
}

/*! discardDuplicates */
/*! 重複プロパティを削除 */

/* before */
.discardDuplicates {
  border: 1px solid silver;
}
.discardDuplicates {
  border: 1px solid silver;
}

/* after */
.discardDuplicates {
  border: 1px solid silver;
}

/*! discardEmpty */
/*! 空の指定の削除 */

/* before */
.discardEmpty {}
@media screen {}

/* after */
/*! 削除 */

/*! mergeLonghand */
/*! ロングハンドプロパティをショートハンドプロパティに変更 */

/* before */
.mergeLonghand {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* after*/
.mergeLonghand {
  margin: 10px 20px;
}

/*! mergeRules */
/*! ロングハンドプロパティをショートハンドプロパティに変更 */

/* before */
.mergeRules {
  color: blue;
}
.mergeRules {
  font-weight: 700;
}


/* after*/
.mergeRules {
  color: blue;
  font-weight: 700;
}

/*! normalizeWhitespace */
/*! ルール、セレクター、宣言の内部と周囲の空白をトリミングし、各セレクター内の最後のセミコロンを削除 */

/* before */
.normalizeWhitespace {
  text-decoration: underline;
  color: red !important;
}

/* after */
.normalizeWhitespace {text-decoration:underline;color:red!important}

/*! orderedValues */
/*! 変換の影響を受けるプロパティの引数の順序を並び替え */

/* before */
.orderedValues {
  border: #fff solid 1px;
}

/* after */
.orderedValues {
  border: 1px solid #fff;
}

/*! reduceTransforms */
/*! 同等の短縮形がある場合、変換関数を短縮系に変換 */

/* before */
.reduceTransforms {
  transform: translate3d(0, 0, 0);
}

/* after */
.reduceTransforms {
  transform: translateZ(0);
}