How to Remove Unused CSS Tailwind Optimization the Complete Guide

Channel:

Righteous Culture

Subscribers:

2,640

Published on July 9, 2020 12:43:04 AM ● Video Link: https://www.youtube.com/watch?v=aT0QXvcPXIY

Category:

Guide

Duration: 14:25

3,097 views

34

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