UPDATE: The latest PurgeCSS version 3.0 introduces a safelist option, replacing the previously used whitelist.
I encountered a similar issue when dynamically injecting class names into my HTML template.
As I am using nuxt.js/tailwindcss, it is important to refer to the documentation for solutions.
Issue
The following code generates missing classes in production:
computed: {
axeY() {
return this.y < 0 ? `-translate-y${this.y}` + ' ' : `translate-y-1` + ' '
},
axeX() {
return this.x < 0 ? `-translate-x${this.x}` : `translate-x-${this.x}`
},
PostCSS analyzes all files within the content table (defined in the configuration file), however, my files do not contain classes with the translate prefix.
It is evident that the missing classes are: [translate-x-1,-translate-x-1, translate-y-1, -translate-y-1] ... where the number 1 represents a variable.
Resolution
- To prevent deletion of these classes, add them to the whitelist in PurgeCSS configuration
- Alternatively, include them in your files, such as by creating an unless file analyzed by PostCSS
Specify content to be analyzed by PurgeCSS with an array of filenames
- Update your TailWindCSS config file by specifying all core plugins used
- In complex scenarios, utilize regular expressions in the config file.
In my case, I directly configure purge in the TailWindCSS config file, passing the whitelist in the options variable. Here is a snippet of my config file when implementing the first solution:
/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
const num = [1, 2, 3, 4, 5, 6, 8, 10, 12]
const whitelist = []
num.map((x) => {
whitelist.push('translate-x-' + x)
whitelist.push('-translate-x-' + x)
whitelist.push('translate-y-' + x)
whitelist.push('-translate-y-' + x)
})
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
},
theme: {},
variants: {
backgroundColor: ['hover', 'focus', 'active'],
},
plugins: [],
purge: {
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
enabled: process.env.NODE_ENV === 'production',
content: [
'components/**/*.vue',
'layouts/**/*.vue',
'pages/**/*.vue',
'plugins/**/*.js',
'nuxt.config.js',
],
options: {
whitelist,
},
},
}