Dynamic safelisting

[benjaminpreiss]

As already discussed here, it is currently not possible to enable dynamic safelisting in tailwind.

Just so that you can understand what I am talking about: With dynamic safelisting I mean safelists that depend on the content of the processed files.

Currently, the only way to do something like that: Write the safelist to a file and include that file in the safelist configuration in tailwind.config.

But that might suffer from a double build problem, as the safelist can only be generated after the bundler (vite e.g.) has run which will then generate the safelist files which might trigger a rebuild.

Now I have an idea about how one could enable dynamic safelisting nevertheless:

Couldn't one write a tailwind plugin that reads the relevant files from the filesystem (e.g. **/*.svelte files), processes them to determine the dynamic safelist and then returns the dynamic safelist as part of the configuration?

Problems / questions:

• When is the plugin code run?
  • Each time a file changes? That might lead to inefficiencies... Better to only process the files that change.
  • Only on initialization of tailwind? That might be a dealbreaker, as we need to track changes to the filesystem.

[wongjn]

You could try creating PostCSS plugin that wraps Tailwind, conceptually like:

const tailwindcss = require('tailwindcss');
const base = require('tailwind.config');

module.exports = () => {
  let dynamicSafelist = [];
  
  return {
    postcssPlugin: 'my-plugin-name',
    plugins: [
      (root, result) => {
        // Update `dynamicSafelist` here
      },
      tailwindcss({
        presets: [base],
        safelist: dynamicSafelist,
      }),
    ],
  };
};

[benjaminpreiss]

Interesting... Thank you for the hint 🙏

I can only guess that the whole postcss plugin chain is invoked whenever a relevant file changes?
Do you know how tailwind handles only computing upon changed files then and not ALL watched files over- and over? (for efficiency purposes I mean)

[benjaminpreiss]

@wongjn So I tested the dynamic safelist as you said:

https://github.com/frontline-hq/tailwind-dynamic-safelist/blob/2da311b95c9e665a74e1e86dec11a9ea5adc5005/postcss.config.js

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

const safelist = [];

setTimeout(() => {
	safelist.push('bg-green-500');
	console.log('pushed to safelist');
}, '10000');

export default {
	plugins: [
		tailwindcss({
			safelist,
			content: ['./src/**/*.{html,js,svelte,ts}'],
			theme: {
				extend: {}
			}
		}),
		autoprefixer
	]
};

The safelisted styles are also inserted into the css after 10 seconds (+ I need to change something in a .svelte file to trigger HMR), as desired.

A remaining problem now is, that it does not read the tailwind.config.js file any more - any ideas how can make tailwind do so again?

[wongjn]

A remaining problem now is, that it does not read the tailwind.config.js file any more - any ideas how can make tailwind do so again?

Yes, pass the tailwind.config.js file content into preset as per my original code snippet above.

[benjaminpreiss]

@wongjn So, I got everything to work.

The repo does now look for (changing) .svelte files and parses them for comments of the following form: // dynamic-safelist('bg-' + 'green-500') (as can be seen here). The code in the brakets is then evaluated and added to the tailwind safelist.

The code sample does:

• Automatic vite server restarts, when the safelist changes
• Listens for changes in svelte files that could affect the safelist
• Loads the initial safelist both from a .ts config file (found here) and from the project's svelte files

For reference, here is the postcss config file: https://github.com/frontline-hq/tailwind-dynamic-safelist/blob/main/postcss.config.js#L14

I am still using a shitty way to restart the vite dev server (just rewriting the vite config file to the file tree, but without changes)

[benjaminpreiss]

So there is an even better way to do this, which only requires a vite plugin and a tiny change to tailwind.config.js:

frontline-hq/tailwind-dynamic-safelist@a969acd

It adds the tailwind safelist directly to the tailwind config and utilizes rewriting the config to the filesystem to restart the server (instead of server.restart()).