Laravel Tailwind CSS - generate all classes depends on ENV - css

Question

I just jump to laravel 9 recently (from few months ago), kinda wondering about,
Is it possible to generate all css classes (including custom classes), BUT, only when APP_ENV on .env is not production?
I tried to overcome No.1 (see below explanation), by using const APP_ENV = import.meta.env.VITE_APP_ENV; on tailwind.config.js - so I can do if - else thing, to load things, but it produce an error - offset is longer than source length! offset 81 > length 59. Is it possible to get .env variables on tailwind.config.js?
As I tried to find another way for No.2. I'm narrowing my objective on No.1 and No.2, so, I tried to load all possibilities of my "custom classes" only on dev. By using safelist - to generate all my-own custom class, but it seems not working well, since, the custom class that I want to add doesn't added. I'm using this - pattern: /./ - since I saw this article says so (please, correct me if I'm wrong), but, it's indeed "hitting" all other classes, not just my custom classes. I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *? (I already check around on tailwind docs, but couldn't found something like that)
I tried a proper way, to just load all my custom classes like pattern: /ctm/, but as stated on tailwind documentation
Patterns can only match against base utility names like /bg-red-.+/, and won’t match if the pattern includes a variant modifier like /hover:bg-red-.+/.
How can I do so, without me typing & guessing all of the possibility of variants?
Explanation how I try to overcome For question No.1 -
I tried using these code on app.js
const APP_ENV = import.meta.env.VITE_APP_ENV;
if (APP_ENV == 'production') {
//need to use ()
import ('../css/app.css');
}
and with below code on app.blade.php
#if (config('app.env') != 'production')
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
#endif
But, when it comes to a custom classes on tailwind.config.js - for example
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
colors: {
'ctm-dark-purple': '#2a234f', //<--- custom class here
'ctm-light-dark-purple': '#2a234f', //<--- custom class here
},
},
},
It doesn't generate that custom classes, since I "block" the generated class and swap it into cdn mode on dev.
So, in-summary, how can I "generate all css classes" only on "development" mode? Along with my "custom css class"? If that's not possible, then, is it possible to overcome No.3? I want to add all of my "custom css class" without adding the variants one-by-one. Maybe something like variants: *?
My main reason is simply, I want to apply classes directly on web-browser console and see the changes more faster, rather than back-and-forth modifying-then-save the code on text-editor.
Thanks a lot!
Log -
Updating Problem No.3 - since forgot to mention precisely what I want