How to Remove Unused CSS Tailwind Optimization the Complete Guide
This video showcase how to remove unused Tailwind CSS and optimization your website for fast loading speed. This is a complete guide on how to speedup your website page load and optimize it for mobile device.
Install packages:
npm install autoprefixer
npm install -g postcss-cli
npm install cssnano
npm install @fullhuman/postcss-purgecss
Create if not Exits "postcss.config.js" and copy and paste the following:
Beware of less than and greater than symbols are not allowed in the description!
//--
const purgecss = require("@fullhuman/postcss-purgecss");
const cssnano = require("cssnano");
module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer"),
cssnano({
preset: "default",
}),
purgecss({
content: [
"./dist/**/*.html",
"./src/**/*.vue",
"./src/**/*.jsx"
],
defaultExtractor: (content) =>
content.match(/[\w-/:]+(?<!:)/g) || [],
}),
],
};
//--
Finally run build to generate the optimized and minified CSS file version.
npm run build:css
#TailwindCSS #RemoveUnusedCSS #TailwindCSSOptimization