How to Purge CSS with Wordpress, Tailwind and Gutenberg - wordpress

I'm using Laravel Mix with Tailwind CSS included into a theme for Wordpress.
A part of my tailwind config:
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
content: [
'*.php',
'./*.php',
'./*/*.php',
'./purge-templates/*.html',
'./template-parts/*.php',
'./template-parts/**/*.php',
'./resources/*.css',
'./resources/**/*.css',
'./resources/*.js',
'./resources/**/*.js'
],
options: {
safelist: {
standard: [/^has-/, /^align/, /^wp-/]
}
}
},
PurgeCss works fine for all files in the theme folder and in the paths I added but how do I get the classes I used in the content aka gutenberg blocks?
I got between 5-10 pages with content and every single one uses tailwind classes inside.
Do I need to save the content from each one into purge-templates or is there a way to do it automatically?
Thank you

Related

TailwindCSS doesn't purge plugin classes

I was trying to reduce the size of my CSS file using Tailwind's in-house compiler. This is my config file:
module.exports = {
content: ["./pages/*.html", "./components/**/*", "./src/*"],
mode: "jit",
plugins: [
require("tailwindcss"),
require("tw-elements/dist/plugin"),
require('tailwind-scrollbar')({ nocompatible: true }),
function ({ addVariant }) {
addVariant("child", "& > *");
addVariant("child-hover", "& > *:hover");
},
],
},
};
I have checked that the directories specified in content don't contain any hidden classes, however, it seems that Tailwind includes every class from the package tw-elements and doesn't purge them.
Is there any way how I can get a clean CSS file?
Many thanks for your help!
It is possible to reduce the size of your CSS file using Tailwind's in-house compiler. You can add the purge option to your Tailwind configuration file. Additionally, you can use the whitelist option to specify a list of classes that should not be purged. For example:
module.exports = {
content: ["./pages/*.html", "./components/**/*", "./src/*"],
mode: "jit",
purge: {
content: ['./pages/*.html', './components/**/*', './src/*'],
whitelist: ['tw-elements']
}
....
}

React Build Tailwind Not Including all classes

So I'm making an App with React 17, tailwind and craco and its works find in dev but when i build with craco, tailwind don't include classes as h-36, h-44, col-span-1...
That's my tailwind.config.js
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
There are some things that you should check:
Make sure that you put the tailwind classes in className attribute instead of class attribute
Do not use string concatenation to create class names. So, instead of writing <div class="text-{{ error ? 'red' : 'green' }}-600"></div>, write <div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Make sure that all your files are included in the purge command. Since you only specify './src/**/*.{js,jsx,ts,tsx}', this meant that tailwind will only scan what class should not be purged on those files with those extensions. This means that if you use tailwind classes in html files, tailwind will not scan those files. Also the same case if you somehow have files outside of ./src.
For me, I had to ensure that I was including all of the file types in my purge array within tailwind.config.js. Hope this helps someone - mine was missing the .vue files.
My Laravel tailwind purge array now looks like:
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
],

Antd dark theme is overriding my own css. How to solve it?

I installed antd to the CRA project. And I made some of my own classes and override default andt css.
Then I wanted andt table component but with dark theme.
So installed dark theme using webpack but failed. So I tried with craco and worked fine.
Using craco-less, successfully installed dark-theme but now it is overriding my own css.
After I checked the reason in inspect mode, my css is overriding default andt css and dark theme is overriding mine.
Did anyone experience in this kinda problem? Thanks in advance.
Following antd's Customize-Theme guide you can use u craco config craco.config.js like the one in the example to override theme variables.
const CracoLessPlugin = require('craco-less');
module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: { '#primary-color': '#1DA57A' },
javascriptEnabled: true,
},
},
},
},
],
};
In my experience you have to use less files to override the less from antd, so try to move your custom styles into less files.
Check this thread too, for a detailed description.

Tailwind class doesn't take effect

I created a react setup for a little project and decided to add tailwind. It was successful but when I add the class to the components, I don't see any change.
This is the link to the repository
Everything seems fine. Once delete the node modules and package.lock.json file and install node modules then start the server.
Also, there is no need to import tailwind.css in App.js.
Just main.css is enough as we are already appending all the styles to main.css (check scripts in package.json)
I found the problem. It was from my webpack config for CSS loader. I noticed when I added my own stylesheet, not all the rules were applied.
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
sourceMap: true
}
}
I had to remove all the options. I don't even know why I added it at first. Tailwind CSS now works.
If you know that you've configured Tailwind and added the right settings and presets, maybe you need to add this:
module.exports = {
content: [
'./public/index.html', <-
],
}
or this, if you're using ReactJS:
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}'
],
// ...
}
Within your tailwind.config.js file.
You also can learn/read more about it on: https://tailwindcss.com/docs/content-configuration, that worked perfectly for me!

How does NuxtJS css extraction work for generated static websites?

I am trying to generate a static website out of my (minimal) code with Nuxt. In that code, I integrate in particular the tailwindcss toolkit as well as vue2-leaflet. Upon
nuxt generate
I get two css files, one for the tailwindcss css and the other for the leaflet css. While the former file is fine and contains everything I need, the latter is pretty sparse:
.leaflet-tile-pane{z-index:200}#-webkit-keyframes leaflet-gestures-fadein{to{opacity:1}}#keyframes leaflet-gestures-fadein{0%{opacity:0}to{opacity:1}}
Of course, that makes my map render in a pretty strange way, because most of the css is missing. Here's my current nuxt.config.js:
module.exports = {
mode: 'universal',
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
css: [
],
plugins: [
{ src: '~plugins/leaflet.js', mode: 'client' }
],
buildModules: [
'#nuxtjs/tailwindcss'
],
modules: ['#nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],
[...]
build: {
extractCSS: true,
}
}
Getting rid of the extractCSS ends up incorporating all the relevant css into the index.html. It works, but then I get the following error:
ERROR Webpack mode only works with build.extractCSS set to *true*. Either extract your CSS or use 'postcss' mode
I'm not sure I understand how that whole css extraction works. Could someone enlighten me? Why is it not working with extractCSS: true? How can I make it work? Why is it working in SPA mode but not in static mode?
You are using nuxt-purgecss which is using purgecss to strip unused CSS.
purgecss do scan HTML (or vue) files for CSS classes in use and then strip unused classes from final CSS bundle.
You can take a look at default purgecss configuration used by nuxt-purgecss here. The paths lists the paths purgecss will scan for CSS usage.
Because you are not using most of the leaflet css directly (in your components), its is necessary to configure purgecss to don't remove leaflet's css.
You can do that by whitelisting (btw not sure if "comment" method will work in Vue\Nuxt)
You can read more here and here
Not tested!!
// nuxt.config.js
{
purgeCSS: {
whitelistPatterns: [/leaflet/, /marker/]
}
}
Regarding the error message
Error message is from nuxt-purgecss module - it is clearly documented here
I don't have deep knowledge of Nuxt build process. So I just assume from the docs that extractCSS: true will use extract-css-chunks-webpack-plugin to extract all CSS to separate CSS file, while (default) extractCSS: false will use PostCSS to extract all CSS and put it directly into the <style> tag of rendered page.
All of that doesn't matter IMHO because the root problem is the use of purgecss and the solution is to configure it correctly to whitelist leaflet CSS classes....

Resources